前言
上周的那篇一个案例教你简单地玩转ViewPager(一)之带指示点的引导页挖了一个关于学习ViewPager的坑,这周肯定要来填一下这个坑啦。这个系列坑完全是写在同一个Demo中的,所以需要用到的还是希望从第一篇看起,放心,代码还是相当容易的。
ps:不知道大家有没有看过我之前写的那篇文章RadioButton+Fragment实现底部导航栏,没错,这次我还是用这样布局来写Demo的,所以到时Fragment会比较多,大家区分好。(这次效果就是在一个Fragment上再增加3个可滑动的Fragment,哈!)看代码吧!
嗯嗯,这次带来的是ViewPager+TabLayout+Fragment顶部标签界面滑动,效果如下:
界面滑动
Talk is cheap,show u the code
- 添加上TabLayout的依赖
compile 'com.android.support:design:23.4.0'
compile 'com.android.support:support-v4:23.4.0'
- 布局
<android.support.design.widget.TabLayout
android:id="@+id/mTabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
</android.support.design.widget.TabLayout>
<android.support.v4.view.ViewPager
android:id="@+id/mViewPager1"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
</android.support.v4.view.ViewPager>
- Fragment1上的代码(ps:Fragment1中包含了3个VPFragment滑动页面)
private ViewPager mViewPager1;
private TabLayout mTabLayout;
private String[] tabTitle = {"第一页面","第二页面","第三页面"};//每个页面顶部标签的名字
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
View rootView = inflater.inflate(R.layout.fragment1_layout, container, false);
initViews(rootView);
initData();
return rootView;
}
private void initViews(View rootView) {
mViewPager1 = (ViewPager) rootView.findViewById(R.id.mViewPager1);
mTabLayout = (TabLayout) rootView.findViewById(R.id.mTabLayout);
}
private void initData() {
for (int i=0; i<tabTitle.length; i++) {
mTabLayout.addTab(mTabLayout.newTab().setText(tabTitle[i]));
}
mTabLayout.setTabGravity(TabLayout.GRAVITY_FILL);
//设置顶部标签指示条的颜色和选中页面时标签字体颜色
mTabLayout.setSelectedTabIndicatorColor(Color.parseColor("#7CCD7C"));
mTabLayout.setTabTextColors(Color.GRAY,Color.parseColor("#FF4081"));
//这里注意的是,因为我是在fragment中创建MyFragmentStatePagerAdapter,所以要传getChildFragmentManager()
mViewPager1.setAdapter(new MyFragmentStatePagerAdapter(getChildFragmentManager(),tabTitle));
//在设置viewpager页面滑动监听时,创建TabLayout的滑动监听
mViewPager1.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(mTabLayout));
mTabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
@Override
public void onTabSelected(TabLayout.Tab tab) {
//在选中的顶部标签时,为viewpager设置currentitem
mViewPager1.setCurrentItem(tab.getPosition());
}
@Override
public void onTabUnselected(TabLayout.Tab tab) {
}
@Override
public void onTabReselected(TabLayout.Tab tab) {
}
});
}
因为是结合Fragment一起使用,所以这次要用到的适配器就是FragmentStatePagerAdapter,使用起来也是比较简单的,如下:
private String[] tabTilte;
public MyFragmentStatePagerAdapter(FragmentManager fm, String[] tabTitle) {
super(fm);
this.tabTilte = tabTitle;
}
@Override
public Fragment getItem(int position) {
switch (position) {
case 0:
return new VPFragment1();//第一页面的fragment
case 1:
return new VPFragment2();//第二页面的fragment
case 2:
return new VPFragment3();//第三页面的fragment
}
return null;
}
@Override
public int getCount() {
return tabTilte.length;
}
源码下载
喜欢的可以点点Star哦!
待续
请关注,下一篇,一个案例教你简单地玩转ViewPager(三)之带指示点的图片自动轮播效果
最后
小弟不才,还望多多指教!