Android5.0新元件TabLayout+ViewPager實現Tab頁面
阿新 • • 發佈:2019-01-22
本來算是個雞肋的東西,但是design相容包釋出之後情況就大不一樣了。
下面看程式碼:
首先在gradle中新增依賴
值得一提的是,design包整合了v4和v7的包,所以新增之後就不需要再新增v4和v7。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') }
然後就是在Activity或者Fragment中新增TabLayout和ViewPager
tabGravity和tabMode能讓你的Tab變的更加豐富<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" />
下面建立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頁面就算實現完成了,是不是特別簡單呢?