如何为Android应用创建一个带有指示器的自定义底部导航栏？

Android 中实现带指示器的自定义底部导航栏，可使用 ViewPager2 和 BottomNavigationView。

一、引言

在现代移动应用中，底部导航栏是一种常见的用户界面组件，用于在不同功能模块间快速切换，为了提升用户体验，许多应用还会在底部导航栏上添加指示器，以显示当前选中的菜单项，本文将详细介绍如何在Android应用中实现一个带有指示器的自定义底部导航栏。

二、准备工作

1、创建项目: 使用Android Studio创建一个新的项目。

2、设计布局: 在res/layout目录下创建一个名为activity_main.xml的布局文件，并添加一个FrameLayout作为容器，用于承载不同的Fragments。

3、定义导航栏布局: 在res/layout目录下创建一个名为navigation_bar.xml的布局文件，定义底部导航栏的结构。

三、定义导航栏布局

导航栏布局通常包含多个按钮和一个指示器，以下是一个简单的示例：

<!-res/layout/navigation_bar.xml -->
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/navigationBar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:background="#FFFFFF"
    android:paddingTop="10dp"
    android:paddingBottom="10dp">
    <Button
        android:id="@+id/navButton1"
        android:layout_weight="1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Home"/>
    <View
        android:id="@+id/indicator"
        android:layout_width="wrap_content"
        android:layout_height="5dp"
        android:background="#FF0000"
        android:layout_gravity="center_vertical"/>
    <Button
        android:id="@+id/navButton2"
        android:layout_weight="1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Search"/>
    <Button
        android:id="@+id/navButton3"
        android:layout_weight="1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Profile"/>
</LinearLayout>

在这个布局中，我们使用了LinearLayout来水平排列三个按钮，并在中间放置了一个红色的指示器。

四、编写Java代码

我们需要在MainActivity中初始化导航栏，并为按钮设置点击事件监听器，以便在点击时更新指示器的位置和加载相应的Fragment。

// MainActivity.java
package com.example.myapp;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.FragmentManager;
import androidx.fragment.app.FragmentTransaction;
public class MainActivity extends AppCompatActivity {
    private Button navButton1, navButton2, navButton3;
    private View indicator;
    private int currentItem = 0; // 记录当前选中的菜单项索引
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        // 初始化导航栏按钮和指示器
        navButton1 = findViewById(R.id.navButton1);
        navButton2 = findViewById(R.id.navButton2);
        navButton3 = findViewById(R.id.navButton3);
        indicator = findViewById(R.id.indicator);
        // 设置默认选中第一个按钮
        selectItem(0);
        // 为按钮设置点击事件监听器
        navButton1.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                selectItem(0);
            }
        });
        navButton2.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                selectItem(1);
            }
        });
        navButton3.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                selectItem(2);
            }
        });
    }
    // 更新指示器位置并加载相应的Fragment的方法
    private void selectItem(int position) {
        // 移动指示器到新的位置
        LinearLayout.LayoutParams layoutParams = (LinearLayout.LayoutParams) indicator.getLayoutParams();
        layoutParams.leftMargin = position * (int)(getResources().getDisplayMetrics().widthPixels / 3);
        indicator.setLayoutParams(layoutParams);
        // 更新当前选中的菜单项索引
        currentItem = position;
        // 根据选中的菜单项加载相应的Fragment
        switch (position) {
            case 0:
                loadFragment(new HomeFragment());
                break;
            case 1:
                loadFragment(new SearchFragment());
                break;
            case 2:
                loadFragment(new ProfileFragment());
                break;
        }
    }
    // 加载Fragment的方法
    private void loadFragment(androidx.fragment.app.Fragment fragment) {
        FragmentManager fragmentManager = getSupportFragmentManager();
        FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction();
        fragmentTransaction.replace(R.id.container, new HomeFragment()); // 替换为实际的容器ID
        fragmentTransaction.commit();
    }
}

在上面的代码中，我们首先初始化了导航栏按钮和指示器，然后设置了默认选中第一个按钮，我们为每个按钮设置了点击事件监听器，当按钮被点击时，会调用selectItem方法来更新指示器的位置并加载相应的Fragment，我们定义了一个loadFragment方法，用于加载指定的Fragment。

五、创建Fragment类

为了使示例更加完整，我们还需要创建三个简单的Fragment类：HomeFragment、SearchFragment和ProfileFragment，这些Fragment可以在res/layout目录下分别创建对应的布局文件，并在各自的onCreateView方法中加载这些布局。

// HomeFragment.java
package com.example.myapp;
import android.os.Bundle;
import androidx.fragment.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
public class HomeFragment extends Fragment {
    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        return inflater.inflate(R.layout.fragment_home, container, false);
    }}

同样的方式，你可以创建SearchFragment和ProfileFragment，注意将它们各自的布局文件命名为fragment_search.xml和fragment_profile.xml。