Google官方组件-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地址