TabLayout详细学习解析

转载 2016年08月31日 09:38:05

到处找关于TabLayout的学习资料,有效的资料很少,可能是因为自身是新控件的原因吧,所以就自己花点时间多学下。这个控件一般不会单独存在,基本上所有的使用都要结合Fragment与ViewPager这两个控件来使用,我想我们还是由浅入深从最基本的显示入手。


1 - TabLayout的最简单使用
第一步导包:File→Project Structure...→找到你的Module→denpendencies→右侧加号→Library dependency→com.android.support:design【每个人的版本号可能有差别,这里就不写上去了】,点击OK
然后在布局文件中这么写

<LinearLayout 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:layout_margin="5dp"
    tools:context="com.usher.studytablayout.MainActivity">

    <android.support.design.widget.TabLayout
        android:id="@+id/main_tablayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#D2A2CC" />

</LinearLayout>

MainActivity中这么写

public class MainActivity extends AppCompatActivity {

    private TabLayout tablayout;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        tablayout = (TabLayout) findViewById(R.id.main_tablayout);

        tablayout.addTab(tablayout.newTab().setText("新闻"));
        tablayout.addTab(tablayout.newTab().setText("天气"));
        tablayout.addTab(tablayout.newTab().setText("娱乐"));
    }
}

运行后效果如下图


Paste_Image.png


这个东西就是TabLayout的基本显示,然后它有一些属性如下

  • tabIndicatorColor 下方滚动的下划线颜色
  • tabTextColor 默认的文字颜色
  • tabSelectedTextColor 被选中后文字的颜色
  • tabIndicatorHeight 下划线的高度

这是一些比较常见的,除此之外还有一些别的属性但是不太常用,就不在此一一列举,如果你不知道属性怎么用的,自行谷歌【以后坚决不说百度了】或参考下方...

还以上面的代码为例进行修改,如下所示:

<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:layout_margin="5dp"
    tools:context="com.usher.studytablayout.MainActivity">

    <android.support.design.widget.TabLayout
        android:id="@+id/main_tablayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#D2A2CC"
        app:tabIndicatorColor="@android:color/holo_green_dark"
        app:tabIndicatorHeight="3dp" //这里高度如果设置为0即可隐藏下划线
        app:tabSelectedTextColor="@android:color/holo_red_blue"
        app:tabTextColor="@color/colorAccent" />

</LinearLayout>

效果如图


关于手机录屏以及转换gif教程下次我再写

然后关于TabLayout的显示你还可以给他加上图片,代码如下

public class MainActivity extends AppCompatActivity {

    private TabLayout tablayout;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        tablayout = (TabLayout) findViewById(R.id.main_tablayout);
        tablayout.addTab(tablayout.newTab().setText("新闻").setIcon(R.mipmap.icon1));
        tablayout.addTab(tablayout.newTab().setText("天气").setIcon(R.mipmap.icon2));
        tablayout.addTab(tablayout.newTab().setText("娱乐").setIcon(R.mipmap.icon3 ));
    }
}

运行如下


Paste_Image.png


至于如何放置图片的位置以及自定义TabLayout的样式,不再多说,请参照:http://blog.csdn.net/richardli1228/article/details/50680570


但是我们可以看出,如果单单在布局中显示一个TabLayout是没什么用处的,所以一般情况下都需要结合Fragment和ViewPager使用【请注意:绝大部分情况下结合Fragment都要用到ViewPager,不可单独拆开】


2 - TabLayout结合Fragment以及ViewPager的使用
先看一个简单的效果,

相关文章推荐

Android学习之TabLayout的使用解析

今天在群里听见群友说在使用Tablayout的时候报类无法找到异常,TabLayout以前项目中也做过,没觉得遇见什么问题,所以在晚上又来体验一把,果然报错了,尴尬!java.lang.NoClass...

最详细的 TabLayout 的用法

TabLayout是属于容器控件, 提供水平显示Tab的效果. 常常和ViewPager配合使用. 我将全面地讲解其用法. 反正我是没看过比我还详细的了. 演示 添加依赖 这...
  • wjr1949
  • wjr1949
  • 2017年05月18日 16:21
  • 128

TabLayout学习Demo

  • 2016年02月18日 17:34
  • 7.71MB
  • 下载

android学习-----使用TabLayout实现Tab选项卡以及遇到的一些问题(一)

TabLayout的使用 前言: 更好用,更方便,更简洁 link:https://developer.android.google.cn/reference/android/su...

TabLayout属性的学习

XML文件属性学习:

Android Material Design 之 TabLayout学习

在开发中,我们常常会遇到像网易新闻客户端的Tab的开发,如下图:以往我们在实际开发中可能会使用第三方开源的PagerSlidingTabStrip或者ViewPagerindicator去实现类似的效...

Github学习之EasyTabs打造绚丽TabLayout+ViewPager滑动动画集合库

EasyTabs库EasyTabs的Android库,可帮助创建和轻松定制material design标签。使用方式:repositories { maven { url "https://jitp...

Android学习之TabLayout和ViewPager

TabLayout是属于容器空间,提供水平显示Tab的效果,常常和ViewPager配合使用。 展示: 添加依赖compile 'com.android.support:design:25.3.1...

MaterialDesign学习篇(四),如何使用TabLayout

什么是TabLayout上图中,我们可以看到,该页面分成三个页签,每个页签对应不同的内容,如果让我们来实现布局的话,我们会很容易地想到布局为一个页签指示器+ViewPager,以前,相信各位大多使用的...

TabLayout学习

TabLayout学习
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:TabLayout详细学习解析
举报原因:
原因补充:

(最多只允许输入30个字)