Android5.0新组件TabLayout+ViewPager实现Tab页面

来源：互联网发布：dota2 mac怎么全屏编辑：程序博客网时间：2024/04/30 06:20

本来算是个鸡肋的东西，但是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页面就算实现完成了，是不是特别简单呢？

1 0