如何实现“ BottomNavigationView”,但在文本旁边而不是堆叠图标的位置?

时间:2019-02-11 08:26:37

标签: java android text icons bottomnavigationview

我正在开发一个应用,并且已经在我的“ activity_main.xml”布局中实现了BottomNavigationView,但是在看到Material.io的指南后,我注意到{{{ 3}},而不是堆叠在一起。

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

我尝试访问BottomNavigationMenuView,但仍在学习Java类。

这是我的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创建了一个自定义类。

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.
}
} 

text

我希望bottomNavigation在文本旁边有图标,而不是尽可能堆叠。谢谢!

1 个答案:

答案 0 :(得分:0)

我发现这个库实现了水平字体和图标,而且很棒。这是link