Android修行手册 - TabLayout全解析 - 一些小技巧

1,886 阅读2分钟

携手创作,共同成长!这是我参与「掘金日新计划 · 8 月更文挑战」的第18天,点击查看活动详情

👉关于作者

众所周知,人生是一个漫长的流程,不断克服困难,不断反思前进的过程。在这个过程中会产生很多对于人生的质疑和思考,于是我决定将自己的思考,经验和故事全部分享出来,以此寻找共鸣!!!

专注于Android/Unity和各种游戏开发技巧,以及各种资源分享(网站、工具、素材、源码、游戏等)

欢迎关注公众号【空名先生】获取更多资源和交流!

👉前提

这是小空坚持写的Android新手向系列,欢迎品尝。

新手(√√√)

大佬(√)

👉实践过程

我们接着昨天的讲哈

😜去掉长按提示文本

for (index in 0 until idTabLayoutFive.tabCount) {
    //设置取消TabItem的长按事件
    idTabLayoutFive.getTabAt(index)!!.view.isLongClickable = false
    //或者将提示的文本置位空字符  适用于 api26及以上 兼容性稍差一些
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {
        idTabLayoutFive.getTabAt(index)!!.view.tooltipText = ""
    }
}

😜设置分割线

Kotlin    pro_bar_pro为自定义的shape

val linearLayout = idTabLayoutFive.getChildAt(0) as LinearLayout
linearLayout.showDividers = LinearLayout.SHOW_DIVIDER_MIDDLE
linearLayout.dividerDrawable = ContextCompat.getDrawable(this, R.drawable.pro_bar_pro)
linearLayout.dividerPadding = 10

Java     pro_bar_pro为自定义的shape

LinearLayout linearLayout= (LinearLayout) tabLayout.getChildAt(0);
linearLayout.setShowDividers( LinearLayout.SHOW_DIVIDER_MIDDLE);
linearLayout.setDividerDrawable(ContextCompat.getDrawable(this, R.drawable.pro_bar_pro));
linearLayout.setDividerPadding(10);

😜自定义Tab样式

重点属性就是这个app:tabIndicator,她是支持你设置自己的shape文件的(我们设置一个指定高度的shape,高度比tab的高度少一丢丢即可,留出上下边距,看起来更舒服一些)。然后我们设置一个指定高度的TabLayout,接着利用android:background属性设置一个圆角背景shape文件。

image.png

<com.google.android.material.tabs.TabLayout
    android:layout_width="wrap_content"
    android:layout_height="40dp"
    android:layout_gravity="center"
    android:background="@drawable/bg_tab"
    app:tabIndicator="@drawable/bg_tab_full"
    app:tabIndicatorColor="@color/white">

    <com.google.android.material.tabs.TabItem
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="导航组件" />

    <com.google.android.material.tabs.TabItem
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="芝麻粒儿" />
</com.google.android.material.tabs.TabLayout>

//文件-bg_tab_full.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:bottom="1dp"
        android:gravity="center"
        android:top="1dp">
        <shape>
            <!-- 上下边距合计1dp 高度减少1dp -->
            <size android:height="38dp" />
            <corners android:radius="40dp" />
            <!--这的颜色其实是没用的,使用的是app:tabIndicatorColor的颜色-->
            <solid android:color="@color/white" />
        </shape>
    </item>
</layer-list>
 
//文件-bg_tab.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <corners android:radius="40dp" />
    <solid android:color="@color/purple_700" />
</shape>

👉其他

📢作者:小空和小芝中的小空

📢转载说明-务必注明来源:芝麻粒儿 的个人主页 - 专栏 - 掘金 (juejin.cn)

📢这位道友请留步☁️,我观你气度不凡,谈吐间隐隐有王者霸气💚,日后定有一番大作为📝!!!旁边有点赞👍收藏🌟今日传你,点了吧,未来你成功☀️,我分文不取,若不成功⚡️,也好回来找我。