自Android5.0 Lollipop發(fā)布以來，Material Design在Android App中爆炸性增長，涌現(xiàn)出了一批優(yōu)秀的、擁有Android風(fēng)格的App。今天的主題是使用新的android.support.design包中的TabLayout配合ViewPager以及實(shí)現(xiàn)經(jīng)典的Android風(fēng)格—頂部標(biāo)簽頁。

我將Tab加到了我在做的“ijob” app中，先來看一下最終的效果。

創(chuàng)建布局文件

布局文件沒有什么好說的，比較簡單，注意區(qū)分控件所在的不同support library。還想多啰嗦幾句。(a) 在Android5.0以后可以輕松地給控件設(shè)置陰影效果，android:elevation="8dp"。(b) 如果陰影效果沒有如期顯示，多半是因?yàn)橥浗o控件設(shè)置背景顏色了，其實(shí)只要設(shè)置了背景顏色，陰影效果就出來了。android:background="@android:color/white"

除此之外，為了實(shí)現(xiàn)我們想要的效果，我們可以設(shè)置TabLayout的一些屬性，包括Tab高度、Tab顏色，Tab中Indicator的高度及顏色。

<!--activity_main.xml-->
<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"
    tools:context=".MainActivity">
    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/color_primary"
        android:elevation="8dp"/>
    <android.support.design.widget.TabLayout
        android:id="@+id/tablayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabBackground="@color/color_primary"
        app:tabTextAppearance="@style/MyTabText"
        app:tabIndicatorColor="@android:color/white"
        app:tabIndicatorHeight="3dp"
        android:background="@android:color/white"
        android:elevation="8dp"/>
    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:background="@android:color/white"/>
</LinearLayout>

創(chuàng)建ViewPager適配器

ViewPager的適配器主要是連接TabLayout和將要顯示的多個(gè)Fragment。由于ViewPager是在v4的包中，F(xiàn)ragment在v4和android.app的包中都含有，如果發(fā)生不對(duì)應(yīng)情況，很容易掛掉。所以，在這里羅列出了相關(guān)包的版本建議。

• import android.app.Fragment;
• import android.app.FragmentManager;
• import android.support.v13.app.FragmentPagerAdapter;
• import android.support.v4.view.ViewPager;

// MyFragmentPagerAdapter.java
public class MyFragmentPagerAdapter extends FragmentPagerAdapter {
    private final int PAGE_COUNT = 3;
    private String[] tableTitle = new String[] {"宣講會(huì)", "實(shí)習(xí)", "工作"};
    private Context mContext;
    private List<Fragment> mFragmentTab;
    private SeminarFragment mSeminarFragment;
    private InternFragment mInternFragment;
    private JobFragment mJobFragment;

    public MyFragmentPagerAdapter(FragmentManager fm, Context context) {
        super(fm);
        mContext = context;
        initFragmentTab();
    }

    @Override
    public Fragment getItem(int position) {
        return mFragmentTab.get(position);
    }

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

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

    private void initFragmentTab() {
        mSeminarFragment = new SeminarFragment();
        mInternFragment = new InternFragment();
        mJobFragment = new JobFragment();
        mFragmentTab = new ArrayList<Fragment>();
        mFragmentTab.add(mSeminarFragment);
        mFragmentTab.add(mInternFragment);
        mFragmentTab.add(mJobFragment);
    }
}

設(shè)置TabLayout

最后一步就是在我們的MainActivity中對(duì)TabLayout進(jìn)行設(shè)置，即把TabLayout控件與Adapter雙向關(guān)聯(lián)。

// MainActitity.java
private void initTabLayout() {
    MyFragmentPagerAdapter adapter = new MyFragmentPagerAdapter(getFragmentManager(), this);
    ViewPager viewPager = (ViewPager) findViewById(R.id.viewpager);
    TabLayout tabLayout = (TabLayout) findViewById(R.id.tablayout);
    viewPager.setAdapter(adapter);
    tabLayout.setupWithViewPager(viewPager);
    tabLayout.setTabMode(TabLayout.MODE_FIXED);
    }

引用和鏈接

1. 本文源代碼：https://github.com/onlytjt/AndroidApp-ijob
2. http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2015/0731/3247.html
3. Magerial Design新控件：http://www.jcodecraeer.com/a/anzhuokaifa/developer/2015/0531/2958.html
4. Android兼容包詳解：http://stormzhang.com/android/2015/03/29/android-support-library/

By tjt