使用TabLayout实现Google Play风格的Tabs

使用TabLayout实现Google Play风格的Tabs

Tabs最好的实现方法就是用ViewPager和一个自定义的tab导航。这篇教程中，我们使用Google新推出的TabLayout(包含在针对Android “M”的support design library中)。

对于Android “M”以前的版本，最容易实现tabs with fragments的方式就是使用ActionBar Tabs(可以在 ActionBar Tabs with Fragments中了解)。但是，与ActionBar的导航模式有关的全部方法(例如setNavigationMode(), addTab(), selectTab())都已经不被推荐使用了。

Design Support Library

为了实现Google Play风格的Tabs，请首先确保follow了Design Support Library setup instructions。

Sliding Tabs Layout

使用android.support.design.widget.TabLayout，用来展示不同的tab选项。使用android.support.v4.view.ViewPager，用来在我们将创建的不同的fragments中翻页。

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

    <android.support.design.widget.TabLayout
        android:id="@+id/sliding_tabs"
        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="0px"
        android:layout_weight="1"
        android:background="@android:color/white" />

</LinearLayout>

Create Fragment

既然已经在layout中创建了ViewPager和tabs，我们应该开始定义每个tab中的内容了。Tabs就是标示将要展示的fragment的内容，所以我们需要创建和定义将要展示的fragment。根据你自己的需要，你应该有一个或多个fragment在你的应用中。

在res/layout/fragment_page.xml中定义在选中不同tab时要展示的fragment的layout：

<?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" />

在PageFragment.java中定义fragment的逻辑：

// In this case, the fragment displays simple text based on the page
public class PageFragment extends Fragment {

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

    //newInstance constructor for creating fragment with arguments
    public static PageFragment newInstance(int page) {
        Bundle args = new Bundle();
        args.putInt(ARG_PAGE, page);
        PageFragment fragment = new PageFragment();
        fragment.setArguments(args);
        return fragment;
    }

    //Store instance variables based on arguments passed
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        mPage = getArguments().getInt(ARG_PAGE);
    }

    //Inflate the view for the fragment based on layout XML
    @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;
    }
}

Implement FragmentPagerAdapter

接下来就要实现ViewPager的适配器，它控制了tabs的顺序、标题和内容。最重要的两个方法是getPageTitle(int position)(用来得到每个tab的标题)和getItem(int position)(用来决定每个tab的fragment)。

public class MainActivity extends AppCompatActivity {

    //...

    public class SampleFragmentPagerAdapter extends FragmentPagerAdapter {
        final int PAGE_COUNT = 3;
        private String tabTitles[] = new String[] { "Tab1", "Tab2", "Tab3" };
        private Context context;

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

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

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

        @Override
        public CharSequence getPageTitle(int position) {
            // Generate title based on item position
            return tabTitles[position];
        }
    }
}

Setup Sliding Tabs

最后，我们要关联ViewPager和SampleFragmentPagerAdapter，然后配置tabs用以下两个步骤:

• 在activity中的onCreate()方法中连接ViewPager和adapter。
• 为了关联pager和tabs，在TabLayout中设置ViewPager。

public class MainActivity extends AppCompatActivity {

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

        // Get the ViewPager and set it's PagerAdapter so that it can display items
        ViewPager viewPager = (ViewPager) findViewById(R.id.viewpager);
        viewPager.setAdapter(new SampleFragmentPagerAdapter(getSupportFragmentManager(), 
            MainActivity.this));

        // Give the TabLayout the ViewPager
        TabLayout tabLayout = (TabLayout) findViewById(R.id.sliding_tabs);
        tabLayout.setupWithViewPager(viewPager);
    }

}

下面是运行示例:

Styling the TabLayout

通常，tab导航的颜色是Material Design主题的accent color。我们能在styles.xml中自定义一个style，然后将它应用到你的TabLayout:

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

将这个style应用到你的TabLayot:

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

其他的style也能配置到TabLayout:

<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>

Add Icons to TabLayout

目前，TabLayout并没有提供一个清晰的抽象模型用来在tab中增加icon。下面贴出的代码，one of which is to return a SpannableString, containing your icon in an ImageSpan, from your PagerAdapter’s getPageTitle(position) method as shown in the code snippet below:

private int[] imageResId = {
        R.drawable.ic_one,
        R.drawable.ic_two,
        R.drawable.ic_three
};

// ...

@Override
public CharSequence getPageTitle(int position) {
    // Generate title based on item position
    // return tabTitles[position];

    // getDrawable(int i) is deprecated, use getDrawable(int i, Theme theme) for min SDK >=21
    // or ContextCompat.getDrawable(Context context, int id) if you want support for older versions.
    // Drawable image = context.getResources().getDrawable(iconIds[position], context.getTheme());
    // Drawable image = context.getResources().getDrawable(imageResId[position]);

    Drawable image = ContextCompat.getDrawable(context, 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,我们能通过改变tabTextAppearance属性将textAllCaps设为false。

<style name="MyCustomTabLayout" parent="Widget.Design.TabLayout">
      <item name="tabTextAppearance">@style/MyCustomTextAppearance</item>
</style>

<style name="MyCustomTextAppearance" parent="TextAppearance.Design.Tab">
      <item name="textAllCaps">false</item>
</style>

下面是运行示例:

Add Icons+Text to TabLayout

我们使用SpannableString在TabLayout中加入了icon，通过SpannableString在icon旁加上text也很容易。

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

空白空间用来放image icon，这样真正的title就能展示完全。你能在setSpan()中设定span的range start…end，这决定了你想放icon的位置。

下面是运行示例: