Android tab导航的几种方法:ActionBar tab +fragment,Viewpager+pagerTitleStrip,开源框架ViewPageIndicator 和 ViewPager

 

action来实现tab标签 并跟fragment结合 因为要写新闻客户端这个tab导航是必须的 这里我写几个小练习,希望大家融会贯通.

 

1actionbar设置tab +fragment

布局是个layout 什么layout都可以 加个Id 叫container

package com.example.demoforactionbar;


import android.app.ActionBar;
import android.app.Activity;
import android.app.Fragment;
import android.app.FragmentTransaction;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;


public class MainActivity extends Activity implements
    ActionBar.TabListener
{
    private static final String SELECTED_ITEM = "selected_item";
    @Override
    public void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        final ActionBar actionBar = getActionBar();
        // 设置ActionBar的导航方式：Tab导航
        actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
        // 依次添加三个Tab页，并为三个Tab标签添加事件监听器
        actionBar.addTab(actionBar.newTab().setText("第一页")
            .setTabListener(this));
        actionBar.addTab(actionBar.newTab().setText("第二页")
            .setTabListener(this));
        actionBar.addTab(actionBar.newTab().setText("第三页")
            .setTabListener(this));
    }
    @Override
    public void onRestoreInstanceState(Bundle savedInstanceState)
    {
        if (savedInstanceState.containsKey(SELECTED_ITEM))
        {
            // 选中前面保存的索引对应的Fragment页
            getActionBar().setSelectedNavigationItem(
                    savedInstanceState.getInt(SELECTED_ITEM));
        }
    }
    @Override
    public void onSaveInstanceState(Bundle outState)
    {
        // 将当前选中的Fragment页的索引保存到Bundle中
        outState.putInt(SELECTED_ITEM,
                getActionBar().getSelectedNavigationIndex());
    }
    @Override
    public void onTabUnselected(ActionBar.Tab tab,
        FragmentTransaction fragmentTransaction)
    {
    }
    // 当指定Tab被选中时激发该方法
    @Override
    public void onTabSelected(ActionBar.Tab tab,
        FragmentTransaction fragmentTransaction)
    {
        // 创建一个新的Fragment对象
        Fragment fragment = new DummyFragment();
        // 创建一个Bundle对象，用于向Fragment传入参数
        Bundle args = new Bundle();
        args.putInt(DummyFragment.ARG_SECTION_NUMBER,
                tab.getPosition() + 1);
        // 向fragment传入参数
        fragment.setArguments(args);
        // 获取FragmentTransaction对象
        FragmentTransaction ft = getFragmentManager()
                .beginTransaction();
        // 使用fragment代替该Activity中的container组件
        ft.replace(R.id.container, fragment);
        // 提交事务
        ft.commit();
    }
    @Override
    public void onTabReselected(ActionBar.Tab tab,
        FragmentTransaction fragmentTransaction)
    {
    }
}

 

fragment

 

package com.example.demoforactionbar;

import android.app.Fragment;
import android.os.Bundle;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

public class DummyFragment extends Fragment {

    public static final String ARG_SECTION_NUMBER = "section_number";
    // 该方法的返回值就是该Fragment显示的View组件
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
         Bundle savedInstanceState)
    {
        TextView textView = new TextView(getActivity());
        textView.setGravity(Gravity.CENTER_HORIZONTAL);
        // 获取创建该Fragment时传入的参数Bundle
        Bundle args = getArguments();
        // 设置TextView显示的文本
        textView.setText(args.getInt(ARG_SECTION_NUMBER) + "");
        textView.setTextSize(30);
        // 返回该TextView
        return textView;
    }
    
}

 

2 .Viewpager + pagerTopStrip

 

 

 

xml:

 

<?xml version="1.0" encoding="utf-8" ?>
<android.support.v4.view.ViewPager
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/pager"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <!-- 定义导航状态条组件 -->
    <android.support.v4.view.PagerTitleStrip
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="top"
        android:background="#33b5e5"
        android:textColor="#fff"
        android:paddingTop="4dp"
        android:paddingBottom="4dp" />
</android.support.v4.view.ViewPager>

 

 

MainActivity:

package com.example.demoforactionbar;


import android.app.ActionBar;
import android.app.Activity;
import android.app.FragmentTransaction;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.Menu;
import android.view.MenuItem;


public class MainActivity extends FragmentActivity
    implements ActionBar.TabListener
{
    ViewPager viewPager;
    ActionBar actionBar;
    @Override
    public void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        // 获取ActionBar对象
        actionBar = getActionBar();
        // 获取ViewPager
        viewPager = (ViewPager) findViewById(R.id.pager);
        // 创建一个FragmentPagerAdapter对象，该对象负责为ViewPager提供多个Fragment
        FragmentPagerAdapter pagerAdapter = new FragmentPagerAdapter(
            getSupportFragmentManager())
        {
            // 获取第position位置的Fragment
            @Override
            public Fragment getItem(int position)
            {
                Fragment fragment = new DummyFragment();
                Bundle args = new Bundle();
                args.putInt(DummyFragment.ARG_SECTION_NUMBER, position + 1);
                fragment.setArguments(args);
                return fragment;
            }
            // 该方法的返回值i表明该Adapter总共包括多少个Fragment
            @Override
            public int getCount()
            {
                return 3;
            }
            // 该方法的返回值决定每个Fragment的标题
            @Override
            public CharSequence getPageTitle(int position)
            {
                switch (position)
                {
                    case 0:
                        return "第一页";
                    case 1:
                        return "第二页";
                    case 2:
                        return "第三页";
                }
                return null;
            }
        };
        // 设置ActionBar使用Tab导航方式
        actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
        // 遍历pagerAdapter对象所包含的全部Fragment
        // 每个Fragment对应创建一个Tab标签
        for (int i = 0; i < pagerAdapter.getCount(); i++)
        {
            actionBar.addTab(actionBar.newTab()
                .setText(pagerAdapter.getPageTitle(i))
                .setTabListener(this));
        }
        // 为ViewPager组件设置FragmentPagerAdapter
        viewPager.setAdapter(pagerAdapter); // ①
        // 为ViewPager组件绑定事件监听器
        viewPager.setOnPageChangeListener(
            new ViewPager.SimpleOnPageChangeListener()
            {
                // 当ViewPager显示的Fragment发生改变时激发该方法
                @Override
                public void onPageSelected(int position)
                {
                    actionBar.setSelectedNavigationItem(position);
                }
            });
    }
    @Override
    public void onTabUnselected(ActionBar.Tab tab,
        FragmentTransaction fragmentTransaction)
    {
    }
    // 当指定Tab被选中时激发该方法
    @Override
    public void onTabSelected(ActionBar.Tab tab,
         FragmentTransaction fragmentTransaction)
    {
        viewPager.setCurrentItem(tab.getPosition());  // ②
    }
    @Override
    public void onTabReselected(ActionBar.Tab tab,
        FragmentTransaction fragmentTransaction)
    {
    }
}

 

DummyFragment 父类的包改成V4包下的即可 不改会出错的

public class DummyFragment extends android.support.v4.app.Fragment

 

 

3 开源框架ViewPageIndicator 和 ViewPager 

框架自己搜索. 方法和第二很像 .

 

XML

 

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#C5DAED"
    android:orientation="vertical" >

    <include layout="@layout/top" />

    <com.viewpagerindicator.TabPageIndicator
        android:id="@+id/id_indicator"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@android:color/transparent" >
    </com.viewpagerindicator.TabPageIndicator>

    <android.support.v4.view.ViewPager
        android:id="@+id/id_viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >
    </android.support.v4.view.ViewPager>

</LinearLayout>

 

MainActivity:

import android.os.Bundle;
import android.support.v4.app.FragmentActivity;
import android.support.v4.view.ViewPager;
import android.view.Window;

import com.viewpagerindicator.TabPageIndicator;

public class MainActivity extends FragmentActivity
{
    private ViewPager mViewPager;
    private TabPageIndicator mTabPageIndicator;
    private TabAdapter mAdapter ;

    @Override
    protected void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.activity_main);
        
        initView();
    }

    private void initView()
    { //初始化控件 
        mViewPager = (ViewPager) findViewById(R.id.id_viewpager);
        mTabPageIndicator = (TabPageIndicator) findViewById(R.id.id_indicator);
        mAdapter = new TabAdapter(getSupportFragmentManager());
        mViewPager.setAdapter(mAdapter);
        
        mTabPageIndicator.setViewPager(mViewPager, 0); //给mTabPageIndicator 设置ViewPager ,参数 0是初始化位置
    }
    
    

}

 

Adapter:

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

public class TabAdapter extends FragmentPagerAdapter
{

    public static String[] TITLES = new String[]
    {"ACE", "1", "2", "3", "4", "5" };

    public TabAdapter(FragmentManager fm)
    {
        super(fm);
    }

    @Override
    public Fragment getItem(int arg0)
    {
        TabFragment fragment = new TabFragment(arg0);
        return fragment;
    }

    @Override
    public int getCount()
    {
        return TITLES.length;
    }

    @Override
    public CharSequence getPageTitle(int position)
    {
        return TITLES[position];
    }

}

 

 

TabFragment

 

public class TabFragment extends Fragment
{
    private int pos;

    
    public TabFragment(int pos)
    {
        this.pos = pos;
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState)
    {
        View view = inflater.inflate(R.layout.frag, container, false);
        TextView tv = (TextView) view.findViewById(R.id.id_tv);
        tv.setText(TabAdapter.TITLES[pos]);
        return view;
    }
}

 

Fragmen布局 frag.xml

 

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

    <TextView
        android:id="@+id/id_tv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:textStyle="bold"
        android:textSize="22sp"
        android:text="hello ACE" />

</RelativeLayout>