TabLayout+ViewPager实现选项卡切换效果

原来项目中一直使用tabhost做切换效果,最近在整理代码,决定放弃tabhost,使用google自带的切换布局TabLayout .

其实TabLayout实现切换效果还是蛮简单的,跟tabpageindicator类似,不过原来没弄过,还是折腾了一会儿.

本次demo是TabLayout+ViewPager来实现切换滑动效果的.

首先要添加依赖包,TabLayout是google的design包最新定义的控件:

compile'com.android.support:design:23.2.0'

布局文件:

 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"
 xmlns:app="http://schemas.android.com/apk/res-auto"
 android:orientation="vertical">
  android:id="@+id/tay_home_tab_view"
 android:layout_width="match_parent"
 android:background="@color/colorPrimaryLight"
 android:layout_height="30dp"
 app:tabIndicatorColor="#26c6da"
 app:tabSelectedTextColor="#f44336"
 app:tabTextColor="#bdbdbd"/>
  android:id="@+id/tay_home_pager_view"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:background="#ededed"/>
 
 

主项目代码:

 public class TestActivity extends Activity {
 private TabLayout mTabLayout;
 private ViewPager mViewPager;
 private List mTitleList;
 private List mViewList;
 
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_test);

        mTabLayout = (TabLayout) findViewById(R.id.tay_home_tab_view);
        mViewPager = (ViewPager) findViewById(R.id.tay_home_pager_view);
        initViewPager();

    }

    private void initViewPager() {
        mTabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);
        setViewPagerData();
        MyPagerAdapter mAdapter = new MyPagerAdapter();
        mViewPager.setAdapter(mAdapter);
        mTabLayout.setupWithViewPager(mViewPager); //将TabLayout和ViewPager关联起来
    }

    private void setViewPagerData() {
        if (mTitleList == null) {
            mTitleList = new ArrayList<>();
        }
        if (mViewList == null) {
            mViewList = new ArrayList<>();
        }
        for (int i = 0; i < 5; i++) {
            mTitleList.add("列表"+i);
            mViewList.add(View.inflate(this,R.layout.tab_layout_item,null));
        }
    }

    class MyPagerAdapter extends PagerAdapter {

        @Override
        public int getCount() {
            return mTitleList == null ? 0 : mTitleList.size();
        }

        @Override
        public boolean isViewFromObject(View view, Object object) {
            return view == object;
        }

        @Override
        public Object instantiateItem(ViewGroup container, int position) {
            View view = mViewList.get(position);
            TextView tv = (TextView) view.findViewById(R.id.text);
            tv.setText("测试：" +position);
            container.addView(view);
            return view;
        }

        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {
            container.removeView(mViewList.get(position));
        }

        @Override
        public CharSequence getPageTitle(int position) {
            return mTitleList.get(position);
        }
    }
}
 
 

说说demo过程中碰到的问题:
1.TabLayout单独使用的时候用addtab添加选项卡;
2.TabLayout和Viewpager联合使用的时候不需要用addTab的方式,可使用viewpager的title;
我在写的时候在pagerAdapter中漏写了getPageTitle,导致TabLayout不显示问题;
3.测试的时候遇到一个很"奇葩"的问题,滑动的时候选项卡切换不对,漏写了一个方法.

Paste_Image.png