Android Design Library(一)提供的TabLayout的用法

在开发中，我们常常需要ViewPager结合Fragment一起使用，如下图：



我们可以使用三方开源的PagerSlidingTabStrip去实现，或者viewpagerindicator，我一般都偏向前者。现在我们可以使用Design support library库的TabLayout去实现了。

下面就说一下使用Design support library库的TabLayout怎样来实现上图的效果：

首先要在build.gradl的

dependencies里加入compile 'com.android.support:design:25.3.0'（注意版本号要对应，否则会报错）

创建布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical">

<android.support.design.widget.TabLayout
android:id="@+id/tabLayout"
style="@style/MyCustomTabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabMode="scrollable"/>

<android.support.v4.view.ViewPager
android:id="@+id/viewPager"
android:layout_width="match_parent"
android:layout_height="0dp"
android<
13746
span style="color:#0000ff;font-weight:bold;">:layout_weight="1"/>

</LinearLayout>

创建Fragment

package com.test.wjy.statusbartest.materialdesign;

import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

import com.test.wjy.statusbartest.R;

/**
* Created by WJY on 2017/5/2.
*/

public class PageFragment extends Fragment {

public static final String ARG_PAGE = "arg_page";
private int mPage;

public static PageFragment newInstance(int page){
Bundle args = new Bundle();
args.putInt(ARG_PAGE,page);
PageFragment pageFragment = new PageFragment();
pageFragment.setArguments(args);
return pageFragment;
}

@Override
public void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
mPage = getArguments().getInt(ARG_PAGE);
}

@Nullable
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.fragment_page, container, false);
TextView textView = (TextView) view.findViewById(R.id.tv_fragPage);
TextView tv_name = (TextView) view.findViewById(R.id.tv_name);
if (mPage == 1 || mPage == 3 || mPage == 5){
tv_name.setVisibility(View.GONE);
}else {
tv_name.setVisibility(View.VISIBLE);
}
textView.setText("第"+mPage+"页");
tv_name.setText("我是第"+mPage+"页");
return view;
}
}

其中Fragment的布局为：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">

<TextView
android:id="@+id/tv_fragPage"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"/>
<TextView
android:id="@+id/tv_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"/>

</LinearLayout>

ViewPager的适配器

package com.test.wjy.statusbartest.materialdesign;

import android.content.Context;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;

/**
* Created by wjy on 2017/5/2.
*/

public class PageFragmentAdapter extends FragmentPagerAdapter {

final int PAGE_COUNT = 7;
private String tabTitles[] = new String[]{"table1","table2","table3","table4","table5","table6","table7"};
private Context context;

public PageFragmentAdapter(FragmentManager fm,Context context) {
super(fm);
this.context = context;
}

@Override
public Fragment getItem(int position) {
return PageFragment.newInstance(position+1);
}

@Override
public int getCount() {
return PAGE_COUNT;
}

@Override
public CharSequence getPageTitle(int position) {
return tabTitles[position];
}
}

设置TabLayout的Activity

package com.test.wjy.statusbartest.materialdesign;

import android.os.Bundle;
import android.support.design.widget.TabLayout;
import android.support.v4.app.FragmentActivity;
import android.support.v4.view.ViewPager;

import com.test.wjy.statusbartest.R;

/**
* Created by wjy on 2017/5/2.
*/

public class TabLayoutTestActivity extends FragmentActivity {

private PageFragmentAdapter adapter;
private ViewPager viewPager;
private TabLayout tabLayout;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_tablayout);

initView();
}

private void initView() {
viewPager = (ViewPager) findViewById(R.id.viewPager);
tabLayout = (TabLayout) findViewById(R.id.tabLayout);
adapter = new PageFragmentAdapter(getSupportFragmentManager(),this);
viewPager.setAdapter(adapter);
tabLayout.setupWithViewPager(viewPager);//setupWithViewPager必须在ViewPager.setAdapter()之后调用
tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);
}
}

这样使用Design support library库的TabLayout就可以实现上图的效果图了，是不是很简单
下面再给大家简单的扩展两个问题

1、定义TabLayout的样式

在values的styles.xml里设置样式，下面以个人的理解已做了部分注释，根据个人需求自己更改相应内容

<style name="MyCustomTabLayout" parent="Widget.Design.TabLayout">
<!-- 设置tab的最大宽度 -->
<item name="tabMaxWidth">400dp</item>
<!-- 设置tab的底部滑动条的颜色 -->
<item name="tabIndicatorColor">@color/green</item>
<item name="tabIndicatorHeight">2dp</item>
<item name="tabPaddingStart">12dp</item>
<item name="tabPaddingEnd">12dp</item>
<!-- 设置tab的背景颜色 -->
<item name="tabBackground">@color/colorAccent</item>
<!-- 设置tab上文字的样式 -->
<item name="tabTextAppearance">@style/MyCustomTabTextAppearance</item>
<!-- 设置tab华东时候的选中文字的颜色 -->
<item name="tabSelectedTextColor">@color/white</item>
</style>
<style name="MyCustomTabTextAppearance" parent="TextAppearance.Design.Tab">
<item name="android:textSize">14sp</item>
<item name="android:textColor">@color/black</item>
<item name="textAllCaps">true</item>
</style>

在布局文件里面使用此样式

<android.support.design.widget.TabLayout
android:id="@+id/tabLayout"
style="@style/MyCustomTabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabMode="scrollable"/>

2、tabMode的两个属性

MODE_FIXED:Fixed tabs display all tabs concurrently and are best used with content that benefits from quick pivots between tabs.

MODE_SCROLLABLE:Scrollable tabs display a subset of tabs at any given moment, and can contain longer tab labels and a larger number of tabs.

MODE_FIXED是个不较少的tabs的情况，均匀分配在屏幕里面。

MODE_SCROLLABLE适合很多tabs的情况，来左右滑动。