android design library提供的TabLayout的用法

原文出处：http://chenfuduo.me/2015/07/30/TabLayout-of-design-support-library/ 

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

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

效果图

<iframe id="aswift_0" style="box-sizing: border-box; border-width: 0px; border-style: initial; margin: 0px; padding: 0px; left: 0px; position: absolute; top: 0px;" name="aswift_0" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" width="728" height="90"></iframe>

 

创建布局

 

1. <?xml version="1.0" encoding="utf-8"?>
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
3.     xmlns:app="http://schemas.android.com/apk/res-auto"
4.     android:layout_width="match_parent"
5.     android:layout_height="match_parent"
6.     android:orientation="vertical">
7.  
8.  
9.     <!--app:tabMode="scrollable"  这个属性我在代码中设置了-->
10.    <!-- tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);-->
11.     <android.support.design.widget.TabLayout
12.         android:id="@+id/sliding_tabs"
13.         android:layout_width="match_parent"
14.         android:layout_height="wrap_content"
15.          />
16.  
17.     <android.support.v4.view.ViewPager
18.         android:id="@+id/viewpager"
19.         android:layout_width="match_parent"
20.         android:layout_height="0px"
21.         android:layout_weight="1"
22.         android:background="@android:color/white" />
23.  
24. </LinearLayout>
25.  
26. 在xml添加TabLayout，如同ViewPager，直接`android.support.design.widget.TabLayout`即可。还有其他的属性我会在代码中设置。

 

创建Fragment

 

1. package me.chenfuduo.myfragmentdemo.fragment;
2.  
3. import android.os.Bundle;
4. import android.support.annotation.Nullable;
5. import android.support.v4.app.Fragment;
6. import android.view.LayoutInflater;
7. import android.view.View;
8. import android.view.ViewGroup;
9. import android.widget.TextView;
10.  
11. import me.chenfuduo.myfragmentdemo.R;
12.  
13. /**
14.  * Created by Administrator on 2015/7/30.
15.  */
16. public class PageFragment extends Fragment {
17.  
18.     public static final String ARG_PAGE = "ARG_PAGE";
19.     private int mPage;
20.  
21.     public static PageFragment newInstance(int page) {
22.         Bundle args = new Bundle();
23.         args.putInt(ARG_PAGE, page);
24.         PageFragment pageFragment = new PageFragment();
25.         pageFragment.setArguments(args);
26.         return pageFragment;
27.     }
28.  
29.     @Override
30.     public void onCreate(Bundle savedInstanceState) {
31.         super.onCreate(savedInstanceState);
32.         mPage = getArguments().getInt(ARG_PAGE);
33.     }
34.  
35.     @Nullable
36.     @Override
37.     public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
38.         View view = inflater.inflate(R.layout.fragment_page, container, false);
39.         TextView textView = (TextView) view;
40.         textView.setText("Fragment #" + mPage);
41.         return view;
42.     }
43.  
44. }

 

其中Fragment的布局为：

 

1. <?xml version="1.0" encoding="utf-8"?>
2. <TextView xmlns:android="http://schemas.android.com/apk/res/android"
3.     android:layout_width="match_parent"
4.     android:layout_height="match_parent"
5.     android:gravity="center" />

 

 

ViewPager的适配器

 

1. package me.chenfuduo.myfragmentdemo.adapter;
2.  
3. import android.content.Context;
4. import android.support.v4.app.Fragment;
5. import android.support.v4.app.FragmentManager;
6. import android.support.v4.app.FragmentPagerAdapter;
7.  
8. import me.chenfuduo.myfragmentdemo.fragment.PageFragment;
9.  
10. /**
11.  * Created by Administrator on 2015/7/30.
12.  */
13. public class SimpleFragmentPagerAdapter extends FragmentPagerAdapter {
14.  
15.     final int PAGE_COUNT = 3;
16.     private String tabTitles[] = new String[]{"tab1","tab2","tab3"};
17.     private Context context;
18.  
19.     public SimpleFragmentPagerAdapter(FragmentManager fm,Context context) {
20.         super(fm);
21.         this.context = context;
22.     }
23.  
24.     @Override
25.     public Fragment getItem(int position) {
26.         return PageFragment.newInstance(position + 1);
27.     }
28.  
29.     @Override
30.     public int getCount() {
31.         return PAGE_COUNT;
32.     }
33.  
34.     @Override
35.     public CharSequence getPageTitle(int position) {
36.         return tabTitles[position];
37.     }
38. }

 

设置TabLayout

 

1. package me.chenfuduo.myfragmentdemo;
2.  
3. import android.os.Bundle;
4. import android.support.design.widget.TabLayout;
5. import android.support.v4.app.FragmentActivity;
6. import android.support.v4.view.ViewPager;
7. import android.view.Menu;
8. import android.view.MenuItem;
9.  
10. import me.chenfuduo.myfragmentdemo.adapter.SimpleFragmentPagerAdapter;
11.  
12. public class ThirdActivity extends FragmentActivity {
13.  
14.     private SimpleFragmentPagerAdapter pagerAdapter;
15.  
16.     private ViewPager viewPager;
17.  
18.     private TabLayout tabLayout;
19.  
20.     @Override
21.     protected void onCreate(Bundle savedInstanceState) {
22.         super.onCreate(savedInstanceState);
23.         setContentView(R.layout.activity_third);
24.         pagerAdapter = new SimpleFragmentPagerAdapter(getSupportFragmentManager(), this);
25.         viewPager = (ViewPager) findViewById(R.id.viewpager);
26.         viewPager.setAdapter(pagerAdapter);
27.         tabLayout = (TabLayout) findViewById(R.id.sliding_tabs);
28.         tabLayout.setupWithViewPager(viewPager);
29.         tabLayout.setTabMode(TabLayout.MODE_FIXED);
30.     }
31. }

 

这里提几点我遇到的问题

• tabLayout.setTabMode(TabLayout.MODE_FIXED);

开始我设置的是：

 

1. tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);

 

 

运行后，三个TabLayout标签挤到一块去了。如下：

查看api，找到结果了。这个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_SCROLLABLE适合很多tabs的情况。

• setupWithViewPager必须在ViewPager.setAdapter()之后调用

查看下源码就知道了：

 

1. public void setupWithViewPager(ViewPager viewPager) {
2.     PagerAdapter adapter = viewPager.getAdapter();
3.     if(adapter == null) {
4.         throw new IllegalArgumentException("ViewPager does not have a PagerAdapter set");
5.     } else {
6.         ...
7.     }
8. }

 

 

以上就是最基本的用法，是不是很简单。哈~

定义TabLayout的样式

默认的情况下，TabLayout的tab indicator的颜色是Material Design中的accent color(#009688)，我们可以稍作修改：

 

1. <style name="MyCustomTabLayout" parent="Widget.Design.TabLayout">
2.     <item name="tabIndicatorColor">#0000FF</item>
3. </style>

 

 

在布局中使用：

 

1. <android.support.design.widget.TabLayout
2.        android:id="@+id/sliding_tabs"
3.        style="@style/MyCustomTabLayout"
4.        android:layout_width="match_parent"
5.        android:layout_height="wrap_content"
6.         />

 

 

还有一些其他的样式可供选择：

 

1. <style name="MyCustomTabLayout" parent="Widget.Design.TabLayout">
2.     <item name="tabMaxWidth">@dimen/tab_max_width</item>
3.     <item name="tabIndicatorColor">?attr/colorAccent</item>
4.     <item name="tabIndicatorHeight">2dp</item>
5.     <item name="tabPaddingStart">12dp</item>
6.     <item name="tabPaddingEnd">12dp</item>
7.     <item name="tabBackground">?attr/selectableItemBackground</item>
8.     <item name="tabTextAppearance">@style/MyCustomTabTextAppearance</item>
9.     <item name="tabSelectedTextColor">?android:textColorPrimary</item>
10. </style>
11. <style name="MyCustomTabTextAppearance" parent="TextAppearance.Design.Tab">
12.     <item name="android:textSize">14sp</item>
13.     <item name="android:textColor">?android:textColorSecondary</item>
14.     <item name="textAllCaps">true</item>
15. </style>

 

 

添加icon到tab

当前的TabLayout没有方法让我们去添加icon，我们可以使用SpannableString结合ImageSpan来实现，在SimpleFragmentPagerAdapter中：

 

1. private int[] imageResId = {
2.         R.drawable.ic_one,
3.         R.drawable.ic_two,
4.         R.drawable.ic_three
5. };
6.  
7. // ...
8.  
9. @Override
10. public CharSequence getPageTitle(int position) {
11.     // Generate title based on item position
12.     // return tabTitles[position];
13.     Drawable image = context.getResources().getDrawable(imageResId[position]);
14.     image.setBounds(0, 0, image.getIntrinsicWidth(), image.getIntrinsicHeight());
15.     SpannableString sb = new SpannableString(" ");
16.     ImageSpan imageSpan = new ImageSpan(image, ImageSpan.ALIGN_BOTTOM);
17.     sb.setSpan(imageSpan, 0, 1, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
18.     return sb;
19. }

 

 

运行，发现没有显示，这是因为TabLayout创建的tab默认设置textAllCaps属性为true，这阻止了ImageSpan被渲染出来，可以通过下面的样式文件定义来改变：

 

1. <style name="MyCustomTabLayout" parent="Widget.Design.TabLayout">
2.       <item name="tabTextAppearance">@style/MyCustomTextAppearance</item>
3. </style>
4.  
5. <style name="MyCustomTextAppearance" parent="TextAppearance.Design.Tab">
6.       <item name="textAllCaps">false</item>
7. </style>

 

 

现在运行，效果就出来了。

添加icon和text到tab

 

1. @Override
2. public CharSequence getPageTitle(int position) {
3.     // Generate title based on item position
4.     Drawable image = context.getResources().getDrawable(imageResId[position]);
5.     image.setBounds(0, 0, image.getIntrinsicWidth(), image.getIntrinsicHeight());
6.     // Replace blank spaces with image icon
7.     SpannableString sb = new SpannableString("   " + tabTitles[position]);
8.     ImageSpan imageSpan = new ImageSpan(image, ImageSpan.ALIGN_BOTTOM);
9.     sb.setSpan(imageSpan, 0, 1, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
10.     return sb;
11. }

 

我们看到在实例化SpannableString的时候，我在tabTitles[position]前面加了几个空格，这些空格的位置是用来放置icon的。

添加自定义的view到tab

适配器中增加getTabView(...)方法：

 

1. package me.chenfuduo.myfragmentdemo.adapter;
2.  
3. import android.content.Context;
4. import android.support.v4.app.Fragment;
5. import android.support.v4.app.FragmentManager;
6. import android.support.v4.app.FragmentPagerAdapter;
7. import android.view.LayoutInflater;
8. import android.view.View;
9. import android.widget.ImageView;
10. import android.widget.TextView;
11.  
12. import me.chenfuduo.myfragmentdemo.R;
13. import me.chenfuduo.myfragmentdemo.fragment.PageFragment;
14.  
15. /**
16.  * Created by Administrator on 2015/7/30.
17.  */
18. public class SimpleFragmentPagerAdapter extends FragmentPagerAdapter {
19.  
20.     final int PAGE_COUNT = 3;
21.     private String tabTitles[] = new String[]{"tab1", "tab2", "tab3"};
22.     private int[] imageResId = {R.drawable.avatar_enterprise_vip,
23.             R.drawable.avatar_grassroot,
24.             R.drawable.avatar_vip};
25.     private Context context;
26.  
27.     public SimpleFragmentPagerAdapter(FragmentManager fm, Context context) {
28.         super(fm);
29.         this.context = context;
30.     }
31.  
32.     @Override
33.     public Fragment getItem(int position) {
34.         return PageFragment.newInstance(position + 1);
35.     }
36.  
37.     @Override
38.     public int getCount() {
39.         return PAGE_COUNT;
40.     }
41.  
42.     @Override
43.     public CharSequence getPageTitle(int position) {
44.         //第一次的代码
45.         //return tabTitles[position];
46.         //第二次的代码
47.        /**
48.          Drawable image = context.getResources().getDrawable(imageResId[position]);
49.         image.setBounds(0, 0, image.getIntrinsicWidth(), image.getIntrinsicHeight());
50.         SpannableString sb = new SpannableString(" " + tabTitles[position]);
51.         ImageSpan imageSpan = new ImageSpan(image, ImageSpan.ALIGN_BOTTOM);
52.         sb.setSpan(imageSpan, 0, 1, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
53.         return sb;*/
54.  
55.  
56.         return null;
57.     }
58.     public View getTabView(int position){
59.         View view = LayoutInflater.from(context).inflate(R.layout.tab_item, null);
60.         TextView tv= (TextView) view.findViewById(R.id.textView);
61.         tv.setText(tabTitles[position]);
62.         ImageView img = (ImageView) view.findViewById(R.id.imageView);
63.         img.setImageResource(imageResId[position]);
64.         return view;
65.     }
66.  
67. }

 

 

简单的布局：

 

1. <?xml version="1.0" encoding="utf-8"?>
2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
3.     android:layout_width="wrap_content"
4.     android:layout_height="wrap_content"
5.     >
6.  
7.     <ImageView
8.         android:layout_width="wrap_content"
9.         android:layout_height="wrap_content"
10.         android:id="@+id/imageView"
11.         android:layout_centerVertical="true"
12.         />
13.  
14.     <TextView
15.         android:layout_width="wrap_content"
16.         android:layout_height="wrap_content"
17.         android:layout_toRightOf="@id/imageView"
18.         android:layout_centerVertical="true"
19.         android:id="@+id/textView"
20.         android:layout_marginLeft="3dp"
21.         />
22.  
23. </RelativeLayout>

 

 

使用：

 

1. @Override
2.    protected void onCreate(Bundle savedInstanceState) {
3.        super.onCreate(savedInstanceState);
4.        setContentView(R.layout.activity_third);
5.        pagerAdapter = new SimpleFragmentPagerAdapter(getSupportFragmentManager(), this);
6.        viewPager = (ViewPager) findViewById(R.id.viewpager);
7.        viewPager.setAdapter(pagerAdapter);
8.        tabLayout = (TabLayout) findViewById(R.id.sliding_tabs);
9.        tabLayout.setupWithViewPager(viewPager);
10.        tabLayout.setTabMode(TabLayout.MODE_FIXED);
11.        for (int i = 0; i < tabLayout.getTabCount(); i++) {
12.            TabLayout.Tab tab = tabLayout.getTabAt(i);
13.            tab.setCustomView(pagerAdapter.getTabView(i));
14.        }
15.    }

 

 

处理配置改变

当屏幕旋转或者配置改变的时候，我们需要保存当前的状态。

 

1. @Override
2.    public void onSaveInstanceState(Bundle outState) {
3.        super.onSaveInstanceState(outState);
4.        outState.putInt(POSITION,tabLayout.getSelectedTabPosition());
5.    }
6.  
7.    @Override
8.    protected void onRestoreInstanceState(Bundle savedInstanceState) {
9.        super.onRestoreInstanceState(savedInstanceState);
10.        viewPager.setCurrentItem(savedInstanceState.getInt(POSITION));
11.    }

 

 

需要注意的是getSelectedTabPosition()方法是最新的design support library才有的。
最后的效果如下：