关闭

TabLayout详细学习解析

51人阅读 评论(0) 收藏 举报

到处找关于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的使用
先看一个简单的效果,

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:17719次
    • 积分:479
    • 等级:
    • 排名:千里之外
    • 原创:16篇
    • 转载:95篇
    • 译文:0篇
    • 评论:2条