原生Android打造一个炫酷的底部导航栏

最近浏览各大平台，发现各种导航栏层出不穷，出于好奇心，我也来试试。先上个效果图

代码也简单：首先布局文件

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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.LargeViewActivity">
    <androidx.coordinatorlayout.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <TextView
            android:id="@+id/textView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:text="首页"
            />
        <com.google.android.material.appbar.MaterialToolbar
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="#f0f"
            app:buttonGravity="bottom"
            app:navigationIcon="@drawable/index"
            android:pointerIcon="context_menu"
            android:tooltipText="标题"
            android:textDirection="anyRtl"
            >
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="标题水水水水"
                />
        </com.google.android.material.appbar.MaterialToolbar>

        <com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="控制器"
            app:icon="@drawable/index2"
            android:layout_gravity="right|bottom"
            android:layout_marginBottom="80dp"
            android:layout_marginRight="10dp"
            >

        </com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton>
        <com.google.android.material.bottomappbar.BottomAppBar
            android:id="@+id/bar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom"
            app:backgroundTint="@color/teal_700"
            android:gravity="center"
            app:fabAlignmentMode="center"
            app:fabAnimationMode="slide"
            app:fabCradleMargin="6dp"
            app:fabCradleRoundedCornerRadius="10dp"
            app:fabCradleVerticalOffset="0dp"
            style="@style/Widget.MaterialComponents.BottomAppBar"
            >
            <RadioGroup
                android:id="@+id/navBar"
                android:layout_width="match_parent"
                android:orientation="horizontal"
                android:layout_height="match_parent">
                <RadioButton
                    android:text="首页"
                    style="@style/radio_button_style" />
                <RadioButton
                    style="@style/radio_button_style"
                    android:text="店铺"
                    />
                <RadioButton
                    style="@style/radio_button_style"
                    android:clickable="false"
                    />
                <RadioButton
                    android:text="附近"
                    style="@style/radio_button_style" />
                <RadioButton
                    android:text="我的"
                    style="@style/radio_button_style"
                   />
            </RadioGroup>
        </com.google.android.material.bottomappbar.BottomAppBar>

        <com.google.android.material.floatingactionbutton.FloatingActionButton
            android:id="@+id/fab"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:backgroundTint="@color/teal_200"
            android:tint="@color/white"
            android:src="@drawable/index"
            app:layout_anchor="@id/bar"/>
    </androidx.coordinatorlayout.widget.CoordinatorLayout>
</FrameLayout>

在这说明一些属性的作用

  FloatingActionButton：
  app:layout_anchor="@id/bar"  FloatingActionButton关联的BottomAppBar的id
  BottomAppBar：
  app:fabAlignmentMode="center"  FloatingActionButton 的位置，只有中间和末尾两个
  app:fabAnimationMode="slide" FloatingActionButton滑动时候的动画设置，基本用不上
  app:fabCradleMargin="6dp" FloatingActionButton 与 BottomAppBar 接触的距离
  app:fabCradleRoundedCornerRadius="10dp" FloatingActionButton  接触BottomAppBar 的地方的圆 
  形弧度
  app:fabCradleVerticalOffset="0dp"  FloatingActionButton 距离 BottomAppBar 中心线的距离，其实就是高度偏移量

此处放置了五个RadioButton 的按钮，中间哪个占位置，不起实际作用，屏蔽了点击事件。

    样式和颜色的设置

    <style name="radio_button_style">
        <item name="android:layout_width">0dp</item>
        <item name="android:layout_weight">1</item>
        <item name="android:button">@null</item>
        <item name="android:gravity">center</item>
        <item name="android:layout_height">match_parent</item>
        <item name="android:textColor">@color/notice_rb_text</item>
    </style>

     notice_rb_text.xml 文件 在res/color文件加下面

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@color/white" android:state_checked="false"/>
    <item android:color="#f00" android:state_checked="true"/>
</selector>

下面是activity的代码，此处组件初始化使用了viewbinding （google为亲儿子打造的）

public class LargeViewActivity extends AppCompatActivity {
    ActivityLargeViewBinding largeViewBinding;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
         largeViewBinding = ActivityLargeViewBinding.inflate(getLayoutInflater());
         setContentView(largeViewBinding.getRoot());
        ((RadioButton) largeViewBinding.navBar.getChildAt(0)).setChecked(true);
         largeViewBinding.navBar.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
             @Override
             public void onCheckedChanged(RadioGroup radioGroup, int i) {
                 int index = radioGroup.indexOfChild(largeViewBinding.navBar.findViewById(i));
                 String text = ((RadioButton) largeViewBinding.navBar.findViewById(i)).getText().toString().trim();
                 if(index==2){
                     return;
                 }

                 largeViewBinding.textView.setText(text);
             }
         });
         largeViewBinding.fab.setOnClickListener(new View.OnClickListener() {
             @Override
             public void onClick(View view) {
                 largeViewBinding.textView.setText("炫酷的中间浮动按钮");
             }
         });

    }
}

做的简单，关联fragment这些都没做，底部导航RadioGroup要是不习惯用，可以换成自己喜欢的组件，位置控制好就行。