Android Support Design Library之TabLayout

对于TabLayout独有的属性比较多,我也是查看了文档才一一弄清楚是怎么个情况,我这里主要做一个总结,和实现其功能,给大家使用时候一个参考,免得网上百度不到众多属性是什么意思,以及要实现某个功能需要哪些属性。



1.TabLayout与AppBarLayout的融合


一般使用TabLayout是将其写入AppBarLayout里面,与标题栏融为一体,这样可以让菜单标题一体化,界面看起来更和谐紧密。


<android.support.design.widget.AppBarLayout
    android:id="@+id/activity_main_appbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

    <android.support.v7.widget.Toolbar
        android:id="@+id/activity_main_toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        app:layout_scrollFlags="scroll|enterAlways"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light">

    </android.support.v7.widget.Toolbar>

    <android.support.design.widget.TabLayout
        android:id="@+id/activity_main_tablayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabIndicatorColor="#AD9F79EE"
        app:tabSelectedTextColor="#FF00FF00"
        app:tabTextColor="#FF000000"
        app:tabMode="scrollable"
        app:tabGravity="center"
        app:tabContentStart="0dp"
        app:tabBackground="@android:color/white"
        app:tabIndicatorHeight="2dp"
        app:tabMaxWidth="100dp"
        app:tabMinWidth="50dp" />

</android.support.design.widget.AppBarLayout>


下面我们来看看这众多的属性是什么意思。


⒈app:tabIndicatorColor:其为文章开始图片中下划线的颜色。


⒉app:tabSelectedTextColor:选中菜单项后字体的颜色。


⒊app:tabTextColor:没有选中是的字体颜色


⒋app:tabMode:其取值有两个属性,fixed与scrollable。

前者使用在固定选项卡,也就是说如果标签很多,那么标签会被挤压。

后则使用在不确定且许多选项卡时,也就是显示的标签在一个屏幕上显示不下的时候,这个标签并不会挤压单个标签来适应屏幕,多余的标签会不显示,但是滑动出不在屏幕的选项卡。


⒌app:tabGravity:两个取值,fill与center。名字可以看出来,选项卡较少情况时使用center选项卡居中,fill依然为填充。


⒍app:tabContentStart:名字看起来没很少见,其实就是整个选项卡距离左边界的距离,也可以说就是marginLeft。


⒎app:tabBackground:就是选项卡的背景色,不设置的情况其颜色与标题栏一样。


⒏app:tabIndicatorHeight:下划线的高度


⒐app:tabMaxWidth:每个选项卡的最大宽度


⒑app:tabMinWidth:每个选项卡的最小宽度


⒒app:tabTextAppearance:使用该属性设置样式可以为标签的头部设置图片。当你在viewpager适配器中getPagerTitle中设置了图片,如果不设置TextAppearance.Design.Tab中textAllCaps设置为false。图片是不会显示的。


⒓app:tabPadding:这个属性与padding一样,有left,end,right等一堆扩展。功能一样。


2.使用TabLayout与ViewPager实现网易首页滚动菜单


布局文件如下:


<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/activity_main_appbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <android.support.v7.widget.Toolbar
            android:id="@+id/activity_main_toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:layout_scrollFlags="scroll|enterAlways"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light">

        </android.support.v7.widget.Toolbar>

        <android.support.design.widget.TabLayout
            android:id="@+id/activity_main_tablayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:tabIndicatorColor="#AD9F79EE"
            app:tabSelectedTextColor="#FF00FF00"
            app:tabTextColor="#FF000000"
            app:tabMode="scrollable"
            app:tabGravity="center"
            app:tabContentStart="0dp"
            app:tabBackground="@android:color/white"
            app:tabIndicatorHeight="2dp"
            app:tabMaxWidth="100dp"
            app:tabMinWidth="50dp" />

    </android.support.design.widget.AppBarLayout>

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


</LinearLayout>


接下来MainActivity中的代码如下:


public void initView(){
    Toolbar toolbar = (Toolbar) findViewById(R.id.activity_main_toolbar);
    toolbar.setTitle("網易");
    setSupportActionBar(toolbar);
    this.tabLayout=(TabLayout)findViewById(R.id.activity_main_tablayout);
    this.viewPager=(ViewPager)findViewById(R.id.activity_main_viewpager);
    List<String> titles=new ArrayList<>();
    titles.add("头条");
    titles.add("宜昌");
    titles.add("轻松一刻");
    titles.add("财经");
    titles.add("科技");
    titles.add("移动互联网");
    titles.add("健康");
    titles.add("读书");
    List<LYJFragment> fragments=new ArrayList<>();
    for (int i=0;i<titles.size();i++){
        this.tabLayout.addTab(this.tabLayout.newTab().setText(titles.get(i)));//创建每一个选项卡
        fragments.add(new LYJFragment());//创建每一个ViewPager关联的Fragment
    }
    LYJFragmentAdapter adapter =
            new LYJFragmentAdapter(getSupportFragmentManager(), fragments, titles);//将标题与fragment传入适配器
    this.viewPager.setAdapter(adapter);
    this.tabLayout.setupWithViewPager(this.viewPager);
    this.tabLayout.setTabsFromPagerAdapter(adapter);
}

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    getMenuInflater().inflate(R.menu.menu_main, menu);
    return true;
}


我们这里不仅要设置viewPager的适配器(viewPager.setAdapter(adapter))也要设置tabLayout设置adapter。其方法说明:


Any existing tabs will be removed first. Each tab will have it's text set to the value returned from getPageTitle(int)


每个选项卡都要从getPageTitle返回。


关联tabLayout与viewPager就是setupWithViewPager方法。


LYJFragmentPagerAdapter继承自FragmentPagerAdapter,代码如下:


public class LYJFragmentAdapter extends FragmentPagerAdapter {
    private List<LYJFragment> fragments;
    private List<String> titles;

    public LYJFragmentAdapter(FragmentManager fm, List<LYJFragment> fragments, List<String> titles) {
        super(fm);
        this.fragments = fragments;
        this.titles = titles;
    }


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

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

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


这里的适配器与平常使用的BaseAdapter大同小异,同样的原理。


最后是标题栏的菜单样式:


<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    tools:context=".MainActivity">
    <item
        android:id="@+id/lyj_ttf"
        android:orderInCategory="100"
        android:icon="@drawable/ic_msg_center_header"
        android:title="搜索"
        app:showAsAction="always" />

    <item
        android:id="@+id/lyj_other"
        app:showAsAction="never"
        android:title="其他" />
</menu>


使用AppCompatActivity的onCreateOptionsMenu设置到界面标题栏中:


@Override
public boolean onCreateOptionsMenu(Menu menu) {
    getMenuInflater().inflate(R.menu.menu_main, menu);
    return true;
}


本文源码下载地址如下:


http://download.csdn.net/detail/liyuanjinglyj/9386029


发布了94 篇原创文章 · 获赞 115 · 访问量 75万+

猜你喜欢

转载自blog.csdn.net/liyuanjinglyj/article/details/50443546
今日推荐