谷歌官方扩展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地址。

谷歌官方扩展UI组件---SlideTabLayout

标签：

原文地址：http://my.oschina.net/weiCloudS/blog/397775