android动态添加顶部tab,Android开发之TabLayout实现顶部菜单

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

开发环境：Android Studio

开发步骤

1、在 build.gradle 导入 com.android.support:design:22.2.1

2、Activity布局

xmlns:app="http://schemas.android.com/apk/res-auto"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical">

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:id="@+id/vp_view"

android:layout_width="match_parent"

android:layout_height="wrap_content" />

3、Activity代码

public class MainActivity extends Activity {

private TabLayout mTabLayout;

private ViewPager mViewPager;

private LayoutInflater mInflater;

private List mTitleList = new ArrayList();//页卡标题集合

private View view1, view2, view3, view4, view5, view6, view7, view8;//页卡视图

private List 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 mViewList;

public MyPagerAdapter(List 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