Android开发之TabLayout实现顶部菜单

在Android开发中，经常要使用顶部菜单，如网易新闻、今日头条等，实现顶部菜单以前是ViewPager配合PagerTabStrip来实现，但Android 5.0以后，推荐大家使用MD中的TabLayout来实现，很简单哦~~

---

开发环境：Android Studio

开发步骤

• 1、在 build.gradle 导入 com.android.support:design:22.2.1
• 2、Activity布局

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:app="http://schemas.android.com/apk/res-auto"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical">    <android.support.design.widget.TabLayout        android:id="@+id/tabs"        android:layout_width="match_parent"        android:layout_height="48dp" //菜单高度        android:background="#1FBCD2" //菜单条的背景        app:tabIndicatorColor="#ff0000" //菜单指示器的颜色        app:tabMode="scrollable" //菜单可以滚动        app:tabPaddingEnd="20dp"         app:tabPaddingStart="20dp" //菜单之间的间距        app:tabSelectedTextColor="#FFFFFF" //菜单选中时的颜色        app:tabTextColor="#000000"> //菜单未选中时的颜色    </android.support.design.widget.TabLayout>    <android.support.v4.view.ViewPager        android:id="@+id/vp_view"        android:layout_width="match_parent"        android:layout_height="wrap_content" /></LinearLayout>

• 3、Activity代码

public class MainActivity extends Activity {    private TabLayout mTabLayout;    private ViewPager mViewPager;    private LayoutInflater mInflater;    private List<String> mTitleList = new ArrayList<String>();//页卡标题集合    private View view1, view2, view3, view4, view5, view6, view7, view8;//页卡视图    private List<View> mViewList = new ArrayList<>();//页卡视图集合    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        mViewPager = (ViewPager) findViewById(R.id.vp_view);        mTabLayout = (TabLayout) findViewById(R.id.tabs);        mInflater = LayoutInflater.from(this);        view1 = mInflater.inflate(R.layout.content, null);        view2 = mInflater.inflate(R.layout.content, null);        view3 = mInflater.inflate(R.layout.content, null);        view4 = mInflater.inflate(R.layout.content, null);        view5 = mInflater.inflate(R.layout.content, null);        view6 = mInflater.inflate(R.layout.content, null);        view7 = mInflater.inflate(R.layout.content, null);        view8 = mInflater.inflate(R.layout.content, null);        //添加页卡视图        mViewList.add(view1);        mViewList.add(view2);        mViewList.add(view3);        mViewList.add(view4);        mViewList.add(view5);        mViewList.add(view6);        mViewList.add(view7);        mViewList.add(view8);       //添加页卡标题        mTitleList.add("头条");        mTitleList.add("热点");        mTitleList.add("本地");        mTitleList.add("财经");        mTitleList.add("科技");        mTitleList.add("教育");        mTitleList.add("体育");        mTitleList.add("笑话");       //添加tab选项卡，默认第一个选中        mTabLayout.addTab(mTabLayout.newTab().setText(mTitleList.get(0)), true);        mTabLayout.addTab(mTabLayout.newTab().setText(mTitleList.get(1)));        mTabLayout.addTab(mTabLayout.newTab().setText(mTitleList.get(2)));        mTabLayout.addTab(mTabLayout.newTab().setText(mTitleList.get(3)));        mTabLayout.addTab(mTabLayout.newTab().setText(mTitleList.get(4)));        mTabLayout.addTab(mTabLayout.newTab().setText(mTitleList.get(5)));        mTabLayout.addTab(mTabLayout.newTab().setText(mTitleList.get(6)));        mTabLayout.addTab(mTabLayout.newTab().setText(mTitleList.get(7)));        MyPagerAdapter mAdapter = new MyPagerAdapter(mViewList);       //给ViewPager设置适配器        mViewPager.setAdapter(mAdapter);       //将TabLayout和ViewPager关联起来        mTabLayout.setupWithViewPager(mViewPager);       //给Tabs设置适配器        mTabLayout.setTabsFromPagerAdapter(mAdapter);    }    //ViewPager适配器    class MyPagerAdapter extends PagerAdapter {        private List<View> mViewList;        public MyPagerAdapter(List<View> mViewList) {            this.mViewList = mViewList;        }        @Override        public int getCount() {            return mViewList.size();//页卡数        }        @Override        public boolean isViewFromObject(View view, Object object) {            return view == object;//官方推荐写法        }        @Override        public Object instantiateItem(ViewGroup container, int position) {            container.addView(mViewList.get(position));//添加页卡            return mViewList.get(position);        }        @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);//页卡标题        }    }}

• 4、实现效果如下

TabLayout.png

-5、注意点
如果真的按上面一字不差走下来的话，会发现TabLayout在ViewPager滑动的时候会出现菜单文字闪烁的现象。这个应该是版本的bug，想解决的话使用22.0里没有bug的版本（compile 'com.android.support:design:22.2.0'）或者升级到23.x

作者：YungFan
链接：http://www.jianshu.com/p/7ee916e5fae7
來源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。