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的懒加载，这个在之后的文章中会介绍。