安卓Design包之TabLayout控件的使用

转自:

安卓Design包之TabLayout控件的简单使用

Google在2015的IO大会上，给我们带来了更加详细的Material Design设计规范，同时，也给我们带来了全新的Android Design Support Library，在这个support库里面，Google给我们提供了更加规范的MD设计风格的控件。最重要的是，Android Design Support Library的兼容性更广，直接可以向下兼容到Android 2.2。这不得不说是一个良心之作。

使用方法很简单，只需要添加一句依赖

compile 'com.android.support:design:24.0.0'

首先带来的是TabLayout

Tab滑动切换View并不是一个新的概念，但是Google却是第一次在support库中提供了完整的支持，
而且，Design library的TabLayout 既实现了固定的选项卡 - view的宽度平均分配，
也实现了可滚动的选项卡 - view宽度不固定同时可以横向滚动。选项卡可以在程序中动态添加,
但大部分时间我们都不会这样用，通常滑动布局都会和ViewPager配合起来使用，所以，我们需要ViewPager来帮忙：
通过一句话setupWithViewPager，我们就把ViewPager和TabLayout结合了起来。

layout_main.xml:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="fanggao.qf.tablelayouttest.MainActivity">

   <FrameLayout
        android:id="@+id/fl_layout"
       android:layout_width="match_parent"
       android:layout_height="match_parent">

   </FrameLayout>
</RelativeLayout>

layout_fragmentxml布局:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical">
   <android.support.design.widget.TabLayout
       android:id="@+id/tl_title"
       android:layout_height="wrap_content"
       android:layout_width="match_parent"
       android:background="#ffffff"
       app:tabIndicatorColor="#0000ff"
       app:tabTextColor="#000000"
       app:tabSelectedTextColor="#0000ff"
       app:tabMode="fixed">
<!--    app:tableIndicatorColor = "#0000ff" 设置下划线的颜色
       app:tabTextColor="#000000"        设置文本颜色
       app:tabSelectedTextColor="#0000ff" 设置选择时文本颜色
       app:tabMode="scrollable"   模式:scrollable横向滚动 fixed 填充,不能滚动
       -->
   </android.support.design.widget.TabLayout>
    <android.support.v4.view.ViewPager
        android:id="@+id/vp_fragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent"></android.support.v4.view.ViewPager>

</LinearLayout>

MainActivity:

添加碎片文件

public class MainActivity extends FragmentActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //加载fragment
        getSupportFragmentManager().beginTransaction().add(R.id.fl_layout,new MainFragment()).commit();

    }
}

MainFragment:

设置显示内容(添加了tabLayout与viewPager)

public class MainFragment extends Fragment {
    private TabLayout tbTitle;
    private ViewPager vpFragments;

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View inflate = inflater.inflate(R.layout.fragment_main, container,false);
        tbTitle = (TabLayout) inflate.findViewById(R.id.tl_title);
         vpFragments = (ViewPager) inflate.findViewById(R.id.vp_fragment);
        initView();
        
        return inflate;
    }

    private void initView() {
　　　　//碎片集合
        ArrayList<Fragment> fragmentList = new ArrayList<>();
　　　　//标题集合
        ArrayList<String> titles = new ArrayList<>();
        String[] titleRes = new String[]{"推荐","排行","歌单","电台","MV"};
        for (int j = 0; j < titleRes.length; j++) {
            titles.add(titleRes[j]);
        }
        for (int i = 0; i < titleRes.length; i++) {
            TestFragment testFragment = new TestFragment();
            Bundle bundle = new Bundle();
            bundle.putString("VALUE",titleRes[i]);
            testFragment.setArguments(bundle);
            fragmentList.add(testFragment);
        }
　　　　//创建并设置适配器
        TestFragmentAdapter testFragmentAdapter = new TestFragmentAdapter(getActivity().getSupportFragmentManager(), fragmentList, titles);
        vpFragments.setAdapter(testFragmentAdapter);

        //将Tablelayout与viewPager绑定
        tbTitle.setupWithViewPager(vpFragments);
    }
}

TestFragmentAdapter:

public class TestFragmentAdapter extends FragmentPagerAdapter {
    private  List<Fragment> fragmentList;
    private  List<String>titles;
    public TestFragmentAdapter(FragmentManager fm, List<Fragment> fragmentList,List<String>titles) {
        super(fm);
        this.fragmentList = fragmentList;
        this.titles = titles;
    }

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

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

    /**
     * 将标题头与viewPager绑定
     * @param position
     * @return
     */
    @Override
    public CharSequence getPageTitle(int position) {
        return titles.get(position);
    }
}

TestFragment(添加到viewPager中显示内容的碎片)

public class TestFragment extends Fragment {
    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View inflate = inflater.inflate(R.layout.fragment_test1, container, false);
        Bundle bundle = getArguments();
        String value = bundle.getString("VALUE");
        Log.i("tag", "onCreateView: "+value);
        TextView tvText = (TextView) inflate.findViewById(R.id.tv_textFragment);
        tvText.setText(value);
        return inflate;

    }
}

效果: