使用 ViewPagerIndicator + FragmentPagerAdapter 实现 tab 切换

主界面

本项目导入的是 v4 包的Fragment

package com.gaoo.tab04;
import com.viewpagerindicator.TabPageIndicator;
import java.util.List;

/**
 * 使用 ViewPagerIndicator + FragmentPagerAdapter 实现 tab 切换
 * //导入 Indicator_library
 */
public class MainActivity extends FragmentActivity {

    private ViewPager mViewPager; //viewpager
    TabPageIndicator mTabPageIndicator; //指示器
    List<Fragment> mFragmentList; //数据源,类型是 Fragment

    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); //设置默认选中页
    }
}

Adapter 继承自 FragmentPagerAdapter

实现了2个方法和另外一个 getPageTitle(int position) 方法.

package com.gaoo.tab04;

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

/**
 * 指示器的 适配器 adapter
 */
public class TabAdapter extends FragmentPagerAdapter {

    public  static String[] TITLES = new  String[]{"金系掌门","木系掌门","土系掌门","水系","火系"};
    public TabAdapter(FragmentManager fm) {
        super(fm);
    }

    @Override
    public Fragment getItem(int position) {
        TabFragment tabFragment = new TabFragment(position); //在这里把 position传入 是为了不同的位置显示不同的标题
             return tabFragment;
    }

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

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

Fragment

/**
 * Fragment的内容区域
 */
public class TabFragment extends Fragment {
    public TabFragment() {    }
    private int pos;
    public TabFragment(int position) {
        this.pos = position;
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {

        View view = inflater.inflate(R.layout.frag, null);
        TextView tv = (TextView) view.findViewById(R.id.id_text);
        tv.setText(TabAdapter.TITLES[pos]);
        return view;
    }
}

布局文件 activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    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>

顶部布局 top.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="match_parent"
              android:layout_height="48dp"
              android:background="#51badd"
              android:orientation="horizontal">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"

        android:layout_margin="3dp"
        android:background="@drawable/logo"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:layout_marginLeft="3dp"
        android:text="大运河"
        android:textColor="#ebeceaea"
        android:textSize="20sp"/>
</LinearLayout>

项目中需要用到 library_viewpagerindicator 类库
源码下载地址:
链接：http://pan.baidu.com/s/1c2iaxBq 密码：522p

项目运行效果图