TextVersion_04_TabLayout结合ViewPager
TabLayout结合ViewPager
现在页签结合页面的模式非常常见
以前我们都是用RadioGroup结合Fragment
非常多的代码,非常的麻烦
现在有了Design Library
里面有TabLayout,
结合一下ViewPager
啪啦啪啦一下子就解决了
看看代码
1.首先依然是关联一下Design依赖包
点击右上角Project Structure
点击app,点击dependencies
添加一个design包
com.android.support:design:23.3.0
2.在布局文件中创建一下
一个TabLayout
<android.support.design.widget.TabLayout
android:id="@+id/tablayout_main"
android:layout_width="match_parent"
android:layout_height="wrap_content"></android.support.design.widget.TabLayout>
和一个ViewPager
<android.support.v4.view.ViewPager
android:id="@+id/viewpager_main"
android:layout_width="match_parent"
android:layout_height="match_parent"></android.support.v4.view.ViewPager>
3.初始化出来,这步我都不想写
mTabLayout = (TabLayout) findViewById(R.id.tablayout_main);
mViewPager = (ViewPager) findViewById(R.id.viewpager_main);
4.TabLayout添加页签
mTabLayout.addTab(mTabLayout.newTab().setText("页签0"));
mTabLayout.addTab(mTabLayout.newTab().setText("页签1"));
mTabLayout.addTab(mTabLayout.newTab().setText("页签2"));
5.初始化数据
我们要给ViewPager设置数据
我们就给ViewPager里面添加Fragment,
那么肯定需要一个List
还有自定义Fragment类,然后还要给Fragment设置xml布局文件
public class MyFragment extends Fragment{}
注意这里Fragment肯定要是v4包下的
mList.add(new MyFragment());
这里没什么好说的,简单吧
6.ViewPager设置适配器
mViewPager.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager()) {
@Override
public Fragment getItem(int position) {
return mList.get(position);
}
@Override
public int getCount() {
return mList.size();
}
});
FragmentPagerAdapter要实现getItem和getCount两个方法
还有就是这里要给一个getSupportFragmentManager()
7.TabLayout结合ViewPager
这里我们使用一个方法
mTabLayout.setupWithViewPager(mViewPager);
但是运行之后,我们发现,
TabLayout的文字没有了,
我们来看看setupWithViewPager这个方法的源码
我们发现里面有一个
setPagerAdapter方法
进去看看,里面有一个
populateFromPagerAdapter方法
再进去,里面有一个
removeAllTabs方法
OK,原来setupWithViewPager这个方法
移除了所有的Tab
如何解决
我们在setAdapter方法里面再重写一个方法
@Override
public CharSequence getPageTitle(int position) {
return "页签"+position;
}
这样就实现了动态的设置页签的title
我们还可以给页签加点属性
app:tabSelectedTextColor="#ff0000"
就是点击时候的颜色
app:tabIndicatorHeight="5dp"
就是下面那条东西的高度
app:tabIndicatiorColor="#00ff00"
下面那条东西的颜色
app:tabBackground="#0000ff"
就是背景了