TabLayout的使用

效果图:

1.引入包：compile 'com.android.support:design:23.1.1'

2.布局文件xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    xmlns:app = "http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:layout_height="match_parent">


    <!--app:tabIndicatorColor="@color/colorPrimary"下划线颜色-->
    <!--app:tabSelectedTextColor=""选中后的颜色-->
    <!--app:tabTextColor="@color/white"未选中颜色-->
    <!--app:tabTextAppearance="@style/AppTheme.TextAppearance.Design.Tab"可以改变字体大小-->
    <android.support.design.widget.TabLayout
        android:id="@+id/tabLayout"
        app:tabIndicatorColor="@color/colorPrimary"
        app:tabSelectedTextColor="@color/tab_select"
        app:tabTextColor="@color/tab_color"
        app:tabIndicatorHeight="4dp"
        app:tabTextAppearance="@style/AppTheme.TextAppearance.Design.Tab"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
    </android.support.design.widget.TabLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/vp"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

    </android.support.v4.view.ViewPager>

</LinearLayout>

AppTheme.TextAppearance.Design.Tab的样式:

<style name="AppTheme.TextAppearance.Design.Tab" parent="TextAppearance.AppCompat.Button">
    <item name="android:textSize">18sp</item>
    <item name="textAllCaps">true</item>
</style>

2:主Fragment的代码:

package com.wkw.fragmenttabhost.fragment;

import android.graphics.Color;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.view.ViewPager;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import com.wkw.fragmenttabhost.R;
import com.wkw.fragmenttabhost.adapter.TabAdapter;

/**
 * Author:  wkw
 * Email:
 * Date:    2016/1/14
 * Description:
 */
public class CommunityFragment extends Fragment {

    TabLayout mTabLayout;
    ViewPager mViewPager;
    View mView;
    TabAdapter mTabAdapter;
    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
         mView = inflater.inflate(R.layout.fragment_community,container,false);
        initView();
        return mView;
    }

    private void initView() {
        mTabLayout = (TabLayout)mView.findViewById(R.id.tabLayout);
        mViewPager = (ViewPager)mView.findViewById(R.id.vp);
        initTab();
    }

    private void initTab() {
        mTabAdapter = new TabAdapter(getChildFragmentManager());
        mTabAdapter.addFragment(TabChildFragment.newInstance("新闻"), "新闻");
        mTabAdapter.addFragment(TabChildFragment.newInstance("体育"), "体育");
        mTabAdapter.addFragment(TabChildFragment.newInstance("美女"), "美女");
        mTabAdapter.addFragment(TabChildFragment.newInstance("帅哥"), "帅哥");
        mTabAdapter.addFragment(TabChildFragment.newInstance("娱乐"), "娱乐");
        mTabAdapter.addFragment(TabChildFragment.newInstance("八卦"), "八卦");
        mViewPager.setAdapter(mTabAdapter);
        mTabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);//TabLayout支持滑动
//        mTabLayout.setTabMode(TabLayout.MODE_FIXED);
//        for (int i = 0;i < mTabLayout.getTabCount();i++) {
//            TabLayout.Tab tab = mTabLayout.getTabAt(i);
//            tab.setCustomView();//这里可以为tab自定义布局
//        }
        mTabLayout.setupWithViewPager(mViewPager);
    }
}

3:TabAdapter的代码:

package com.wkw.fragmenttabhost.adapter;

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentStatePagerAdapter;

import java.util.ArrayList;
import java.util.List;

/**
 * Author:  wkw
 * Email:
 * Date:    2016/1/14
 * Description:
 */
public class TabAdapter extends FragmentStatePagerAdapter {

    private final List<Fragment> mFragments = new ArrayList<Fragment>();
    private final List<String> mFragmentTitles = new ArrayList<String>();

    public TabAdapter(FragmentManager fm) {
        super(fm);
    }

    public void addFragment(Fragment fragment,String title) {
        mFragments.add(fragment);
        mFragmentTitles.add(title);
    }



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

    @Override
    public int getCount() {
        return mFragments.size();
    }


    @Override
    public CharSequence getPageTitle(int position) {
        return mFragmentTitles.get(position);
    }
}

4:TabChildFragment的代码：

package com.wkw.fragmenttabhost.fragment;

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

import com.wkw.fragmenttabhost.R;

/**
 * Author:  wkw
 * Email:
 * Date:    2016/1/14
 * Description:
 */
public class TabChildFragment extends Fragment {

    public static final String TITLE="title";

    public static TabChildFragment newInstance(String title){
        TabChildFragment tabChildFragment = new TabChildFragment();
        Bundle bundle = new Bundle();
        bundle.putString(TITLE,title);
        tabChildFragment.setArguments(bundle);
        return tabChildFragment;
    }

    TextView tv;
    View mView;
    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        if(null != mView) {
            ViewGroup parent = (ViewGroup) mView.getParent();
            if(null != parent) {
                parent.removeView(mView);
            }
        } else {
            mView = inflater.inflate(R.layout.fragment_child,container,false);
            initView();
        }

        return mView;
    }

    public void initView() {
        tv = (TextView) mView.findViewById(R.id.tv_child);
        String title = (String) getArguments().get(TITLE);
        if(title != null) {
            tv.setText(title);
        }
    }
}

5：总结:

   使用Tablayout能很容易的实现像很多新闻app都会存在的标签，这个是官方的组件使用起来也很方便，建议大家使用，TaLayout也是和我上篇文章一样在切换tab的时候，他的子fragment布局是会重新加载一遍的，可以使用缓存fragment布局，还有就是TabLayout还是预先多加载一个试图，还比当刚进入的时候会同时的创建两个fragment，要是你的app中的fragment有很复杂的数据访问，这个就会影响当前视图的数据加载速度，这时候可以选择fragment的懒加载，这个在之后的文章中会介绍。