标签栏TabLayout与ViewPager的那些事

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/monkey646812329/article/details/72771675

一,引言

简书的标签

上图是简书Android端的主页Tab,在其他的App中Tab也是很常见的,它的实现方式也有很多:TabHost,自定义控件(第三方库),RadioGroup等等。这里主要介绍Android Design库中的TabLayout的使用。

TabLayout和ViewPager配合使用是最常见的运用方式,比如上图所示,接下来我们一一攻破!

二,TabLayout的属性介绍

我在这里就不那么废话的跟大家说TabLayout怎么个简单使用法了,那都是小儿科,今天在这里讲的都是一些开发中经常忘记或者是开发中很常见的一些属性或者用法。

  1. 简单的用法

    要先引入design库:
    添加依赖

这是Android Design 包下的类, 该包是Android5.0 引入的UI包

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

(1)在布局中引入TabLayou

             <android.support.design.widget.TabLayout

              android:id="@+id/tabLayout"

              android:layout_width="wrap_content"

              android:layout_height="wrap_content"/>

 (2)在代码中简单设置调用

    tabLayout= (TabLayout) findViewById(R.id.tabLayout);

    tabLayout.addTab(tabLayout.newTab().setText("Tab 1"));

    tabLayout.addTab(tabLayout.newTab().setText("Tab 2"));

    tabLayout.addTab(tabLayout.newTab().setText("Tab 3"));

简单用法就是这么简单,这不是我今天要分享的重点,今天主要分享TabLayout 的一些容易出错的属性以及怎么跟ViewPager进行联动使用

2.TabLayout的属性介绍

  • 1. 改变TabLayout的颜色
      在开发的时候,当你看到产品原型或者UI效果图的时候是不是有种想骂人的冲动,这要怎么改啊!其实叫爹叫妈,还不如平时在开发的过程中多积累,书到用时方很少并不是没有道理了。进入正题。
      (1)改变选中字体的颜色
     app:tabSelectedTextColor="#ffffff" // 选择的Tab的文字颜色
     app:tabTextColor="#000000" // 未选择的Tab文字颜色
     app:tabTextAppearance="@style/Base.TextAppearance.AppCompat.Large" // 文字样式

  (2)改变指示下标的颜色跟高度

         app:tabIndicatorHeight="10dp"  //指示器高度,当高度为0的时候就没有下标的那个横线指示了
      app:tabIndicatorColor="@color/colorPrimary"   // 指示器颜色

  (3)改变整个TabLayout的背景颜色

      app:tabBackground="color"
  • 2改变Tab的文字大小
     总觉得这个字体有点小了,于是想找方法把这个字变得大一点,好像没有直接变大的方法,可是找到了这个:
    app:tabTextAppearance="@android:style/TextAppearance.Holo.Large"//设置文字的外貌

只要可以设置style那就没什么可怕的了是吧。

3.改变指示器下标的高度

    app:tabIndicatorHeight="4dp"

4.添加图标

    tabLayout.addTab(tabLayout.newTab().setText("Tab 1").setIcon(R.mipmap.ic_launcher));

5.Tab的模式
数据很多的时候我们应该怎么办呢,简书中的第二个Tab就是可以滑动的:

比如:
    tabLayout.addTab(tabLayout.newTab().setText("Tab 4"));

    tabLayout.addTab(tabLayout.newTab().setText("Tab 5"));

    tabLayout.addTab(tabLayout.newTab().setText("Tab 6"));

    tabLayout.addTab(tabLayout.newTab().setText("Tab 7"));

    tabLayout.addTab(tabLayout.newTab().setText("Tab 8"));

    tabLayout.addTab(tabLayout.newTab().setText("Tab 9"));

    tabLayout.addTab(tabLayout.newTab().setText("Tab 10"));

    tabLayout.addTab(tabLayout.newTab().setText("Tab 11"));

然后设置属性为:

app:tabMode="scrollable"

默认是fixed:固定的,标签很多时候会被挤压,不能滑动。

6.加入padding
设置Tab内部的子控件的Padding:



    app:tabPadding="xxdp"

    app:tabPaddingTop="xxdp"

    app:tabPaddingStart="xxdp"

    app:tabPaddingEnd="xxdp"

    app:tabPaddingBottom="xxdp"

设置整个TabLayout的Padding:

    app:paddingEnd="xxdp"

    app:paddingStart="xxdp"

7.内容的显示模式

app:tabGravity="center"//居中,如果是fill,则是充满

8.Tab的宽度限制
设置最大的tab宽度:

   app:tabMaxWidth="xxdp"
设置最小的tab宽度:
    app:tabMinWidth="xxdp"

9.Tab的“Margin”
TabLayout开始位置的偏移量:

app:tabContentStart="100dp"

10.TabLayout的监听事件
选中了某个tab的监听事件OnTabSelectedListener():

    tabLayout.setOnTabSelectedListener(newTabLayout.OnTabSelectedListener() {

    @Override

    public voidonTabSelected(TabLayout.Tab tab) {

    //选中了tab的逻辑

    }

    @Override

    public voidonTabUnselected(TabLayout.Tab tab) {

    //未选中tab的逻辑

    }

    @Override

    public voidonTabReselected(TabLayout.Tab tab) {

    //再次选中tab的逻辑

    }

    });

11.和ViewPager的联动

tabLayout.setupWithViewPager(Viewpager);

12.默认选中某项

tablayout.getTabAt(position).select();

三,例子看看怎么跟ViewPager联动

1.布局文件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tianya="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/common_light_gap_bg"
    android:orientation="vertical" >
    <!-- 顶上输入栏 -->

    <!-- <LinearLayout
        android:id="@+id/llinput"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:padding="5dip"
        android:background="@color/application_bg"
        android:orientation="horizontal" >

        <EditText
            android:id="@+id/txt_input"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:gravity="center_vertical"
            android:singleLine="true"
            android:textColor="@android:color/black" />

        <ImageView
            android:id="@+id/icon_clean"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:visibility="invisible" />
    </LinearLayout> -->

    <cn.tianya.light.widget.SearchBoxTushuo
        android:id="@+id/searchbox"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content" />

    <!-- 好友列表 -->
    <android.support.design.widget.TabLayout
        android:id="@+id/tabs"
        android:layout_width="match_parent"
        android:layout_height="39dp"
        android:background="@color/white"
        tianya:tabIndicatorColor="@color/noteitem_owner"
        tianya:tabSelectedTextColor="@color/noteitem_owner"
        tianya:tabTextAppearance="@style/tab_text_style"
        tianya:tabTextColor="@color/reward_price"/>

    <!--可滑动的布局内容-->
    <android.support.v4.view.ViewPager
        android:id="@+id/vp_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>
</LinearLayout>

2.java代码设置

public class MultiContactSelectActivity extends Activity {
    private TabLayout mTabLayout;
    private ViewPager mViewPager;
    private LayoutInflater mInflater;
    private List<String> mTitleList = new ArrayList<>();//页卡标题集合
    private View view1, view2;//页卡视图
    private List<View> mViewList = new ArrayList<>();//页卡视图集合
        @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.multi_contact_select_main);
        initViews();
    }
    private void initViews() {
        mViewPager = (ViewPager) findViewById(R.id.vp_view);
        mTabLayout = (TabLayout) findViewById(R.id.tabs);

        mInflater = LayoutInflater.from(this);

        view1 = mInflater.inflate(R.layout.contact_select_page, null);
        view2 = mInflater.inflate(R.layout.contact_select_page, null);
        //添加页卡视图
        mViewList.add(view1);
        mViewList.add(view2);
        //添加页卡标题
        mTitleList.add(getResources().getString(R.string.my_friends));
        mTitleList.add(getResources().getString(R.string.my_fans));
        mTabLayout.setTabMode(TabLayout.MODE_FIXED);//设置tab模式,当前为系统默认模式
        mTabLayout.addTab(mTabLayout.newTab().setText(mTitleList.get(0)));//添加tab选项卡
        mTabLayout.addTab(mTabLayout.newTab().setText(mTitleList.get(1)));

        MyPagerAdapter mAdapter = new MyPagerAdapter(mViewList);
        mViewPager.setAdapter(mAdapter);//给ViewPager设置适配器
        mTabLayout.setupWithViewPager(mViewPager);//将TabLayout和ViewPager关联起来。
        mTabLayout.setTabsFromPagerAdapter(mAdapter);//给Tabs设置适配器
        mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels)  {

            }

            @Override
            public void onPageSelected(int position) {
                //选中tab后的逻辑
                }
            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });


    }


    //ViewPager适配器
    class MyPagerAdapter extends PagerAdapter {
        private List<View> mViewList;

        public MyPagerAdapter(List<View> mViewList) {
            this.mViewList = mViewList;
        }

        @Override
        public int getCount() {
            return mViewList.size();//页卡数
        }

        @Override
        public boolean isViewFromObject(View view, Object object) {
            return view == object;//官方推荐写法
        }

        @Override
        public Object instantiateItem(ViewGroup container, int position) {
            container.addView(mViewList.get(position));//添加页卡
            return mViewList.get(position);
        }

        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {
            container.removeView(mViewList.get(position));//删除页卡
        }

        @Override
        public CharSequence getPageTitle(int position) {
        //这里这个一定要写,不然卡片标题显示不出来
            return mTitleList.get(position);//页卡标题
        }
    }

}

总结:和ViewPager联动,需要重写adapter 的getPageTitle,否则无法显示TabLayout上的标签
可以参考这两篇文章,写得不错
TabLayout属性详解
最详细的TabLayout

阅读更多
换一批

没有更多推荐了,返回首页