【Android】TabLayout设置使用自定义的样式的图片显示问题

news2025/1/11 22:53:58

序言

TabLayout我们经常使用，用来和ViewPager2进行组合使用，做多Fragment切换页面效果。
TabLayout我们经常看到的的显示效果是上面文字，下面一个线段，在各大浏览器/新闻类APP可以看到，这个效果也是对TabLayout配置参数可以实现的，但是我们想要实现这种效果
在这里插入图片描述
我们有两个Tab，左边和右边的，选中左边的之后，左边的就是橙色，然后箭头指向右边，选中右边的，右边变成橙色，然后箭头指向左边。

这个需要对TabLayout进行配置。

实现

首先Tablayout在xml里面的配置

    <com.google.android.material.tabs.TabLayout
        android:id="@+id/tab"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="fill"
        android:background="@color/white"
        android:paddingStart="0dp"
        android:paddingEnd="0dp"
        app:tabGravity="fill"
        app:tabIndicatorColor="@color/white"
        app:tabIndicatorHeight="0dp"
        app:tabMaxWidth="0dp"
        app:tabMode="fixed"
        app:tabPaddingEnd="-1dp"
        app:tabPaddingStart="-1dp"
        app:tabRippleColor="@null" />

其中这个

      app:tabPaddingEnd="-1dp"
      app:tabPaddingStart="-1dp"

是因为Tab本身自己是有默认的Padding的，这样是为了能让我们图片充满TabLayout的空间。

在这里插入图片描述
在这里插入图片描述

然后我们需要准备好这种图片放在项目里面
接下来就是很正常的操作了，创建Adapter继承FragmentStateAdapter，然后往里面加内容

class TabAdapter(
    val fragment: FragmentActivity,
    val mContext: Context,
    val index: Int
) : FragmentStateAdapter(fragment) {

    private class ViewPagerData(var imageBgId: Int, var imageIcon: Int, var textId: Int)

    private val viewPagerDataList: MutableList<ViewPagerData> = mutableListOf()

    init {
        viewPagerDataList.add(
            ViewPagerData(
                R.drawable.ic_un_selected,
                R.mipmap.ic_un_change,
                R.string.lable_type
            )
        )
        viewPagerDataList.add(
            ViewPagerData(
                R.drawable.ic_un_selected,
                R.mipmap.ic_un_change,
                R.string.installation
            )
        )
    }

    override fun getItemCount(): Int = viewPagerDataList.size

    override fun createFragment(position: Int): Fragment {
        return when (position) {
            0 -> OneFragment()
            1 -> TwoFragment()
            else -> OneFragment()
        }
    }

    @SuppressLint("MissingInflatedId")
    fun getTabView(position: Int): View? {
        val view =
            LayoutInflater.from(mContext).inflate(R.layout.view_layout, null)
        val tabBg = view.findViewById<LinearLayout>(R.id.ll_bg)
        val tabTextView = view.findViewById<TextView>(R.id.tv_name)
        val tabImageView = view.findViewById<ImageView>(R.id.iv_icon)
        // 在这里设置初始颜色和图标
        tabTextView.setText(viewPagerDataList[position].textId)
        tabTextView.setTextColor(mContext.resources.getColor(R.color.color_first_level_word))
        tabImageView.setImageResource(viewPagerDataList[position].imageIcon)
        tabBg.setBackgroundResource(viewPagerDataList[position].imageBgId)
        return view
    }
}

里面的view_layout文件

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

    <ImageView
        android:id="@+id/iv_tab_icon"
        android:layout_width="@dimen/agree_user_width_22"
        android:layout_height="@dimen/agree_user_width_22"
        android:layout_gravity="center_vertical" />

    <TextView
        android:id="@+id/tv_name"
        android:layout_width="wrap_content"
        android:layout_height="@dimen/Standard_height48"
        android:layout_marginStart="@dimen/margin_8"
        android:gravity="center_vertical"
        android:textColor="@color/color_first_level_word"
        android:textSize="@dimen/textSize_18sp" />
</LinearLayout>

注意：在设置这个Tab的高度的时候，有时候可能因为系统的问题，导致我们设置的Tab图片无法充满这个TabLayout的空间，解决办法上面有提到，其中左右无法充满就是使用这个方法解决，在TabLayout里面加

      app:tabPaddingEnd="-1dp"
      app:tabPaddingStart="-1dp"

这个上面提到了，但是上下不充满的话就无法使用这个设置了，
需要我们在设置TabLayout的时候
1.设置TabLayout的上下高度

   android:layout_height="wrap_content"

2.在设置我们每个Tab的xml文件时，就是上面的view_layout文件里面设置高度，但是不要在父View里面设置高度，就像上面的view_layout里面，父View是LinearLayout，不能将LinearLayout的高度设置成我们需要的，要将其设置成

  android:layout_height="wrap_content"

然后在里面的子View里面，将某个高度设置成我们需要的高度，撑起这个布局，比如我们将TextView的高度设置成48dp，这也是我们需要的TabLayout的高度，这样的话可以解决我们的Tab图片在上下方向上不能充满TabLayout的空间的问题。

然后我们就可以在Activity里面使用了

val adapter = TabAdapter(this, this, 0)
binding.viewPager.adapter = adapter
binding.viewPager.setIsFocusableInTouchModeKtx(false)
binding.viewPager.isUserInputEnabled = false
TabLayoutMediator(binding.tab, binding.viewPager) { tab: TabLayout.Tab, position: Int ->
     tab.customView = adapter.getTabView(position)
}.attach()
binding.tab.isTabIndicatorFullWidth = false
binding.viewPager.setCurrentItem(0, false)
//初始修改选中的item文字图片颜色
binding.tab.getTabAt(0)?.customView?.findViewById<LinearLayout>(R.id.ll_bg)?.setBackgroundResource(R.mipmap.ic_select)
binding.tab.getTabAt(0)?.customView?.findViewById<ImageView>(R.id.iv_icon)?.setImageResource(R.mipmap.ic_change)
binding.tab.getTabAt(0)?.customView?.findViewById<TextView>(R.id.tv_name)?.setTextColor(getColor(R.color.color_brand))

这样我们就已经将TabLayout和ViewPager2绑定成功了，但是我们在选择Tab的时候，还是要根据选择的Tab更换相应的背景和图片的。
我们要对这个TabLayout监听

binding.tab.addOnTabSelectedListener(object :
   TabLayout.OnTabSelectedListener {
   //选中的item处理
   override fun onTabSelected(tab: TabLayout.Tab) {
       val view = tab.customView
       if (view != null) {
           val tabBg = view.findViewById<LinearLayout>(R.id.ll_bg)
           val tabImageView =
               view.findViewById<ImageView>(R.id.iv_icon)
           val tabTextView =
               view.findViewById<TextView>(R.id.tv_name)
           val position = tab.position
           if (position == 0) {
           //因为我们只有两个Item的Tab，所以这个0代表的是第一个，也就是左边的Tab被选中了，
           //此时我们要更换图片和其他需要更换的东西，同理当我们选中其他的Tab也是要这么做的
               tabBg.setBackgroundResource(R.mipmap.ic_select)
               tabImageView.setImageResource(R.mipmap.ic_change)
               abTextView.setTextColor(getColor(R.color.color_brand)) // 替换成选中颜色
           } else {
               tabBg.setBackgroundResource(R.mipmap.ic_right_select)
               tabImageView.setImageResource(R.mipmap.ic_change)
               tabTextView.setTextColor(getColor(R.color.color_brand)) // 替换成选中颜色
           }
       }
   }

   //未选中的item处理
   override fun onTabUnselected(tab: TabLayout.Tab) {
       val view = tab.customView
       if (view != null) {
           val tabBg = view.findViewById<LinearLayout>(R.id.ll_bg)
           val tabImageView =
               view.findViewById<ImageView>(R.id.iv_icon)
           val tabTextView =
               view.findViewById<TextView>(R.id.tv_name)
           val position = tab.position
           if (position == 0) {
           //0代表第一个没有被选中
           //跟上面的处理逻辑一样
           } else {
           //跟上面的处理逻辑一样        
                     
           }
       }
   }

   override fun onTabReselected(tab: TabLayout.Tab) {
   // 不需要处理
   }
})

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1203581.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

2609. 最长平衡子字符串

2609. 最长平衡子字符串

2609. 最长平衡子字符串 难度: 简单 来源: 每日一题 2023.11.08 给你一个仅由 0 和 1 组成的二进制字符串 s 。 如果子字符串中 所有的 0 都在 1 之前 且其中 0 的数量等于 1 的数量&#xff0c;则认为 s 的这个子字符串是平衡子字符串。请注意&#xff0c;空子字符串也…
阅读更多...
【数据结构】树与二叉树（十四）：二叉树的基础操作：查找给定结点的父亲（算法Father ）

【数据结构】树与二叉树（十四）：二叉树的基础操作：查找给定结点的父亲（算法Father ）

文章目录 5.2.1 二叉树二叉树性质引理5.1&#xff1a;二叉树中层数为i的结点至多有 2 i 2^i 2i个&#xff0c;其中 i ≥ 0 i \geq 0 i≥0。引理5.2&#xff1a;高度为k的二叉树中至多有 2 k 1 − 1 2^{k1}-1 2k1−1个结点&#xff0c;其中 k ≥ 0 k \geq 0 k≥0。引理5.3&…
阅读更多...
C# Spire.Pdf将PDF文件转换为Word文件

C# Spire.Pdf将PDF文件转换为Word文件

一.开发框架&#xff1a; .NetCore6.0 工具&#xff1a;Visual Studio 2022 二.思路&#xff1a; 1.界面上传PDF文件&#xff0c;并保存 2.PDF文件转换为Word文件并保存 3.使用SHA256Hash判断文件是否已经转换过了&#xff0c;转换过了的话&#xff0c;就返回原先转换过的文…
阅读更多...
数据——最为直接的答案

数据——最为直接的答案

身处于这样一个数字化快速发展、竞争强烈的时代&#xff0c;不管是企业还是个人&#xff0c;大家都需要及时获取前沿动态信息&#xff0c;密切关注市场的变化。但是&#xff0c;在不计其数的企业中&#xff0c;到底行业top 是哪些企业引领潮流&#xff1f; 只有数据能告诉你最…
阅读更多...
一款免费好用的制作电子杂志网站，发现新大陆~

一款免费好用的制作电子杂志网站，发现新大陆~

你是不是也厌倦了传统纸质杂志的限制&#xff0c;想要尝试一种全新的阅读体验&#xff1f;那么&#xff0c;今天我要向你推荐的这款免费好用的制作电子杂志网站&#xff0c;绝对能让你眼前一亮&#xff01; 这款网站就是FLBOOK在线制作电子杂志平台&#xff0c;并且界面简洁、操…
阅读更多...
设计模式之模版方法(TemplateMethod)

设计模式之模版方法(TemplateMethod)

模版方法 钩子函数 回调函数 在父类里面有一个模版方法&#xff0c;在这个方法里面调用了op1&#xff0c;op2&#xff0c;op3… 在子类里面如果想要改变父类的op1和op2 只需要重写op1和op2&#xff0c;那么这个重写之后的方法&#xff0c;可以在父类里面直接调用的到 例子: J…
阅读更多...
LabVIEW中NIPackageManager功能介绍

LabVIEW中NIPackageManager功能介绍

LabVIEW中PackageManager功能介绍 使用NIPackage Manager可安装、更新、修复和删除NI软件。 安装NI软件 使用PackageManager浏览和安装NI软件。 1. 在浏览产品选项卡上&#xff0c;单击产品类别以显示该类别中的可用产品。 2. 选择要安装的产品&#xff0c;然后单击…
阅读更多...
20 个好用的一行 Java代码

20 个好用的一行 Java代码

今天分享给大家20个 令人惊叹的 Java一行代码&#xff0c;让你们的工作更轻松。一起来看看吧&#xff01; 1. 获取浏览器 Cookie 的值 使用document.cookie 来获取 Cookie 的值。 2. 将 RGB 转换为十六进制 3. 复制到剪贴板 使用 navigator.clipboard.writeText 轻松将任何文本…
阅读更多...
Cesium 点线面实体

Cesium 点线面实体

1.点 const point viewer.entities.add({ id: point, position: Cesium.Cartesian3.fromDegrees(113, 30), point: { pixelSize: 20, //像素 color: Cesium.Color.DEEPPINK, outlineColor: Cesium.Color.fromCssColorString(#fff), outlineWidth: 2, // 像素 }, }); 2.图标标注…
阅读更多...
医院等级评审，离不开医院不良事件报告系统

医院等级评审，离不开医院不良事件报告系统

医院不良事件报告系统全套源码 不良事件管理系统源码 不良事件上报系统对事件的报告、处置、跟踪、评价、分析、改进、学习等进行了综合管理&#xff0c;通过双向互评机制实现临床科室与职能部门之间的进一步互动&#xff0c;加强不良事件报告处置过程中的信息互通能力。 围绕…
阅读更多...
Sonatype Nexus部署docker安装nexus3

Sonatype Nexus部署docker安装nexus3

Nexus是一个强大的Maven仓库管理器&#xff0c;它极大地简化了自己内部仓库的维护和外部仓库的访问。 1、查看可用的 Nexus3版本 可以通过 Sort by 查看其他版本的 nexus3&#xff0c;默认是最新版本 sonatype/nexus3:latest。 https://hub.docker.com/r/sonatype/nexus3/tags…
阅读更多...
猫罐头如何选择？最受欢迎的5款猫罐头推荐！新手养猫速看！

猫罐头如何选择？最受欢迎的5款猫罐头推荐！新手养猫速看！

对于一个刚入门的养猫新手来说&#xff0c;面对市面上琳琅满目的猫罐头选择确实让人头大。我们总想选到营养价值高的罐头&#xff0c;但又怕猫咪不喜欢吃&#xff0c;还担心选到不安全的产品。 作为家里有5只猫猫的铲屎官来说&#xff0c;养猫的这几年可以说是血泪史了&#x…
阅读更多...
为什么你应该学习Go语言？

为什么你应该学习Go语言？

终于等到你&#xff01;Go语言——让你用写Python代码的开发效率编写C语言代码。 一、为什么互联网世界需要Go语言 世界上已经有太多太多的编程语言了&#xff0c;为什么又出来一个Go语言&#xff1f; 硬件限制&#xff1a;摩尔定律已然失效 摩尔定律&#xff1a;当价格不变…
阅读更多...
LeetCode题94，44，145，二叉树的前中后序遍历，非递归

LeetCode题94，44，145，二叉树的前中后序遍历，非递归

注意&#xff1a;解题都要用到栈 一、前序遍历 题目要求 给你二叉树的根节点 root &#xff0c;返回它节点值的 前序 遍历。 示例 1&#xff1a; 输入&#xff1a;root [1,null,2,3] 输出&#xff1a;[1,2,3]示例 2&#xff1a; 输入&#xff1a;root [] 输出&#xff1a;[…
阅读更多...
LiveMedia视频监控汇聚管理平台功能中的CS客户端

LiveMedia视频监控汇聚管理平台功能中的CS客户端

平台具备独立的CS客户端可供客户使用&#xff0c;包含实时播放、监视组轮询、云镜控制、语音对讲、录像回放、报警查询、报警联动等。 实时视频 客户端支持单画面多画面显示&#xff0c;用户可选择任意一路或多路视频观看&#xff0c;视频窗口数量 1、3、6、8、9 直至 64 个可…
阅读更多...
安装显卡驱动、安装cuda toolkit、安装cudnn

安装显卡驱动、安装cuda toolkit、安装cudnn

nvidia-smi查看&#xff0c;CUDA可以向下兼容&#xff0c;以我为例&#xff0c;可以安装12.0以下的版本&#xff1a; cuda toolkit https://developer.nvidia.com/cuda-toolkit-archive 如果 你前面没有安装vs&#xff0c;直接安装的这个&#xff0c;需要把CUDA里面的 Visua…
阅读更多...
LLM大语言模型(典型ChatGPT)入门指南

LLM大语言模型(典型ChatGPT)入门指南

文章目录 一、基础概念学习篇1.1 langchain视频学习笔记1.2 Finetune LLM视频学习笔记 二、实践篇2.1 预先下载模型&#xff1a;2.2 LangChain2.3 Colab demo2.3 text-generation-webui 三、国内项目实践langchain-chatchat 一、基础概念学习篇 1.1 langchain视频学习笔记 lan…
阅读更多...
《005.SpringBoot之仓库管理系统》【有文档】

《005.SpringBoot之仓库管理系统》【有文档】

《005.SpringBoot之仓库管理系统》【有文档】 项目简介 [1]本系统涉及到的技术主要如下&#xff1a; 推荐环境配置&#xff1a;IDEA jdk1.8 Maven MySQL8.0 技术栈; 后台&#xff1a;SpringBootMybatisPlus; 前端&#xff1a;thymeleaf; [2]功能模块展示&#xff1a; 1.基础…
阅读更多...
海康威视（iVMS）综合安防系统任意文件上传漏洞复现 [附POC]

海康威视（iVMS）综合安防系统任意文件上传漏洞复现 [附POC]

文章目录 海康威视&#xff08;iVMS&#xff09;综合安防系统任意文件上传漏洞复现 [附POC]0x01 前言0x02 漏洞描述0x03 影响版本0x04 漏洞环境0x05 漏洞复现1.访问漏洞环境2.构造POC3.复现 0x06 修复建议 海康威视&#xff08;iVMS&#xff09;综合安防系统任意文件上传漏洞复…
阅读更多...
详解JDBC

详解JDBC

JDBC简介 概念: jdbc就是使用java语言操作关系型数据库的一套API 全称 : (Java DataBase Connectivity) Java数据库连接 本质: 官方(sun公司)定义的一套操作所有关系型数据库的规则&#xff0c;即接口&#xff1b; 各个数据库厂商实现这套接口&#xff0c;提供数据库驱动j…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023