Android Kotlin 底部菜单栏

LoginSuccessActivity布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:orientation="vertical"
    tools:context=".LoginSuccessActivity"
    tools:ignore="MissingConstraints">

    <include layout="@layout/toolbar" />

    <androidx.viewpager2.widget.ViewPager2
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" />

    <View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="@color/view_white" />

    <com.google.android.material.tabs.TabLayout
        android:id="@+id/tab_layout"
        android:layout_width="match_parent"
        android:layout_height="55dp"
        app:tabGravity="fill"
        app:tabIndicatorFullWidth="false"
        app:tabIndicatorGravity="center"
        app:tabIndicatorHeight="0dp"
        app:tabMaxWidth="0dp"
        app:tabMode="fixed"
        app:tabRippleColor="@android:color/transparent"
        app:tabSelectedTextColor="@color/colorPrimary"
        app:tabTextColor="@android:color/darker_gray" />
</LinearLayout>

toolbar界面

<?xml version="1.0" encoding="utf-8"?>
<androidx.appcompat.widget.Toolbar 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:id="@+id/toolbar"
    android:layout_height="?attr/actionBarSize"
    android:background="@color/colorPrimary"
    app:popupTheme="@style/AppTheme.PopupOverlay"
    tools:ignore="PrivateResource">

    <TextView
        android:id="@+id/toolbar_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:textColor="@color/white"
        android:textSize="16sp"/>
    <ImageView
        android:id="@+id/iv_search"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="right"
        android:layout_marginRight="15dp"/>
</androidx.appcompat.widget.Toolbar>

colors颜色

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="purple_200">#FFBB86FC</color>
    <color name="purple_500">#FF6200EE</color>
    <color name="purple_700">#FF3700B3</color>
    <color name="teal_200">#FF03DAC5</color>
    <color name="teal_700">#FF018786</color>
    <color name="black">#FF000000</color>
    <color name="white">#FFFFFFFF</color>


    <color name="colorPrimary">#6200EE</color>
    <color name="colorPrimaryDark">#3700B3</color>
    <color name="colorAccent">#03DAC5</color>
    <color name="view_white">#e8e8e8</color>
    <color name="light_blue_600">#FF039BE5</color>
    <color name="light_blue_900">#FF01579B</color>
    <color name="light_blue_A200">#FF40C4FF</color>
    <color name="light_blue_A400">#FF00B0FF</color>
    <color name="black_overlay">#66000000</color>


</resources>

styles样式

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

    <style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />

    <style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />

    <style name="Widget.Theme.APP.ButtonBar.Fullscreen" parent="">
        <item name="android:background">@color/black_overlay</item>
        <item name="android:buttonBarStyle">?android:attr/buttonBarStyle</item>
    </style>

</resources>

Activity

package com.example.app

import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import androidx.fragment.app.Fragment
import androidx.viewpager2.adapter.FragmentStateAdapter
import com.example.app.databinding.ActivityLoginSuccessBinding
import com.example.app.databinding.ActivityMainBinding
import com.google.android.material.tabs.TabLayout
import com.google.android.material.tabs.TabLayoutMediator

/**
 *@author: jst
 *@date:   2023/6/19 0000 18:01
 *@desc:   主页
 */
class LoginSuccessActivity : AppCompatActivity() {
    //标题
    private val titles = arrayOf("首页", "页一", "页二", "页三")
    private val fragmentList : MutableList<Fragment> = ArrayList()
    lateinit var binding: ActivityLoginSuccessBinding
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityLoginSuccessBinding.inflate(getLayoutInflater());
        setContentView(binding.getRoot())
        initViews();
    }

    /**
     * 初始化控件
     */
    private fun initViews() {
        //初始化fragment
        fragmentList.add(HomeFragment())
        fragmentList.add(GroundingFragment())
        fragmentList.add(PackFragment())
        fragmentList.add(DeliveryFragment())
        //初始化viewPage
        binding.viewPager!!.adapter = object:FragmentStateAdapter(this){
            override fun getItemCount(): Int {
                return fragmentList.size
            }

            override fun createFragment(position: Int): Fragment {
                return  fragmentList[position]
            }
        }
        binding.viewPager.offscreenPageLimit = 3
        val tabLayoutMediator = TabLayoutMediator(
            binding.tabLayout,binding.viewPager, TabLayoutMediator.TabConfigurationStrategy { tab: TabLayout.Tab, position: Int ->
                tab.text = titles[position]
            })
        tabLayoutMediator.attach()
    }
}

需要多少页就键多少Fragment布局 

界面都差不多，我这就只展示一个

HomeFragment

package com.example.app

import android.os.Bundle
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import androidx.fragment.app.Fragment
import com.example.app.R

/**
 *@author: jst
 *@date:   2023/6/19 0000 18:01
 *@desc:   首页
 */
class HomeFragment : Fragment(){
    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        val view = LayoutInflater.from(context).inflate(R.layout.fm_home, null)
        return view
    }
}

fm_home.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="这是首页"
        android:textColor="@color/colorPrimary"
        android:textSize="24sp"
        app:layout_constraintLeft_toRightOf="parent"
        app:layout_constraintRight_toLeftOf="parent"
        app:layout_constraintTop_toBottomOf="parent"
        app:layout_constraintBottom_toTopOf="parent"/>

</androidx.constraintlayout.widget.ConstraintLayout>

效果