Android Material Design系列之Tablayout,Fragment,Viewpager搭配使用

前言

在谷歌发布Android Design Support Library之前，app实现tab布局的实现方法就有很多种，其中有RadioGroup+FrameLayout、TabHost+Fragment、FragmentPagerAdapter+ViewPager等方法，然而，Google在2015的IO大会上，给开发者们带来了全新的Android Design Support Library，里面包含了许多新控件，这些新控件有许多是把以前的一些第三方开源库官方化，实现起来更为简便，简直是开发者的福音。其中的TabLayout控件让我想到了app底部的tab布局，而且TabLayout用法更加简单

效果图

实现

首先在build.gradle中添加：

compile 'com.android.support:appcompat-v7:24.1.1'compile 'com.android.support:design:24.1.1'

然后在主布局文件activity_main.xml中添加布局控件：

<?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"        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:layout_weight="1"        android:background="#ffffff"        /></LinearLayout>

这里说下, TabLayout有个属性是TabMode,有两个值可选,分别是MODE_FIXED和MODE_SCROLLABLE:

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的情况。
并且这个属性可以在xml中定义,也可以在代码中定义,但是代码中定义优先级高一些

之后创建我们的Fragment:

package com.example.hfs.tablayoutdemo;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;/** * Created by HFS on 2016/8/14. */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(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;        textView.setText("Fragment #" + mPage);        return view;    }}

Fragment的布局很简单,就是一个Textview

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

之后就在我们的MainActivity中设置一下就可以运行了

package com.example.hfs.tablayoutdemo;import android.support.design.widget.TabLayout;import android.support.v4.view.ViewPager;import android.support.v7.app.AppCompatActivity;import android.os.Bundle;public class MainActivity extends AppCompatActivity {    private FragmentPagerAdapter pagerAdapter;    private ViewPager viewPager;    private TabLayout tabLayout;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        pagerAdapter = new FragmentPagerAdapter(getSupportFragmentManager(), this);        viewPager = (ViewPager) findViewById(R.id.viewPager);        viewPager.setAdapter(pagerAdapter);        tabLayout = (TabLayout) findViewById(R.id.tabLayout);        tabLayout.setupWithViewPager(viewPager);        tabLayout.setTabMode(TabLayout.MODE_FIXED);    }}

OK基本使用已经实现了,下面是对TabLayout的一些扩展使用

扩展使用

设置 indicator的颜色

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

<style name="MyCustomTabLayout" parent="Widget.Design.TabLayout">    <item name="tabIndicatorColor">#00FF00</item></style>'

之后修改我们的布局

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

我们来运行下,看下效果

当然了,还有其它属性可以修改,像尝试的可以自行去试试

<style name="MyCustomTabLayout" parent="Widget.Design.TabLayout">    <item name="tabMaxWidth">@dimen/tab_max_width</item>    <item name="tabIndicatorColor">?attr/colorAccent</item>    <item name="tabIndicatorHeight">2dp</item>    <item name="tabPaddingStart">12dp</item>    <item name="tabPaddingEnd">12dp</item>    <item name="tabBackground">?attr/selectableItemBackground</item>    <item name="tabTextAppearance">@style/MyCustomTabTextAppearance</item>    <item name="tabSelectedTextColor">?android:textColorPrimary</item></style><style name="MyCustomTabTextAppearance" parent="TextAppearance.Design.Tab">    <item name="android:textSize">14sp</item>    <item name="android:textColor">?android:textColorSecondary</item>    <item name="textAllCaps">true</item></style>

给tab加图标

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

private int[] imageResId = {            R.mipmap.ic_launcher,            R.mipmap.ic_launcher,            R.mipmap.ic_launcher    };// ...@Overridepublic CharSequence getPageTitle(int position) {    //这是没修改之前的返回值    // return tabTitles[position];    Drawable image = context.getResources().getDrawable(imageResId[position]);    image.setBounds(0, 0, image.getIntrinsicWidth(), image.getIntrinsicHeight());    SpannableString sb = new SpannableString(" ");    ImageSpan imageSpan = new ImageSpan(image, ImageSpan.ALIGN_BOTTOM);    sb.setSpan(imageSpan, 0, 1, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);    return sb;}

注意:TabLayout创建的tab默认设置textAllCaps属性为true，这阻止了ImageSpan被渲染出来，所以我们还要通过自定义把这个值给改成false,具体代码是:

<style name="MyCustomTabLayout" parent="Widget.Design.TabLayout">        <item name="tabIndicatorColor">#00FF00</item>        <item name="tabTextAppearance">@style/MyCustomTextAppearance</item>    </style>'    <style name="MyCustomTextAppearance" parent="TextAppearance.Design.Tab">        <item name="textAllCaps">false</item>    </style>

现在运行，效果就出来了

给tab添加icon和text

首先我们的修改getPageTitle(int position)这个方法

@Overridepublic CharSequence getPageTitle(int position) {         //第一次的代码        //return tabTitles[position];        //第二次的代码       /**         Drawable image = context.getResources().getDrawable(imageResId[position]);        image.setBounds(0, 0, image.getIntrinsicWidth(), image.getIntrinsicHeight());        SpannableString sb = new SpannableString(" " + tabTitles[position]);        ImageSpan imageSpan = new ImageSpan(image, ImageSpan.ALIGN_BOTTOM);        sb.setSpan(imageSpan, 0, 1, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);        return sb;*/        //第三次代码        return null;}

因为我们要显示的是一个图片加一行文字,所以我们自定义一个布局,里面含有一个ImageView和一个TextView

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="wrap_content"    android:layout_height="wrap_content"    >    <ImageView        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:id="@+id/imageView"        android:layout_centerVertical="true"        />    <TextView        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_toRightOf="@id/imageView"        android:layout_centerVertical="true"        android:id="@+id/textView"        android:layout_marginLeft="3dp"        /></RelativeLayout>

之后我们在我们的适配器中添加一个方法

 public View addTabView(int position){        View view = LayoutInflater.from(context).inflate(R.layout.tab_item, null);        TextView tv= (TextView) view.findViewById(R.id.textView);        tv.setText(tabTitles[position]);        ImageView img = (ImageView) view.findViewById(R.id.imageView);        img.setImageResource(imageResId[position]);        return view;    }

好了去我们的MainActivity中

@Override   protected void onCreate(Bundle savedInstanceState) {       super.onCreate(savedInstanceState);       setContentView(R.layout.activity_third);       pagerAdapter = new SimpleFragmentPagerAdapter(getSupportFragmentManager(), this);       viewPager = (ViewPager) findViewById(R.id.viewpager);       viewPager.setAdapter(pagerAdapter);       tabLayout = (TabLayout) findViewById(R.id.sliding_tabs);       tabLayout.setupWithViewPager(viewPager);       tabLayout.setTabMode(TabLayout.MODE_FIXED);       for (int i = 0; i < tabLayout.getTabCount(); i++) {           TabLayout.Tab tab = tabLayout.getTabAt(i);           tab.setCustomView(pagerAdapter.getTabView(i));       }   }

好了运行看下效果

项目地址