[Android]创建TabBar

创建一个包含“首页”、“分类”和“我的”选项卡的TabBar并实现切换功能,通常可以通过使用TabLayout结合ViewPager或ViewPager2来完成。以下是一个基本的示例,展示了如何使用Kotlin和XML来实现这个功能。

1.添加依赖项到build.gradle

dependencies {// ...implementation("com.google.android.material:material:1.8.0")implementation("androidx.viewpager2:viewpager2:1.0.0")
}

2.在你的布局XML文件中定义TabLayout和ViewPager2

<?xml version="1.0" encoding="utf-8"?>
<LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"><androidx.viewpager2.widget.ViewPager2android:id="@+id/viewPager"android:layout_width="match_parent"android:layout_height="0dp"android:layout_weight="1" /><com.google.android.material.tabs.TabLayoutandroid:id="@+id/tabLayout"android:layout_width="match_parent"android:layout_height="wrap_content"app:tabMode="fixed"app:tabGravity="fill"app:tabIndicatorHeight="0dp" /></LinearLayout>

3.在你的Activity中设置ViewPager2和TabLayout

package com.example.gatestdemol.tabbarimport androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import androidx.fragment.app.Fragment
import androidx.fragment.app.FragmentActivity
import androidx.viewpager2.adapter.FragmentStateAdapter
import com.example.gatestdemol.databinding.ActivityTabBarBinding
import com.google.android.material.tabs.TabLayoutMediatorclass TabBarActivity : AppCompatActivity() {private lateinit var binding: ActivityTabBarBindingoverride fun onCreate(savedInstanceState: Bundle?) {super.onCreate(savedInstanceState)// setContentView(R.layout.activity_tab_bar)binding = ActivityTabBarBinding.inflate(layoutInflater)setContentView(binding.root)val adapter = ViewPagerAdapter(this)binding.viewPager.adapter = adapterTabLayoutMediator(binding.tabLayout, binding.viewPager) { tab, position ->tab.text = when(position) {0 -> "首页"1 -> "分类"2 -> "我的"else -> null}}.attach()}private inner class ViewPagerAdapter(fa: FragmentActivity) : FragmentStateAdapter(fa) {override fun getItemCount(): Int {return 3}override fun createFragment(position: Int): Fragment {return when(position) {0 -> HomeFragment()1 -> CategoryFragment()2 -> ProfileFragment()else -> Fragment()}}}}

在上面的代码中,我们创建了一个ViewPagerAdapter类继承自FragmentStateAdapter,并重写了getItemCount和createFragment方法来分别返回选项卡的数量和对应的Fragment。TabLayoutMediator用于将TabLayout和ViewPager2绑定起来,并设置每个选项卡的标题。

4.创建对应的Fragment类

package com.example.gatestdemol.tabbarimport android.os.Bundle
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import androidx.fragment.app.Fragment
import com.example.gatestdemol.databinding.FragmentHomeBindingclass HomeFragment: Fragment() {private var binding: FragmentHomeBinding? = nulloverride fun onCreateView(inflater: LayoutInflater,container: ViewGroup?,savedInstanceState: Bundle?): View? {binding = FragmentHomeBinding.inflate(inflater,container,false)return binding?.root}override fun onDestroy() {super.onDestroy()binding = null}}
class CategoryFragment : Fragment() {// 实现分类Fragment的布局和逻辑
}class ProfileFragment : Fragment() {// 实现我的Fragment的布局和逻辑
}

每个Fragment对应一个页面,在这里你可以实现各自的布局和业务逻辑。

这是一个基本的TabBar实现,你可以根据自己的需求添加图标、自定义样式等。

简单TabBar示意图:

5.TabBar添加Icon

package com.example.gatestdemol.tabbarimport androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import androidx.core.content.ContextCompat
import androidx.fragment.app.Fragment
import androidx.fragment.app.FragmentActivity
import androidx.viewpager2.adapter.FragmentStateAdapter
import com.example.gatestdemol.R
import com.example.gatestdemol.databinding.ActivityTabBarBinding
import com.google.android.material.tabs.TabLayout
import com.google.android.material.tabs.TabLayoutMediatorclass TabBarActivity : AppCompatActivity() {private lateinit var binding: ActivityTabBarBindingoverride fun onCreate(savedInstanceState: Bundle?) {super.onCreate(savedInstanceState)binding = ActivityTabBarBinding.inflate(layoutInflater)setContentView(binding.root)val adapter = ViewPagerAdapter(this)binding.viewPager.adapter = adapterTabLayoutMediator(binding.tabLayout, binding.viewPager) { tab, position ->tab.text = when(position) {0 -> "首页"1 -> "分类"2 -> "我的"else -> null}tab.icon = when(position) {0 -> ContextCompat.getDrawable(this@TabBarActivity, R.drawable.ic_home_default)1 -> ContextCompat.getDrawable(this@TabBarActivity, R.drawable.ic_category_default)2 -> ContextCompat.getDrawable(this@TabBarActivity, R.drawable.ic_profile_default)else -> null}}.attach()binding.tabLayout.addOnTabSelectedListener(object : TabLayout.OnTabSelectedListener {override fun onTabSelected(tab: TabLayout.Tab?) {// 一套Icon时用这种方式//tab?.icon?.setTint(ContextCompat.getColor(applicationContext, R.color.your_selected_text_color))// 两套Icon时用这种方式,XML中不要配置app:tabIconTint="@color/your_icon_tint_color"tab?.icon = when(tab?.position) {0 -> ContextCompat.getDrawable(this@TabBarActivity, R.drawable.ic_home_selected)1 -> ContextCompat.getDrawable(this@TabBarActivity, R.drawable.ic_category_selected)2 -> ContextCompat.getDrawable(this@TabBarActivity, R.drawable.ic_profile_selected)else -> null}}override fun onTabUnselected(tab: TabLayout.Tab?) {// 一套Icon时用这种方式//tab?.icon?.setTint(ContextCompat.getColor(applicationContext, R.color.your_icon_tint_color))// 两套Icon时用这种方式,XML中不要配置app:tabIconTint="@color/your_icon_tint_color"tab?.icon = when(tab?.position) {0 -> ContextCompat.getDrawable(this@TabBarActivity, R.drawable.ic_home_default)1 -> ContextCompat.getDrawable(this@TabBarActivity, R.drawable.ic_category_default)2 -> ContextCompat.getDrawable(this@TabBarActivity, R.drawable.ic_profile_default)else -> null}}override fun onTabReselected(tab: TabLayout.Tab?) {// Do nothing}})}private inner class ViewPagerAdapter(fa: FragmentActivity) : FragmentStateAdapter(fa) {override fun getItemCount(): Int {return 3}override fun createFragment(position: Int): Fragment {return when(position) {0 -> HomeFragment()1 -> CategoryFragment()2 -> ProfileFragment()else -> Fragment()}}}}
<?xml version="1.0" encoding="utf-8"?>
<LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"><androidx.viewpager2.widget.ViewPager2android:id="@+id/viewPager"android:layout_width="match_parent"android:layout_height="0dp"android:layout_weight="1" /><com.google.android.material.tabs.TabLayoutandroid:id="@+id/tabLayout"android:layout_width="match_parent"android:layout_height="wrap_content"app:tabIndicatorColor="@color/your_indicator_color"app:tabSelectedTextColor="@color/your_selected_text_color"app:tabTextColor="@color/your_default_text_color"app:tabIconTint="@color/your_icon_tint_color"app:tabMode="fixed"app:tabGravity="fill"app:tabIndicatorHeight="0dp"app:tabRippleColor="@android:color/transparent" /></LinearLayout>
<resources>......<color name="your_indicator_color">#FF0000</color><color name="your_selected_text_color">#FF3700B3</color><color name="your_default_text_color">#FFBB86FC</color><color name="your_icon_tint_color">#FFBB86FC</color>
</resources>

示意图:

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

CODING DevOps产品认证笔记

1.敏捷&精益&瀑布概述 1.1 敏捷软件开发 第一章敏捷软件开发背景 背景&#xff1a;乌卡时代 易变性:当今世界的变化越来越多越来越快&#xff0c;越来越不可预测。不确定性:历史上的任何一个时代所带来的经验已经无法为当今世界的所有变化提供参照。复杂性:事物间的…

函数式编程框架 functionaljava 简介

文章目录 一、函数式编程起源二、functionaljava 框架简介 一、函数式编程起源 ​ 函数式编程起源于数理逻辑&#xff08;范畴论&#xff0c;Category Theory&#xff09;&#xff0c;起源于λ演算&#xff0c;这是一种演算法&#xff0c;它定义一些基础的数据结构&#xff0c…

ICCV2023 Tracking paper汇总(二)(多目标跟随、单目标跟随等)

十六、Integrating Boxes and Masks: A Multi-Object Framework for Unified Visual Tracking and Segmentation paper&#xff1a; https://openaccess.thecvf.com/content/ICCV2023/papers/Xu_Integrating_Boxes_and_Masks_A_Multi-Object_Framework_for_Unified_Visual_ICC…

【华为HCIP | 华为数通工程师】刷题日记1116(一个字惨)

个人名片&#xff1a; &#x1f43c;作者简介&#xff1a;一名大三在校生&#xff0c;喜欢AI编程&#x1f38b; &#x1f43b;‍❄️个人主页&#x1f947;&#xff1a;落798. &#x1f43c;个人WeChat&#xff1a;hmmwx53 &#x1f54a;️系列专栏&#xff1a;&#x1f5bc;️…

十二、Docker的简介

目录 一、介绍 Docker 主要由以下三个部分组成&#xff1a; Docker 有许多优点&#xff0c;包括&#xff1a; 二、Docker和虚拟机的差异 三、镜像和容器 四、Docker Hub 五、Docker架构 六、总结 一、介绍 Docker 是一种开源的应用容器平台&#xff0c;可以在容器内部…

计算机网络期末复习(知识点)

一、计算机网络体系结构 计算机网络&因特网&#xff1a; 计算机网络定义&#xff1a;将地理位置不同的具有独立功能的多台计算机及其外部设备&#xff0c;通过通信线路连接起来&#xff0c;在网络操作系统&#xff0c;网络关联软件及网络协议的管理和协调下&#xff0c;实…

DSP2335的LED工程笔记

首先是确定时钟 在技术参考中&#xff0c;找到时钟章节 只能观察每个寄存器&#xff0c;才能看到寄存器控制那个外设的时钟 第二找到对应GPIO以及寄存器&#xff1b; 在我板子里面的原理图是 但是TI的提供的库函数是分ABC的&#xff0c;刚开始就不知道怎麽分。GPIO68到GPIO6…

【2017年数据结构真题】

请设计一个算法&#xff0c;将给定的表达式树&#xff08;二叉树&#xff09;转换成等价的中缀表达式&#xff08;通过括号反映次序&#xff09;&#xff0c;并输出。例如&#xff0c;当下列两棵表达式树作为算法的输入时&#xff1a; 输出的等价中缀表达式分别为(ab)(a(-d)) 和…

深入理解注意力机制(上)-起源

一、介绍 近几年自然语言处理有很大的进展&#xff0c;从 2018 年 Google 推出的 BERT&#xff0c;到后来的 GPT、ChatGPT 等&#xff0c;这些模型当时能取得这样的成果&#xff0c;除了庞大的数据量及损害资源外&#xff0c;最重要的是的就是背后的Transformer模型&#xff0c…

开源博客项目Blog .NET Core源码学习(6:雪花算法)

Blog .NET项目中有多种数据类生成对象实例时需要唯一标识&#xff0c;一般做法要么使用GUID&#xff0c;也可以保存到数据库时使用数据库表的自增长ID&#xff0c;也可以自定义规则以确保产生不重复的唯一标识&#xff0c;而在Blog .NET项目中使用雪花算法生成唯一标识。   关…

Python中,我们可以使用pandas和numpy库对Excel数据进行预处理,包括读取数据、数据清洗、异常值剔除等

文章目录 一、什么是数据预处理二、对excel数据进行详细的数据预处理操作总结 一、什么是数据预处理 数据预处理是一种对数据进行清洗、整理、转换等操作的过程&#xff0c;旨在提高数据质量&#xff0c;使其适应模型的需求&#xff0c;从而改进数据挖掘或机器学习的结果。 数…

智慧卫生间

智慧卫生间 系统组成智慧卫生间系统结构图门锁感应开关开关量采集模块中控主机服务端/云平台 API文档获取ApiKey/SecretKey获取Access_token获取卫生间实时数据返回说明 系统组成 智慧卫生间系统结构图 #mermaid-svg-JRsKYT6nIM1tYip1 {font-family:"trebuchet ms",…

贪吃蛇游戏

一、创建新项目 创建一个新的项目&#xff0c;并命名。 创建一个名为images的文件夹用来存放游戏相关图片。 然后再在项目的src文件下创建一个com.xxx.view的包用来存放所有的图形界面类&#xff0c; 创建一个com.xxx.controller的包用来存放启动的入口类(控制类) 二、游戏界…

Kafka 集群如何实现数据同步?

哈喽大家好&#xff0c;我是咸鱼 最近这段时间比较忙&#xff0c;将近一周没更新文章&#xff0c;再不更新我那为数不多的粉丝量就要库库往下掉了 T﹏T 刚好最近在学 Kafka&#xff0c;于是决定写篇跟 Kafka 相关的文章&#xff08;文中有不对的地方欢迎大家指出&#xff09;…

Unity2021及以上 启动或者禁用自动刷新

Unity 2021以以上启动自动刷新 Edit---> Preferences--> Asset Pipline --> Auto Refresh 禁用的结果 如果不启动自动刷新在Project面板选择Refresh是不会刷新已经修改后的脚本的。

数据挖掘复盘——apriori

read_csv函数返回的数据类型是Dataframe类型 对于Dataframe类型使用条件表达式 dfdf.loc[df.loc[:,0]2]df: 这是一个DataFrame对象的变量名&#xff0c;表示一个二维的表格型数据结构&#xff0c;类似于电子表格或SQL表。 df.loc[:, 0]: 这是使用DataFrame的.loc属性来进行…

一文了解Word2vec 阐述训练流程

一文了解Word2vec 阐述训练流程 个性嵌入&#xff08;Personality Embeddings&#xff09; 词嵌入&#xff08;Word Embeddings&#xff09; 嵌入向量效果分析 语言模型 模型介绍 模型训练 Word2vec训练方法 CBOW方法 Skip-gram方法 CBOW方法与Skip-gram方法总结 重构…

nodejs+vue慢性胃炎健康管理系统的设计与实现-微信小程序-安卓-python-PHP-计算机毕业设计

随着科学技术的飞速发展&#xff0c;各行各业都在努力与现代先进技术接轨&#xff0c;通过科技手段提高自身的优势&#xff1b;对于慢性胃炎健康管理系统当然也不能排除在外&#xff0c;随着网络技术的不断成熟&#xff0c;带动了慢性胃炎健康管理系统&#xff0c; 系统首页、个…

AtCoder Beginner Contest 329 题解A~F

A - Spread 输入字符串&#xff0c;字符之间加上空格输出 B - Next 输出数组当中第二大的数 C - Count xxx 统计每个字符出现过的最长长度&#xff0c;再累加即可 #include<bits/stdc.h> #pragma GCC optimize("Ofast") #define INF 0x3f3f3f3f #define I…

【面试经典150 | 算术平方根】

文章目录 写在前面Tag题目来源解题思路方法一&#xff1a;数学表达式方法二&#xff1a;二分法 其他语言python3 写在最后 写在前面 本专栏专注于分析与讲解【面试经典150】算法&#xff0c;两到三天更新一篇文章&#xff0c;欢迎催更…… 专栏内容以分析题目为主&#xff0c;并…