Android擴展UI組件---SlideTabLayout

Google官方推出了許多擴展的UI公共組件庫，在這里，我們介紹一個比較實用的組件SlidingTabLayout,效果圖如下:

另外網易新聞的欄目展示用的也是類似的組件。

用法

首先將該組件的源代碼拷貝到你的項目中，SlidingTabLayout.java和SlidingTabStrip.java，項目地址。

接下來就可以在MainActivity里面進行布局了:

<?xml version="1.0" encoding="utf-8"?>
    <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"
        android:orientation="vertical"
        tools:context=".MainActivity">

        <com.fyales.slidetablayout.SlidingTabLayout
            android:id="@+id/sliding_tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />

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

然后，寫一個基本的Fragment，用于展示:

package com.fyales.slidetablayout;

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

    /**
     * @author fyales
     */
    public class BaseFragment extends Fragment {
        private static final String DATA = "data";

        @Override
        public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
            View view = inflater.inflate(R.layout.fragment,container,false);
            TextView textView = (TextView)view.findViewById(R.id.text);
            textView.setText("Fragment#" + getArguments().getInt(DATA,0));
            return textView;
        }

        @Override
        public void onViewCreated(View view, Bundle savedInstanceState) {
            super.onViewCreated(view, savedInstanceState);
        }

        public static Fragment newInstance(int type){
            Fragment fragment = new BaseFragment();
            Bundle bundle = new Bundle();
            bundle.putInt(DATA,type);
            fragment.setArguments(bundle);
            return fragment;
        }
    }

定義Adapter(繼承自FragmentPagerAdapter)，覆寫getItem()方法

package com.fyales.slidetablayout;

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


    /**
     * @author fyales
     */
    public class TabViewPagerAdapter extends FragmentPagerAdapter {

        private final int PAGE_COUNT = 3;


        private String mTabTitle[] = new String[]{"朝代","人物","戰爭"};
        private Context mContext;

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

        @Override
        public Fragment getItem(int position) {

            return BaseFragment.newInstance(position);
        }

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

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

最后我們就可以在MainActivity.java中直接使用了

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

        ViewPager viewPager = (ViewPager) findViewById(R.id.viewpager);
        viewPager.setAdapter(new TabViewPagerAdapter(getSupportFragmentManager(),
                MainActivity.this));

        SlidingTabLayout slidingTabLayout = (SlidingTabLayout) findViewById(R.id.sliding_tabs);
        // slidingTabLayout.setDistributeEvenly(true); 是否填充滿屏幕的寬度
        slidingTabLayout.setViewPager(viewPager);
    }

自定義樣式和自定義下劃線顏色

SlidingTabLayout同樣有一些自定義的方法供你使用，你可以定義下劃線的顏色或者自定義樣式，通過以下方法調用

//自定義下劃線顏色
        slidingTabLayout.setCustomTabColorizer(new SlidingTabLayout.TabColorizer(){
            @Override
            public int getIndicatorColor(int position) {
                return Color.RED;
            }
        });

        //自定義展示樣式
        slidingTabLayout.setCustomTabView(R.layout.your_custom_tab, 0);

項目Demo地址。