首页 > 代码库 > 安卓Design包之TabLayout控件的使用

安卓Design包之TabLayout控件的使用

2024-08-15 17:47:37   219人阅读

转自:

安卓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>
View Code

 

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>
View Code

 

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 = http://www.mamicode.com/bundle.getString("VALUE");
        Log.i("tag", "onCreateView: "+value);
        TextView tvText = (TextView) inflate.findViewById(R.id.tv_textFragment);
        tvText.setText(value);
        return inflate;

    }
}

效果:
技术分享

 

安卓Design包之TabLayout控件的使用


联系
我们