如何实现 "BottomNavigationView" 但图标在文本旁边而不是堆叠？

Question

我正在开发一个应用程序，并且在我的 "activity_main.xml" 布局中实现了 BottomNavigationView，但是在看到 Material.io I noticed that there is an image with icons next to the text 的指导方针之后而不是被堆叠。

我想知道是否可以像那样实现我的底部导航。

我已尝试访问 BottomNavigationMenuView，但我仍在了解 Java classes.

这是我的 activity_main.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:id="@+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">

<com.errorerrorerror.espledwifi.CurvedBottomNavigationView
    android:id="@+id/customBottomBar"
    android:layout_width="match_parent"
    android:layout_height="120dp"
    android:theme="@style/Widget.BottomNavigationView"
    app:itemBackground="@drawable/image_icon_font_bottom_view"
    app:itemIconTint="@color/color_font_icon_bottom_nav"
    app:itemTextColor="@color/color_font_icon_bottom_nav"
    app:labelVisibilityMode="selected"
    app:layout_constraintBottom_toBottomOf="parent"
    app:menu="@menu/bottom_nav_menu" />
</androidx.constraintlayout.widget.ConstraintLayout>

这是我在 MainActivity.java 中的代码。我为 BottomNavigation 创建了自定义 class。

package com.errorerrorerror.espledwifi;

import android.graphics.Color;

import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.util.DisplayMetrics;
import android.util.TypedValue;
import android.view.Menu;
import android.view.View;
import android.view.ViewGroup;
import android.view.ViewOutlineProvider;

import com.errorerrorerror.espledwifi.R;
import 
com.google.android.material.bottomnavigation.BottomNavigationMenuView;


public class MainActivity extends AppCompatActivity
{
@Override
protected void onCreate(Bundle savedInstanceState) {

    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    //Allows transparent status bar//
    getWindow().setStatusBarColor(Color.TRANSPARENT);
    getWindow().getDecorView().setSystemUiVisibility(
            View.SYSTEM_UI_FLAG_LAYOUT_STABLE
                    | View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN);

    //calls menu func
    bottomNavMenu();


}



protected void bottomNavMenu()
{
    CurvedBottomNavigationView curvedBottomNavigationView = findViewById(R.id.customBottomBar);
    //curvedBottomNavigationView.getOutlineProvider();
    BottomNavigationMenuView menuView = (BottomNavigationMenuView)
            curvedBottomNavigationView.getChildAt(0);


    for (int i = 0; i < menuView.getChildCount(); i++ )
    {
        final View iconView = menuView.getChildAt(i).findViewById(com.google.android.material.R.id.icon);

        final ViewGroup.LayoutParams layoutParams = iconView.getLayoutParams();

        final DisplayMetrics displayMetrics = getResources().getDisplayMetrics();

        layoutParams.height = (int)
            TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,20, displayMetrics);

        // set your width here
        layoutParams.width = (int)
                TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 20, displayMetrics);

        iconView.setLayoutParams(layoutParams);
    }
    curvedBottomNavigationView.setPadding(200,20,200,0); // Need to set top padding to 20 so the menu with icons and text shift to the bottom a bit.
}
}

我希望 bottomNavigation 将图标放在文本旁边，而不是堆叠在一起（如果可能的话）。谢谢！

Answer 1

我发现这个库实现了水平字体和图标，它很棒。这里是link。

如何实现 "BottomNavigationView" 但图标在文本旁边而不是堆叠？

How to implement "BottomNavigationView" but with Icon next to the text rather than stacked?

java

icons

android

text

bottomnavigationview