本来算是个鸡肋的东西,但是design兼容包发布之后情况就大不一样了。
下面看代码:
首先在gradle中添加依赖
dependencies {
compile fileTree(include: ['*.jar'], dir: 'libs')
compile 'com.android.support:design:22.2.1'
compile 'com.android.support:recyclerview-v7:22.2.1'
compile 'com.android.support:cardview-v7:22.2.1'
compile files('libs/universal-image-loader-1.9.4.jar')
compile project(':ImageViewTouch')
}
值得一提的是,design包整合了v4和v7的包,所以添加之后就不需要再添加v4和v7。
然后就是在Activity或者Fragment中添加TabLayout和ViewPager
<android.support.design.widget.TabLayout
android:id="@+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabGravity="fill"
app:tabMode="fixed"
app:tabSelectedTextColor="?attr/colorAccent"
app:tabTextColor="#fff" />
<android.support.v4.view.ViewPager
android:id="@+id/mainPager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="@+id/tabLayout" />
tabGravity和tabMode能让你的Tab变的更加丰富
下面创建ViewPager页面,我就不代码演示了
继承PagerAdapter创建MyPagerAdapter
public class MyPagerAdapter extends PagerAdapter {
private List<View> viewList;
private String[] titles;
public MyPagerAdapter(List<View> viewList, String[] titles) {
this.viewList = viewList;
this.titles = titles;
}
@Override
public int getCount() {
return viewList.size();
}
@Override
public boolean isViewFromObject(View view, Object object) {
return view == object;
}
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView(viewList.get(position));
}
@Override
public Object instantiateItem(ViewGroup container, int position) {
container.addView(viewList.get(position));
return viewList.get(position);
}
@Override
public CharSequence getPageTitle(int position) {
return titles[position];
}
}
最后,ViewPager通过PagerAdapter绑定Pager页面,TabaLayout绑定ViewPager
tabLayout = (TabLayout) findViewById(R.id.tabLayout);
mainPager = (ViewPager) findViewById(R.id.mainPager);
LayoutInflater inflater = getLayoutInflater();
facePager = inflater.inflate(R.layout.face_layout, null);
modelPager = inflater.inflate(R.layout.model_layout, null);
viewList = new ArrayList<View>();
viewList.add(facePager);
viewList.add(modelPager);
titles = new String[]{"表情", "模板"};
MyPagerAdapter myPagerAdapter = new MyPagerAdapter(viewList, titles);
mainPager.setAdapter(myPagerAdapter);
tabLayout.setupWithViewPager(mainPager);//将viewPager绑定于tabLayout
要注意的是,viewList的Size和titles的Size一定要是相同的,要不然,后果自己想。
好了,Tab页面就算实现完成了,是不是特别简单呢?