• [Android]创建TabBar


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

    1.添加依赖项到build.gradle

    1. dependencies {
    2.     // ...
    3.     implementation("com.google.android.material:material:1.8.0")
    4.     implementation("androidx.viewpager2:viewpager2:1.0.0")
    5. }

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

    1. "1.0" encoding="utf-8"?>
    2. xmlns:android="http://schemas.android.com/apk/res/android"
    3. xmlns:app="http://schemas.android.com/apk/res-auto"
    4. android:layout_width="match_parent"
    5. android:layout_height="match_parent"
    6. android:orientation="vertical">
    7. android:id="@+id/viewPager"
    8. android:layout_width="match_parent"
    9. android:layout_height="0dp"
    10. android:layout_weight="1" />
    11. android:id="@+id/tabLayout"
    12. android:layout_width="match_parent"
    13. android:layout_height="wrap_content"
    14. app:tabMode="fixed"
    15. app:tabGravity="fill"
    16. app:tabIndicatorHeight="0dp" />

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

    1. package com.example.gatestdemol.tabbar
    2. import androidx.appcompat.app.AppCompatActivity
    3. import android.os.Bundle
    4. import androidx.fragment.app.Fragment
    5. import androidx.fragment.app.FragmentActivity
    6. import androidx.viewpager2.adapter.FragmentStateAdapter
    7. import com.example.gatestdemol.databinding.ActivityTabBarBinding
    8. import com.google.android.material.tabs.TabLayoutMediator
    9. class TabBarActivity : AppCompatActivity() {
    10. private lateinit var binding: ActivityTabBarBinding
    11. override fun onCreate(savedInstanceState: Bundle?) {
    12. super.onCreate(savedInstanceState)
    13. // setContentView(R.layout.activity_tab_bar)
    14. binding = ActivityTabBarBinding.inflate(layoutInflater)
    15. setContentView(binding.root)
    16. val adapter = ViewPagerAdapter(this)
    17. binding.viewPager.adapter = adapter
    18. TabLayoutMediator(binding.tabLayout, binding.viewPager) { tab, position ->
    19. tab.text = when(position) {
    20. 0 -> "首页"
    21. 1 -> "分类"
    22. 2 -> "我的"
    23. else -> null
    24. }
    25. }.attach()
    26. }
    27. private inner class ViewPagerAdapter(fa: FragmentActivity) : FragmentStateAdapter(fa) {
    28. override fun getItemCount(): Int {
    29. return 3
    30. }
    31. override fun createFragment(position: Int): Fragment {
    32. return when(position) {
    33. 0 -> HomeFragment()
    34. 1 -> CategoryFragment()
    35. 2 -> ProfileFragment()
    36. else -> Fragment()
    37. }
    38. }
    39. }
    40. }

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

    4.创建对应的Fragment类

    1. package com.example.gatestdemol.tabbar
    2. import android.os.Bundle
    3. import android.view.LayoutInflater
    4. import android.view.View
    5. import android.view.ViewGroup
    6. import androidx.fragment.app.Fragment
    7. import com.example.gatestdemol.databinding.FragmentHomeBinding
    8. class HomeFragment: Fragment() {
    9. private var binding: FragmentHomeBinding? = null
    10. override fun onCreateView(
    11. inflater: LayoutInflater,
    12. container: ViewGroup?,
    13. savedInstanceState: Bundle?
    14. ): View? {
    15. binding = FragmentHomeBinding.inflate(inflater,container,false)
    16. return binding?.root
    17. }
    18. override fun onDestroy() {
    19. super.onDestroy()
    20. binding = null
    21. }
    22. }
    1. class CategoryFragment : Fragment() {
    2. // 实现分类Fragment的布局和逻辑
    3. }
    4. class ProfileFragment : Fragment() {
    5. // 实现我的Fragment的布局和逻辑
    6. }

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

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

  • 相关阅读:
    javaScript数组和对象相互转换
    java计算机毕业设计全国消费水平展示平台源码+数据库+系统+lw文档+mybatis+运行部署
    client-go实战之九:手写一个kubernetes的controller
    apifox使用文档之环境变量 / 全局变量 / 临时变量附apifox学习路线图
    官宣!苏州吴江开发区上线电子劳动合同平台
    网络安全(黑客)—2024自学
    Linux系统编程(二):文件和目录
    Redis缓存使用技巧和设计方案
    【网络编程】UDP Socket编程
    代码随想录算法训练营 动态规划part08
  • 原文地址:https://blog.csdn.net/u012881779/article/details/134431552