Android 利用TabLayout快速打造滑动Tab页面

在项目中我们经常用到Viewpage与Fragemt来实现页面，可以使用三方开源的PagerSlidingTabStrip去实现，或者viewpagerindicator。当然也可以用TabLayout实现，TabLayout的实现快速简单。

一、build.gradle添加依赖，TabLayout是com.android.support:design包中的

dependencies {    compile fileTree(include: ['*.jar'], dir: 'libs')    testCompile 'junit:junit:4.12'    compile 'com.android.support:appcompat-v7:24.1.1'    compile 'com.android.support:support-v4:24.1.1'    compile 'com.android.support:design:24.1.1'}

二.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="com.huang.tablayout.MainActivity">    <android.support.design.widget.TabLayout        android:id="@+id/tab_layout"        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>

MainActivity代码：

import android.os.Bundle;import android.support.design.widget.TabLayout;import android.support.v4.app.Fragment;import android.support.v4.app.FragmentManager;import android.support.v4.app.FragmentStatePagerAdapter;import android.support.v4.view.ViewPager;import android.support.v7.app.AppCompatActivity;public class MainActivity extends AppCompatActivity {    private ViewPager mViewPager;    private TabLayout mTabLayout;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        mTabLayout = (TabLayout) findViewById(R.id.tab_layout);        mViewPager = (ViewPager) findViewById(R.id.viewpager);        mViewPager.setAdapter(new MyPageAdapter(getSupportFragmentManager()));        //与viewpager绑定        mTabLayout.setupWithViewPager(mViewPager);        // MODE_SCROLLABLE：Scrollview格式        // MODE_FIXED：所有的tab全部显示        mTabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);    }    class MyPageAdapter extends FragmentStatePagerAdapter {        private String tabTitles[] = new String[]{"tab1","tab2","tab3","tab4","tab5","tab6","tab7","tab8","tab9","tab10"};        public MyPageAdapter(FragmentManager fm) {            super(fm);        }        @Override        public Fragment getItem(int position) {            Fragment fragment = BaseFragment.getInstance("fragement===="+(position+1));            return fragment;        }        @Override        public int getCount() {            return 10;        }        /**         * 返回tab的标题         * @param position         * @return         */        @Override        public CharSequence getPageTitle(int position) {            return tabTitles[position];        }    }}

三.BaseFragment的代码：

import android.os.Bundle;import android.support.annotation.Nullable;import android.support.v4.app.Fragment;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;import android.widget.TextView;public class BaseFragment extends Fragment {    public TextView contentTv;    public static BaseFragment getInstance(String title){        Bundle bundle = new Bundle();        bundle.putString("title",title);        BaseFragment baseFragment = new BaseFragment();        baseFragment.setArguments(bundle);        return baseFragment;    }    @Nullable    @Override    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {        View view = inflater.inflate(R.layout.base_fragment,container,false);          contentTv = (TextView) view.findViewById(R.id.content);        if (getArguments()!=null){            contentTv.setText(getArguments().getString("title","hello"));        }        return view;    }}

效果

四、为TabLayout设置样式

  <style name="TabStyle" parent="Widget.Design.TabLayout">        <!--设置指示条颜色-->        <item name="tabIndicatorColor">#ff0000</item>        <!--设置指示条高度-->        <item name="tabIndicatorHeight">2dp</item>        <!--背景颜色-->        <item name="tabBackground">@android:color/white</item>        <!--Tab的字体设置大小、颜色等-->        <item name="tabTextAppearance">@style/TabTextAppearance</item>        <!--选中Tab字体颜色-->        <item name="tabSelectedTextColor">#ff0000</item>    </style>    <style name="TabTextAppearance" parent="TextAppearance.Design.Tab">        <!--大小-->        <item name="android:textSize">16sp</item>        <!--颜色-->        <item name="android:textColor">@android:color/black</item>        <item name="textAllCaps">true</item>    </style>