文档章节

YY项目之TabLayout自定义Tab的title

dj_归去来兮
 dj_归去来兮
发布于 2016/04/01 22:48
字数 732
阅读 634
收藏 0
  • 首先介绍一下Tablayout和ViewPager配合的基本用法

    布局文件:

<?xml version="1.0" encoding="utf-8"?>
<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">

    <android.support.design.widget.TabLayout
        android:id="@+id/tl"
        style="@style/MyCustomTabLayout"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="@android:color/white"
        app:tabGravity="fill"
        app:tabMode="fixed" />

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

    Activity 中的主要代码片段:

// 首先创建适配器(一个简单的继承自FragmentPagerAdapter的适配器)
adapter = new MyPagerAdapter(getSupportFragmentManager());
// 添加两个fragment到adapter中
adapter.addFragment(MyFragment.newInstance(0));
adapter.addFragment(MyFragment.newInstance(1));
// 必须先调用setadapter方法,以便于tablayout确定需要多少个tab
vp.setAdapter(adapter);
// 将viewpager 与 tablayout关联
tl.setupWithViewPager(vp);

    运行的效果图:

    

    其中的颜色涉及到自定义样式:

    MyCustomTabLayout代码:

<!--  tablayout 自定义样式  -->
<style name="MyCustomTabLayout" parent="Widget.Design.TabLayout">
    <item name="tabIndicatorColor">@color/green</item>
    <item name="tabIndicatorHeight">2dp</item>
    <item name="tabPaddingStart">12dp</item>
    <item name="tabPaddingEnd">12dp</item>
    <item name="tabBackground">@color/colorBackground</item>
    <item name="tabTextAppearance">@style/MyCustomTabTextAppearance</item>
    <item name="tabSelectedTextColor">@color/green</item>
</style>

<style name="MyCustomTabTextAppearance" parent="TextAppearance.Design.Tab">
    <item name="android:textSize">16dp</item>
    <item name="android:textColor">@android:color/black</item>
    <!--  false: ImageSpan被渲染  -->
    <item name="textAllCaps">true</item>
</style>
  •     再来介绍一下自定义tab的view的用法:

    首先,创建一个自定义view的布局文件:

    tab_title.xml:   

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="horizontal">

    <TextView
        android:id="@android:id/text1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:textColor="@drawable/tab_bg" />

    <ImageView
        android:layout_width="20dp"
        android:layout_height="20dp"
        android:layout_gravity="center"
        android:layout_marginLeft="20dp"
        android:src="@mipmap/ic_launcher" />

</LinearLayout>

    为什么要选择TextView的id为android:id="@android:id/text1"呢?

    因为TabLayout类会根据提供的value(FragmentPagerAdapter的getPageTitle返回的值)自动的设置。

    其次,在Acitivity中的主要代码片段的

tl.setupWithViewPager(vp);

    之后,添加设置自定义View的代码:

for (int i = 0; i < adapter.getCount(); i++) {
    TabLayout.Tab tab = tl.getTabAt(i);
    tab.setCustomView(R.layout.tab_title);
    if (i == 0) {
        // 设置第一个tab的TextView是被选择的样式
        tab.getCustomView().findViewById(android.R.id.text1).setSelected(true);
    }
}

    使用到的Selector:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@color/green" android:state_focused="true"></item>
    <item android:color="@color/green" android:state_checked="true"></item>
    <item android:color="@color/green" android:state_pressed="true"></item>
    <item android:color="@color/green" android:state_selected="true"></item>
    <item android:color="@android:color/black"></item>
</selector>

    有一个问题,就是设置了自定义布局之后,也就是调用了setCustomView之后,之前设置的style失效了,我们需要手动设置样式的变化,需要用到监听类TabLayout.OnTabSelectedListener。

    这也是为什么我需要使用selector来作为indicator

    监听部分的代码如下:

tl.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
    @Override
    public void onTabSelected(TabLayout.Tab tab) {
        // 将离开的tab的textView的select属性设置为true
        tab.getCustomView().findViewById(android.R.id.text1).setSelected(true);
        // 将viewpager的item与 tablayout的同步
        vp.setCurrentItem(tab.getPosition());
    }

    @Override
    public void onTabUnselected(TabLayout.Tab tab) {
        // 将离开的tab的textView的select属性设置为false
        tab.getCustomView().findViewById(android.R.id.text1).setSelected(false);
        // 将viewpager的item与 tablayout的同步
        vp.setCurrentItem(tab.getPosition());
    }

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

    }
});

    这样即大功告成了!!

    颜色值green:

<color name="green">#41a160</color>


© 著作权归作者所有

dj_归去来兮
粉丝 15
博文 113
码字总数 31739
作品 0
合肥
Android工程师
私信 提问
TabLayout 与 FragmentTabHost

TabLayout 与 FragmentTabHost Android提供实现Tab样式的控件大致有TabActivity、FragmentTabHost、TabLayout。而TabActivity已经过时,这里就不在多说,主要提 一下Tablayout与FragmentTab...

冰色
2016/01/08
1K
0
Material Design遇到的坑

Toolbar使用 (1) 默认Toolbar中的title、logo都是居左的,如果要改成居中,只能自定义View放到Toolbar中 <android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/a......

xingjm8511
2016/04/13
133
0
Tablayout使用全解,一篇就够了

前言 Tablayout继承自HorizontalScrollView,用作页面切换指示器,因使用简便功能强大而广泛使用在App中。 但有的产品经理偏偏是个磨人的小妖精,真的猜不透啊,今天要这种效果,明天就指着另...

翻滚吧李博
2017/12/06
0
0
TabLayout自定义tab,实现多样导航栏

前言 之前讲过TabLayout的基本属性全解,但是对于TabLayout实现的导航栏仍是有诸多限制,例如不能任意设置text的文字大小,若导航中涉及到图片的话,图片只能简单的设计到文字上方,所以布局...

奔跑的佩恩
01/07
0
0
Android使用TabLayout与ViewPager结合以及TabItem自定义

Android使用TabLayout与ViewPager结合以及TabItem自定义 丛林听雨2017-09-1317 阅读 Android自定义 使用android的design支持包中的android.support.design.widget.TabLayout结合ViewPager/F...

丛林听雨
2017/09/13
0
0

没有更多内容

加载失败,请刷新页面

加载更多

OpenStack 简介和几种安装方式总结

OpenStack :是一个由NASA和Rackspace合作研发并发起的,以Apache许可证授权的自由软件和开放源代码项目。项目目标是提供实施简单、可大规模扩展、丰富、标准统一的云计算管理平台。OpenSta...

小海bug
今天
5
0
DDD(五)

1、引言 之前学习了解了DDD中实体这一概念,那么接下来需要了解的就是值对象、唯一标识。值对象,值就是数字1、2、3,字符串“1”,“2”,“3”,值时对象的特征,对象是一个事物的具体描述...

MrYuZixian
今天
6
0
数据库中间件MyCat

什么是MyCat? 查看官网的介绍是这样说的 一个彻底开源的,面向企业应用开发的大数据库集群 支持事务、ACID、可以替代MySQL的加强版数据库 一个可以视为MySQL集群的企业级数据库,用来替代昂贵...

沉浮_
今天
4
0
解决Mac下VSCode打开zsh乱码

1.乱码问题 iTerm2终端使用Zsh,并且配置Zsh主题,该主题主题需要安装字体来支持箭头效果,在iTerm2中设置这个字体,但是VSCode里这个箭头还是显示乱码。 iTerm2展示如下: VSCode展示如下: 2...

HelloDeveloper
今天
7
0
常用物流快递单号查询接口种类及对接方法

目前快递查询接口有两种方式可以对接,一是和顺丰、圆通、中通、天天、韵达、德邦这些快递公司一一对接接口,二是和快递鸟这样第三方集成接口一次性对接多家常用快递。第一种耗费时间长,但是...

程序的小猿
今天
8
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部