Tablayout+viewpager实现头部导航
虽然已经有很多的博客以及案例可以找到,但是为了提高自己,所以想着养成写博客的习惯。同时也方便自己以后需要的时候可以直接拿来用,下面
进入正题:
首先呢,TabLayout是Android5.0后出的新控件,使用需要导入design包,一般情况下,TabLayout需要和ViewPager搭配使用。使用步骤如下:
先导入支持包compile 'com.android.support:design:23.2.0'
xml布局文件如下
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:background="@color/gray_back_color"
tools:context="com.transfar.app.aip.activity.basiclevelapp.BasicLevelAppActivity">
<include layout="@layout/child_header_layout"/>
<android.support.design.widget.TabLayout
android:id="@+id/tabs"
android:layout_width="match_parent"
android:layout_height="@dimen/margin_70"
android:paddingLeft="@dimen/margin_10"
android:paddingRight="@dimen/margin_10"
android:background="@color/white"
app:tabTextAppearance="@style/TabLayoutTextStyle"
app:tabIndicatorColor="@color/red"
app:tabSelectedTextColor="@color/red"
app:tabTextColor="@color/black"/>
<!--可滑动的布局内容-->
<android.support.v4.view.ViewPager
android:id="@+id/vp_view"
android:layout_marginTop="@dimen/margin_20"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</LinearLayout>
设置tab的字体大小:
<span style="font-size:14px;color:#333333;"><style name="TabLayoutTextStyle">
<item name="android:textSize">@dimen/font_18</item>
</style></span>
关于Tablayout的背景及字体修改可参考博客:http://blog.csdn.net/ming2316780/article/details/51763864 点击打开链接
activity代码如下:
<span style="color:#333333;">@ContentView(R.layout.activity_basic_level_app)
public class BasicLevelAppActivity extends BaseActivity {
@ViewInject(R.id.tabs)
private TabLayout mTabLayout;
@ViewInject(R.id.vp_view)
private ViewPager mViewPager;
private List<String> mTitleList = new ArrayList<>();//页卡标题集合
private BasiclevelFragmentAdapter mAdapter;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
initViewData();
setHeaderTitleVisible(false);
setBackTitle("基层党建");
}
private void initViewData(){
mTitleList.add("本村");
mTitleList.add("公开");
mTabLayout.addTab(mTabLayout.newTab().setText(mTitleList.get(0)));//添加tab选项卡
mTabLayout.addTab(mTabLayout.newTab().setText(mTitleList.get(1)));
mTabLayout.setTabMode(TabLayout.MODE_FIXED);//设置tab模式,当前为系统默认模式
mAdapter = new BasiclevelFragmentAdapter(getFragmentManager(),mTitleList);
mViewPager.setAdapter(mAdapter);//给ViewPager设置适配器
mTabLayout.setupWithViewPager(mViewPager);//将TabLayout和ViewPager关联起来。
mTabLayout.setTabsFromPagerAdapter(mAdapter);//给Tabs设置适配器
mViewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(mTabLayout));
mTabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
@Override
public void onTabSelected(TabLayout.Tab tab) {
mViewPager.setCurrentItem(tab.getPosition());
}
@Override
public void onTabUnselected(TabLayout.Tab tab) {
}
@Override
public void onTabReselected(TabLayout.Tab tab) {
}
});
}
}</span><span style="color:#ff0000;">
</span>
适配器代码如下:
<span style="font-size:14px;color:#333333;">public class BasiclevelFragmentAdapter extends FragmentPagerAdapter {
private List<String> list;
private int nNumOfTabs;
public BasiclevelFragmentAdapter(FragmentManager fm, List<String> list){
super(fm);
this.list = list;
}
@Override
public Fragment getItem(int position) {
switch(position)
{
case 0:
BasicVillageFragment tab1=new BasicVillageFragment();
return tab1;
case 1:
BasicLevelCommonFragment tab2=new BasicLevelCommonFragment();
return tab2;
}
return null;
}
@Override
public int getCount() {
return list.size();
}
@Override
public CharSequence getPageTitle(int position) {
return list.get(position);
}
}</span>
记得重写getpageTitle()方法,设置tab的标题。fragment的代码就不贴上了,就是个listvie,最后贴上图