如何更改圖標右側的底部導航文本外觀

Question

我想創建一個底部導航欄，其中文本應與圖標右側對齊。 默認實現顯示圖標下方的文本。

XML：

<com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottom_nav_bar"
        style="@style/Widget.MaterialComponents.BottomNavigationView.Colored"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:itemIconTint="@color/selector_icon_tint_bottom_nav"
        app:itemTextColor="@color/selector_icon_tint_bottom_nav"
        app:labelVisibilityMode="labeled"
        app:menu="@menu/bottom_nav" />

bottom_nav.xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/home_nav"
        android:contentDescription="@string/home"
        android:icon="@drawable/ic_home"
        android:title="@string/home" />
    <item
        android:id="@+id/live_tv_nav"
        android:contentDescription="@string/live_tv"
        android:icon="@drawable/ic_live_tv"
        android:title="@string/live_tv" />
    <item
        android:id="@+id/vod_nav"
        android:contentDescription="@string/vod"
        android:icon="@drawable/ic_vod"
        android:title="@string/vod" />
    <item
        android:id="@+id/broadcast_nav"
        android:contentDescription="@string/search"
        android:icon="@drawable/ic_search"
        android:title="@string/search" />
</menu>

Answer 1

我為此使用了 TabLayout ）

Answer 2

我已經使用 Tab 布局和 Viewpager 實現了它，它有點長，但最后它完成了我正在尋找的工作，如果有人需要這個可以通過以下步驟 go

第一步。 activity_home.xml

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <data>
        <variable
            name="model"
            type="com.demo.android.viewmodel.HomeActViewModel" />
    </data>

<androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <androidx.viewpager.widget.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        app:layout_constraintBottom_toTopOf="@+id/tabLayout"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.0"/>


    <com.google.android.material.tabs.TabLayout
        android:id="@+id/tabLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabMode="fixed"
        android:background="@color/colorGrey"
        android:elevation="2dp"
        app:tabIndicatorHeight="0dp"
        android:minHeight="?attr/actionBarSize"
        app:layout_constraintBottom_toBottomOf="parent"/>


</androidx.constraintlayout.widget.ConstraintLayout>

</layout>

第二步。 HomeActivity.kt

package com.demo.android.view

import android.view.View
import android.widget.ImageView
import android.widget.TextView
import androidx.activity.viewModels
import androidx.fragment.app.Fragment
import androidx.fragment.app.FragmentTransaction
import com.demo.android.R
import com.demo.android.databinding.ActivityHomeBinding
import com.demo.android.utils.setImageTint
import com.demo.android.utils.toast
import com.demo.android.view.adapter.PagerAdapter
import com.demo.android.viewmodel.HomeActViewModel
import com.google.android.material.tabs.TabLayout
import com.google.android.material.tabs.TabLayout.OnTabSelectedListener
import dagger.hilt.android.AndroidEntryPoint
import kotlinx.android.synthetic.main.activity_home.*


@AndroidEntryPoint
class HomeActivity() : BaseActivity<ActivityHomeBinding>(R.layout.activity_home) {

    val viewModel by viewModels<HomeActViewModel>()
    override var menuId: Int
        get() = TODO("Not yet implemented")
        set(value) {}

    override fun onViewModelSetup() {
        super.onViewModelSetup()
        with(viewModel) {
            binding.model = this
            message.observe {
                toast(it)
            }

            val pagerAdapter = PagerAdapter(supportFragmentManager, this@HomeActivity)
            viewpager.adapter = pagerAdapter
            tabLayout.setupWithViewPager(viewpager)

            for (i in 0 until tabLayout.tabCount) {
                val tab = tabLayout.getTabAt(i)
                tab!!.customView = pagerAdapter.getTabView(i)
            }
            tabLayout.setOnTabSelectedListener(object : OnTabSelectedListener {
                override fun onTabSelected(tab: TabLayout.Tab) {
                    val tv = tab.customView?.findViewById(R.id.textView) as TextView
                    val img = tab.customView?.findViewById(R.id.imageView) as ImageView
                    tv.visibility = View.VISIBLE
                    tv.setTextColor(resources.getColor(R.color.colorRed))
                    img.setImageTint(resources.getColor(R.color.colorRed))
                }

                override fun onTabUnselected(tab: TabLayout.Tab?) {
                    val tv = tab?.customView?.findViewById(R.id.textView) as TextView
                    val img = tab.customView?.findViewById(R.id.imageView) as ImageView
                    tv.visibility = View.GONE
                    img.setImageTint(resources.getColor(R.color.unselectColor))
                }

                override fun onTabReselected(tab: TabLayout.Tab?) {

                }
            })
    }
 }
}

第三步。 PagerAdapter.kt

package com.ginoweb.android.view.adapter


import android.content.Context
import android.view.LayoutInflater
import android.view.View
import android.widget.ImageView
import android.widget.TextView
import androidx.fragment.app.Fragment
import androidx.fragment.app.FragmentManager
import androidx.fragment.app.FragmentPagerAdapter
import com.demo.android.R
import com.demo.android.model.customTab
import com.demo.android.utils.setImage
import com.demo.android.utils.setImageTint
import com.demo.android.view.fragments.DashboardFragment
import com.demo.android.view.fragments.ProfileFragment



internal class PagerAdapter(fm: FragmentManager?, context: Context) :
    FragmentPagerAdapter(fm!!) {
    var tabTitles = arrayOf(customTab(R.drawable.ic_baseline_home_24,"Home"), customTab(R.drawable.ic_profile,"Profile"))
    var context: Context

    init {
        this.context = context
    }

    override fun getCount(): Int {
        return tabTitles.size
    }

    override fun getItem(position: Int): Fragment {
        when (position) {
            0 -> return DashboardFragment()
            1 -> return ProfileFragment()
        }
        return DashboardFragment()
    }

    override fun getPageTitle(position: Int): CharSequence {
        return tabTitles[position].title
    }

    fun getTabView(position: Int): View {
        val tab: View = if(position == 0){
            LayoutInflater.from(context).inflate(R.layout.tab_start_layout,null)
        }else{
            LayoutInflater.from(context).inflate(R.layout.tab_end_layout,null)
        }
        val tv = tab.findViewById(R.id.textView) as TextView
        val img = tab.findViewById(R.id.imageView) as ImageView
        tv.text = tabTitles[position].title
        img.setImage(tabTitles[position].img)
        if(position == 1){
            tv.visibility=View.GONE
            img.setImageTint(context.resources.getColor(R.color.unselectColor))
        }else{
            tv.setTextColor(context.resources.getColor(R.color.colorRed))
            img.setImageTint(context.resources.getColor(R.color.colorRed))
        }

        return tab
    }
}

第四步。 tab_start_layout.xml

<?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="wrap_content">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="24dp"
        android:layout_height="24dp"
        android:layout_marginTop="14dp"
        android:layout_marginBottom="14dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@drawable/ic_baseline_home_24" />

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:text="Home"
        android:textColor="@color/md_black_1000"
        android:visibility="visible"
        app:layout_constraintBottom_toBottomOf="@+id/imageView"
        app:layout_constraintStart_toEndOf="@+id/imageView"
        app:layout_constraintTop_toTopOf="@+id/imageView" />
</androidx.constraintlayout.widget.ConstraintLayout>

第五步。 tab_end_layout.xml

<?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="wrap_content">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="24dp"
        android:layout_height="24dp"
        android:layout_marginTop="14dp"
        android:layout_marginEnd="8dp"
        android:layout_marginBottom="14dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/textView"
        app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@drawable/ic_baseline_home_24"
        />

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Home"
        android:visibility="visible"
        android:textColor="@color/md_black_1000"
        app:layout_constraintBottom_toBottomOf="@+id/imageView"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="@+id/imageView" />
</androidx.constraintlayout.widget.ConstraintLayout>

第六步。 customTab.kt

package com.demo.android.model

import android.widget.ImageView
class customTab( val img:Int,val title:String)

第七步。 現在這是它的樣子

Answer 3

將導航布局重力更改為：

android:layout_gravity="end"

導航視圖

<com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottom_nav_bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="end"
        app:itemIconTint="@color/selector_icon_tint_bottom_nav"
        app:itemTextColor="@color/selector_icon_tint_bottom_nav"
        app:labelVisibilityMode="labeled"
        app:menu="@menu/bottom_nav" />