关闭

AndroidSupportDesign之TabLayout使用详解

标签: supportTabLayout
18819人阅读 评论(9) 收藏 举报
分类:

在上一篇博客《高逼格UI-ASD(Android Support Design)》中,我们大体的对TabLayout进行了一些初步的了解,这篇博客,单独拿出TabLayout来继续讲解是因为:纵观Android Support Design库的几个控件,除了诸如:FABSnackBar等几个小控件常用以外,也就TabLayout还ok了,其他的例如CollapsingToolbarLayout,这样的控件封装性太强了,只能固定那几个场景去使用(纯属个人见解)。
TabLayout呢?上一篇博客我们只是简单的了解一下,今天这篇博客我们就用TabLayout配合ViewPager使用以下。
在开始之前,我们先来看看官网文档的说明,如何与ViewPager进行联动:

You should set a listener via setOnTabSelectedListener(OnTabSelectedListener) to be notified when any tab’s selection state has been changed.
If you’re using a ViewPager together with this layout, you can use setTabsFromPagerAdapter(PagerAdapter) which will populate the tabs using the given PagerAdapter’s page titles. You should also use a TabLayout.TabLayoutOnPageChangeListener to forward the scroll and selection changes to this layout

恩,看起来很容易啊,简单翻译一下就是:

通过setOnTabSelectedListener设置一个监听器来响应选项卡的选择状态
可以通过setTabsFromPagerAdapter来使用PagerAdapter的page title
使用TabLayout.TabLayoutOnPageChangeListener来联动滑动

ok,大体就是这样,在大体的翻译过程中,其实已经把步骤列出来了,接下来我们只需要按照上面的步骤来编写我们的代码就OK啦。
come on~,首先出场的是xml布局文件:

<LinearLayout 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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <android.support.design.widget.TabLayout
        android:id="@+id/tl"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabIndicatorColor="#FF00FF00"
        app:tabSelectedTextColor="#FF00FF00"
        app:tabTextColor="#FF000000"
        app:tabMode="scrollable"
        app:tabGravity="center"/>

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

</LinearLayout>

恩,很简单,就是一个TabLayout和一个ViewPager,并且是上下排列的。

在Activity中,首先我们要find这两个控件:

    mTabLayout = (TabLayout) findViewById(R.id.tl);
    mViewPager = (ViewPager) findViewById(R.id.viewpager);

为了演示程序,还需要两个伪数据来充当ViewPager的内容和title。

private String[] mTitle = new String[20];
private String[] mData = new String[20];

{
    for(int i=0;i<20;i++) {
        mTitle[i] = "title" + i;
        mData[i] = "data" + i;
    }
}

下面,我们将要按照上面的步骤,一点点来撸代码啦:
第一步,设置TabLayout的选项卡监听:

mTabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                mViewPager.setCurrentItem(tab.getPosition());
            }

            @Override
            public void onTabUnselected(TabLayout.Tab tab) {

            }

            @Override
            public void onTabReselected(TabLayout.Tab tab) {

            }
        });

当我们的tab选择时,让viewpager选中对应的item。
第二步,设置Tab的标题来自PagerAdapter.getPageTitle()

mTabLayout.setTabsFromPagerAdapter(mAdapter);

第三步,设置TabLayout.TabLayoutOnPageChangeListener,给谁设置呢?当然是ViewPager了,怎么设置呢?

final TabLayout.TabLayoutOnPageChangeListener listener =
                new TabLayout.TabLayoutOnPageChangeListener(mTabLayout);
mViewPager.addOnPageChangeListener(listener);

哦,原来TabLaout.TabLayoutOnPageChangeLisetener继承自OnPageChangeListener,不行来看:

public static class TabLayoutOnPageChangeListener implements OnPageChangeListener {...}

注意,这里是addOnPageChangeListener,也就是说,你还可以add N个Listener而不会被覆盖掉。
到这里,步骤我们都走完了,但是别忘了给ViewPage设置Adapter。

mViewPager.setAdapter(mAdapter);

最后是Adapter的代码:

private PagerAdapter mAdapter = new PagerAdapter() {
        @Override
        public CharSequence getPageTitle(int position) {
            return mTitle[position];
        }

        @Override
        public int getCount() {
            return mData.length;
        }

        @Override
        public Object instantiateItem(View container, int position) {
            TextView tv = new TextView(MainActivity.this);
            tv.setTextSize(30.f);
            tv.setText(mData[position]);
            ((ViewPager) container).addView(tv);
            return tv;
        }

        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {
            ((ViewPager) container).removeView((View) object);
        }

        @Override
        public boolean isViewFromObject(View view, Object object) {
            return view == object;
        }
    };

运行一下代码,看看效果:

是不是很简单? 几行代码就搞定了这种效果,当然,你也可以选择自己重写View的方式实现,可以参考我的另一篇博客《打造史上最容易使用的Tab指示符——Indicator》。

如果,你感觉这就简单,那你也太容易满足啦,Google还给我们提供了一个方法,将这些步骤封装到一块,让我们开发者可以一步搞定。public void setupWithViewPager (ViewPager viewPager),继续看看文档的说明:

The one-stop shop for setting up this TabLayout with a ViewPager.

This method will:

Add a ViewPager.OnPageChangeListener that will forward events to this TabLayout.
Populate the TabLayout’s tabs from the ViewPager’s PagerAdapter.
Set our TabLayout.OnTabSelectedListener which will forward selected events to the ViewPager

大体解释一下就是:

这个方法是addOnPageChangeListenersetOnTabSelectedListener的封装。

所以我们注释掉对应代码,替换成setupWithViewPager

//        mTabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
//            @Override
//            public void onTabSelected(TabLayout.Tab tab) {
//                mViewPager.setCurrentItem(tab.getPosition());
//            }
//
//            @Override
//            public void onTabUnselected(TabLayout.Tab tab) {
//
//            }
//
//            @Override
//            public void onTabReselected(TabLayout.Tab tab) {
//
//            }
//        });
        mTabLayout.setTabsFromPagerAdapter(mAdapter);

//        final TabLayout.TabLayoutOnPageChangeListener listener =
//                new TabLayout.TabLayoutOnPageChangeListener(mTabLayout);
//        mViewPager.addOnPageChangeListener(listener);
        mViewPager.setAdapter(mAdapter);
        mTabLayout.setupWithViewPager(mViewPager);

效果还是上面的效果,但是代码量明显少了,仅需两行代码搞定。
但是需要注意一下,setupWithViePager必须在ViewPager.setAdapter()之后调用!为什么呢?来源码找答案:

public void setupWithViewPager(ViewPager viewPager) {
    PagerAdapter adapter = viewPager.getAdapter();
    if(adapter == null) {
        throw new IllegalArgumentException("ViewPager does not have a PagerAdapter set");
    } else {
        ...
    }
}

首先去获取该ViewPager上的Adapter,如果没有Adapter,则抛出一个异常!
好了,到现在TabLayoutViewPager一块使用的用法就讲解完了,相信还是非常简单的,仅仅两行代码就可以搞定。
在以后的项目中,肯定会经常用到它们两个好基友的,但是so easy,不怕不怕~~

12
0
查看评论
发表评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场

Android Tablayout使用示例及详解

tablayout是安卓新特性中的组件,之前很多地方都会用到这样的组件,只是我们一般都是通过tabactivity加fragment或者其他第三方框架来实现,谷歌推出tablayout以后,使这个组件简化了许多,只需要一个tablayout加一个viewpager就可以实现想要的效果。今天就讲一下t...
  • wr751811032
  • wr751811032
  • 2015-12-23 17:11
  • 6682

TabLayout的简单使用

我们在应用viewpager的时候,经常会使用TabPageIndicator来与其配合。达到很漂亮的效果。但是TabPageIndicator是第三方的,而且比较老了,当然了现在很多大神都已经开始自己写TabPageIndicator来满足自己的需求,在2015年的google大会上,google...
  • chenguang79
  • chenguang79
  • 2015-09-29 11:16
  • 136357

AndroidStudio中TabLayout的简单使用

我们在应用viewpager的时候,经常会使用TabPageIndicator来与其配合。达到很漂亮的效果。但是TabPageIndicator是第三方的,而且比较老了,当然了现在很多大神都已经开始自己写TabPageIndicator来满足自己的需求,在2015年的google大会上,google...
  • JavaAndroid730
  • JavaAndroid730
  • 2016-11-20 20:13
  • 2436

一个Android TabLayout库

转自:http://www.jianshu.com/p/9c32f1804cd1 FlycoTabLayout github链接 一个Android TabLayout库,目前有两个TabLayout SlidingTabLayout:参照PagerSlidingTa...
  • qq_34206198
  • qq_34206198
  • 2016-09-28 11:17
  • 390

Android TabLayout的使用(ViewPager添加标题)

效果图 上方的指示器用到的就是TabLayout 下方是一个ViewPager ViewPager内的数据为fragment东西就这么多,先看下布局:先看下如何引用TabLayout 布局的选择控件界面选择Design>TabLayout,需要添加这个依赖,之后就是布局的内容<?...
  • android_hl
  • android_hl
  • 2017-05-05 17:30
  • 425

Android学习之TabLayout的使用解析

今天在群里听见群友说在使用Tablayout的时候报类无法找到异常,TabLayout以前项目中也做过,没觉得遇见什么问题,所以在晚上又来体验一把,果然报错了,尴尬!java.lang.NoClassDefFoundError:android.support.v7.internal.widget.T...
  • qq_16131393
  • qq_16131393
  • 2016-03-21 01:11
  • 4689

Android中TabLayout+ViewPager的简单使用

先放一张运行截图 主页面布局文件为一个TabLayout和ViewPager xml version="1.0" encoding="utf-8"?> LinearLayout xmlns:android="http://sc...
  • qq_29377507
  • qq_29377507
  • 2017-07-12 09:46
  • 174

TabLayout的简单使用

  • 2016-01-30 00:43
  • 7.95MB
  • 下载

TabLayout使用

先上效果图主要用到了ViewPager,TableLayout,Fragment的组合首先,要使用TabLayout必须在AndroidStudio中导入这个依赖库compile 'com.android.support:design:23.1.1'主界面的布局 一个TabLayou...
  • freshxu
  • freshxu
  • 2016-07-01 14:24
  • 1015

原生TabLayout使用

原生TabLayout解决ViewPager导航指示器非常方便, 还可以用在页面下方,类似微信的效果。 但是有些需要注意的地方。
  • pompip
  • pompip
  • 2016-04-13 11:19
  • 1751
    个人资料
    • 访问:648156次
    • 积分:6909
    • 等级:
    • 排名:第3919名
    • 原创:80篇
    • 转载:0篇
    • 译文:2篇
    • 评论:625条
    文章分类
    博客专栏
    友情链接

    鸿洋_

    Aggie的博客

    梁肖技术中心

    极客导航

    最新评论