使用 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

项目运行效果图