RadioGroup和Fragment实现底部导航栏(Kotlin)

最新推荐文章于 2024-04-15 07:45:00 发布

扭不开瓶盖的三水

最新推荐文章于 2024-04-15 07:45:00 发布

阅读量674

点赞数 1

分类专栏： Android 文章标签： kotlin android 开发语言

本文链接：https://blog.csdn.net/mayday_sanshui/article/details/126248451

版权

Android 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

编写activity_main.xml文件，其中包括FrameLayout布局和RadioGroup控件，通过向FrameLayout中添加fragment来实现导航栏的跳转。

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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"
   tools:context=".ui.MainActivity">

   <FrameLayout
       android:id="@+id/frglayout"
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       app:layout_constraintBottom_toTopOf="@+id/rg" />

   <RadioGroup
       android:id="@+id/rg"
       android:layout_width="match_parent"
       android:layout_height="49dp"
       android:background="#ccffffff"
       android:orientation="horizontal"
       app:layout_constraintBottom_toBottomOf="parent"
       app:layout_constraintStart_toStartOf="parent">

       <RadioButton
           android:id="@+id/rbtn_home"
           style="@style/RadioGroupButtonStyle"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:checked="true"
           android:drawableTop="@drawable/nav_image_home"
           android:text="Home"
           android:textColor="@color/radiobutton" />

       <RadioButton
           android:id="@+id/rbtn_more"
           style="@style/RadioGroupButtonStyle"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:drawableTop="@drawable/nav_image_more"
           android:text="More"
           android:textColor="@color/radiobutton" />
   </RadioGroup>
</androidx.constraintlayout.widget.ConstraintLayout>

创建"Home"和"More"按钮对应的fragment

class HomeFragment : Fragment() {
   private var _binding: FragmentHomeBinding? = null
   private val binding get() = _binding
   override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
   		_binding = FragmentHomeBinding.inflate(inflater, container, false)
   		val view = binding?.root
   		return view
   	}
}

class MoreFragment:Fragment() {
    private var _binding: FragmentMoreBinding?=null
    private val binding get() = _binding
    override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
        _binding = FragmentMoreBinding.inflate(inflater, container, false)
        val view = binding?.root
        return view
    }
}

创建Fragment对应的布局文件：fragment_home.xml和fragment_more.xml，这里不做具体的演示，这两个文件用来实现"Home"、"More"的UI界面
在MainActivity中设置默认的fragment(即第一次进入app展示的页面)，和checked事件

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        val binding = ActivityMainBinding.inflate(layoutInflater)
        val view = binding.root
        setContentView(view)
        binding.apply {
            //设置checked事件
            rg.setOnCheckedChangeListener(RadioGroup.OnCheckedChangeListener { p0: RadioGroup?, p1: Int ->
                val fragmentManager = supportFragmentManager
                val transaction = fragmentManager.beginTransaction()
                if (p1 == R.id.rbtn_home) {
                    transaction.replace(R.id.frglayout, HomeFragment())
                } else {
                    transaction.replace(R.id.frglayout, MoreFragment())
                }
                transaction.commit()
            })
        }
        //设置默认fragment
        initFragment()
    }
    private fun initFragment() {
        val fragmentManager = supportFragmentManager
        val transaction = fragmentManager.beginTransaction()
        //设置HomeFragment为默认
        transaction.replace(R.id.frglayout, HomeFragment())
        transaction.commit()
    }
}