Android之Actionbar顶部标签的使用

今天写了个示例代码,就是使用Actionbar类实现顶部标签切换功能。如果所示。

使用最新的adt工具,创建项目的时候都会带一个android-support-v7-appcompat的类库项目,

这个libproject中有我们要用的ActionBar,可以适配2.1的Android系统。

废话不多说,直接上代码。

1、修改activity_main.xml,增加ViewPager。

<android.support.v4.view.ViewPager xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/pager"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>

2、修改MainActivity中的代码,让其继承ActionBarActivity

public class MainActivity extends ActionBarActivity implements TabListener {

3、创建TabsPagerAdapter继承FragmentPagerAdapter

package com.example.tabswithswie.adatper;

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;

import com.example.tabswithswie.fragments.AppFragment;
import com.example.tabswithswie.fragments.GamesFragment;
import com.example.tabswithswie.fragments.MoviesFragment;

public class TabsPagerAdapter extends FragmentPagerAdapter {

    public TabsPagerAdapter(FragmentManager fm) {
        super(fm);
        // TODO Auto-generated constructor stub
    }

    @Override
    public Fragment getItem(int index) {
        switch (index) {
        case 0:
            return new AppFragment();
        case 1:
            return new GamesFragment();
        case 2:
            return new MoviesFragment();
     
        }
        return null;
    }

    @Override
    public int getCount() {
        // TODO Auto-generated method stub
        return 3;
    }

}

4、创建AppFragment继承android.support.v4.app.Fragment

package com.example.tabswithswie.fragments;

import com.example.tabswithswie.R;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class AppFragment extends Fragment {
    
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState) {
        // TODO Auto-generated method stub
        return inflater.inflate(R.layout.fragment_app, container, false);
    }
}

5、创建布局文件fragment_app.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#43ff00ff" >

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" 
        android:layout_centerInParent="true"
        android:text="这个是应用界面"
        android:textAppearance="?android:attr/textAppearanceLarge" />

</RelativeLayout>

6、创建GamesFragment继承android.support.v4.app.Fragment

package com.example.tabswithswie.fragments;

import com.example.tabswithswie.R;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class GamesFragment extends Fragment {
    
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState) {
        // TODO Auto-generated method stub
        return inflater.inflate(R.layout.fragment_game, container, false);
    }
}

7、创建布局文件fragment_game.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" 
    android:background="#9445f353">

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" 
        android:layout_centerInParent="true"
        android:text="游戏"
        android:textAppearance="?android:attr/textAppearanceLarge" />

</RelativeLayout>

8、创建MoviesFragment继承android.support.v4.app.Fragment

package com.example.tabswithswie.fragments;

import com.example.tabswithswie.R;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class MoviesFragment extends Fragment {
    
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState) {
        // TODO Auto-generated method stub
        return inflater.inflate(R.layout.fragment_movie, container, false);
    }
}

9、创建布局文件fragment_movie.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#34fef443" >

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" 
        android:layout_centerInParent="true"
        android:text="视频"
        android:textAppearance="?android:attr/textAppearanceLarge" />

</RelativeLayout>

10、回到 MainActivity类,添加Tabs到ActionBar中,并处理点击滑动事件。完整代码

package com.example.tabswithswie;

import android.os.Bundle;
import android.support.v4.app.FragmentTransaction;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.support.v7.app.ActionBar;
import android.support.v7.app.ActionBar.Tab;
import android.support.v7.app.ActionBar.TabListener;
import android.support.v7.app.ActionBarActivity;

import com.example.tabswithswie.adatper.TabsPagerAdapter;

public class MainActivity extends ActionBarActivity implements TabListener {
    private ViewPager viewPager;
    private ActionBar actionBar; 
    private TabsPagerAdapter mTabsPagerAdapter;
    
    private String[] tabs ={"应用","游戏","视频"};
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //获取viewpager
        viewPager = (ViewPager) findViewById(R.id.pager);
        //实例化pageradapter
        mTabsPagerAdapter = new TabsPagerAdapter(getSupportFragmentManager());
        viewPager.setAdapter(mTabsPagerAdapter);
        //获取适配的actionbar
        actionBar = getSupportActionBar();
        //设置home按钮不可点击
        actionBar.setHomeButtonEnabled(false);
        //设置顶部导航的模式  -tabs
        actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
        //添加标签
        for(String tab:tabs)
        {
            actionBar.addTab(actionBar.newTab().setText(tab).setTabListener(this));
         }
        //设置ViewPager切换时候的监听事件
        viewPager.setOnPageChangeListener(new OnPageChangeListener() {
            
            @Override
            public void onPageSelected(int position) {
                //页面滑动,顶部标签跟着改变
                 actionBar.setSelectedNavigationItem(position);
            }
            
            @Override
            public void onPageScrolled(int arg0, float arg1, int arg2) {
                // TODO Auto-generated method stub
                
            }
            
            @Override
            public void onPageScrollStateChanged(int arg0) {
                // TODO Auto-generated method stub
                
            }
        });
    }
     

    @Override
    public void onTabReselected(Tab arg0, FragmentTransaction arg1) {
        // TODO Auto-generated method stub
        
    }

    @Override
    public void onTabSelected(Tab tab, FragmentTransaction fragmentTransaction) {
        //tab选中,切换viewpager
        viewPager.setCurrentItem(tab.getPosition());
    }

    @Override
    public void onTabUnselected(Tab arg0, FragmentTransaction arg1) {
        // TODO Auto-generated method stub
        
    }

     
}

代码就是这样的,搞定收工了。示例代码下载

Android之Actionbar顶部标签的使用

时间: 2024-10-11 20:51:24

Android之Actionbar顶部标签的使用的相关文章

Android中隐藏顶部状态栏的那些坑

Android中隐藏顶部状态栏的那些坑 先看看常规的隐藏状态栏的方法: 方法一: @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); //去除title requestWindowFeature(Window.FEATURE_NO_TITLE); //去掉Activity上面的状态栏 getWindow().setFlags(WindowManager

[Android UI] ActionBar 自定义属性

actionbar 默认放在顶部, 如果在application或者activity中加入 android:uiOptions="splitActionBarWhenNarrow" 那么,actionbar将在底部显示. 自定义属性,包括自定义actionbar的背景颜色 <!-- the theme applied to the application or activity --> <style name="CustomActivityTheme&quo

[Android UI]ActionBar随ScorllView上下拖动而透明度渐变效果(续1)

根据上一篇ActionBar随ScorllView上下拖动而透明度渐变效果的基本描述,我们自定义的actionbar滚动透明的效果使用起来可能有点繁琐.这次想要在上次的代码内容上(可自动切换.无限滑动的图片广告展示栏的实现分享(续1)),博主太懒了,哈哈,实现这样的效果. 这次的demo很简单,老样子,你可以自己下载demo稍微看看,结构如下: 主界面代码: package org.jan.adviewpaper.demo; import android.app.ActionBar; impor

Android中ActionBar以及menu的代码设置样式

Android中ActionBar以及menu的代码样式如何设置?今天麦子学院android开发老师主要介绍Android中ActionBar以及menu的代码设置样式,,有需求的朋友可以参阅下 menu有些xml代码 http://schemas.android.com/apk/res/android"> <="" div=""> android:title="查找1" android:orderInCategory

Android中ActionBar及Overflow的显示

转自:http://www.sxt.cn/u/756/blog/4386 最近在按照Android的API文档学习Android中actionbar的使用,Action bar 最基本的形式,就是为 activity 显示标题,并且在标题左边显示一个 app icon.在这样简单的形式下,对于所有的 activity 来说,action bar 对告知用户他们当前所处的位置十分有用,并为你的 app 维护了持续的同一标识.Action Bar是一种新増的导航栏功能,在Android 3.0之后加

Android 实现ActionBar定制

我们在使用Android手机时,常常发现应用中的ActionBar和我们平时使用的ActionBar相差很大.简单的说就是,其它应用的ActionBar为什么那么绚丽,自己应用的ActionBar就那么挫呢?近期有时间就细致研究了一下关于ActionBar的相关问题. 首先我们来看一下之前所说的"高大上"的ActionBar的效果图: 查阅了Android文档以及ActionBar的实现源代码.发现ActionBar是能够定制的(PS:Google还是想的很周到,不愧为大神级别的程序猿

Xamarin.Android之ActionBar与菜单

一.选项卡 如今很多应用都会使用碎片以便在同一个活动中能够显示多个不同的视图.在Android 3.0 以上的版本中,我们已经可以使用ActionBar提供的Tab来实现这种效果,而不需要我们自己去实现碎片的切换.ActionBar默认是不具备选项卡功能的,所以我们需要给一个属性赋上对应的枚举,比如下面的方式将开启选项卡. 1 ActionBar.NavigationMode = ActionBarNavigationMode.Tabs; 开启之后,我们就需要往ActionBar中添加Tab,当

【Android】ActionBar的使用(1)

前(fei)言(hua):转行iOS开发半年,很久没接触Android了,前几天去上课,听着实在无聊,随手拿了同学的一本<Android UI设计>,发现有好多基础知识自己虽然用过,但是都是当初做Android开发时,当项目需要的用到的时候才去百度,control+c和control+v后,便草草完事,以至于有时再需要使用某个控件或者功能时,再去百度或者翻查以前的代码.虽然曾经做了2年Android开发,但只是做了几个很水的app,为了不亏欠那两年奋斗的青春,现在开始,我将写一些关于Andro

iOS开发笔记13:顶部标签式导航栏及下拉分类菜单

当内容及分类较多时,往往采用顶部标签式导航栏,例如网易新闻客户端的顶部分类导航,最近刚好有这样的应用场景,参考网络上一些demo,实现了这种导航效果,记录一些要点. 效果图(由于视频转GIF掉帧,滑动和下拉动画显得比较生硬,刚发现quickTime可以直接录制手机视频,推荐一下,很方便) 1.顶部标签式导航栏 (1)实现思路 其实就是在上下两个UIScrollView上做文章,实现联动选择切换的效果. ①顶部标签导航栏topCategoryListScrollView加载显示分类数据,下方con