当使用 Android 中的底部导航栏(Bottom Navigation Bar)结合 ViewPager 来实现页面切换时,通常会使用 Fragment 来管理每个页面的内容。以下是一个基础的示例,演示如何实现底部导航栏和 ViewPager 的滑动切换页面。

在这个示例中,我们将创建一个包含三个页面的底部导航栏,每个页面都由一个简单的 Fragment 管理。首先,确保你的项目已经添加了 com.android.support:design 库来支持底部导航栏。

1. 布局文件:activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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=".MainActivity">

    <androidx.viewpager.widget.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@+id/bottomNav" />

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottomNav"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        app:menu="@menu/bottom_nav_menu" />
</RelativeLayout>

2. 菜单文件:res/menu/bottom_nav_menu.xml
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/action_home"
        android:title="Home"
        android:icon="@drawable/ic_home" />
    <item
        android:id="@+id/action_dashboard"
        android:title="Dashboard"
        android:icon="@drawable/ic_dashboard" />
    <item
        android:id="@+id/action_notifications"
        android:title="Notifications"
        android:icon="@drawable/ic_notifications" />
</menu>

3. Fragment 类:HomeFragment.java、DashboardFragment.java、NotificationsFragment.java

这里只展示一个 Fragment 的例子,其他两个类似。
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.fragment.app.Fragment;

public class HomeFragment extends Fragment {

    public View onCreateView(@NonNull LayoutInflater inflater,
                             @Nullable ViewGroup container,
                             @Nullable Bundle savedInstanceState) {
        return inflater.inflate(R.layout.fragment_home, container, false);
    }
}

4. Fragment 布局文件:fragment_home.xml、fragment_dashboard.xml、fragment_notifications.xml

这里只展示一个 Fragment 的例子,其他两个类似。
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Home Fragment"
        android:layout_centerInParent="true"
        android:textSize="20sp" />
</RelativeLayout>

5. MainActivity.java
import android.os.Bundle;
import androidx.annotation.NonNull;
import com.google.android.material.bottomnavigation.BottomNavigationView;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentManager;
import androidx.fragment.app.FragmentPagerAdapter;
import androidx.viewpager.widget.ViewPager;
import androidx.appcompat.app.AppCompatActivity;
import android.view.MenuItem;

public class MainActivity extends AppCompatActivity {

    private ViewPager viewPager;
    private BottomNavigationView bottomNav;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        viewPager = findViewById(R.id.viewPager);
        bottomNav = findViewById(R.id.bottomNav);

        viewPager.setAdapter(new MyPagerAdapter(getSupportFragmentManager()));

        bottomNav.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                switch (item.getItemId()) {
                    case R.id.action_home:
                        viewPager.setCurrentItem(0);
                        return true;
                    case R.id.action_dashboard:
                        viewPager.setCurrentItem(1);
                        return true;
                    case R.id.action_notifications:
                        viewPager.setCurrentItem(2);
                        return true;
                }
                return false;
            }
        });
    }

    private static class MyPagerAdapter extends FragmentPagerAdapter {

        MyPagerAdapter(FragmentManager fm) {
            super(fm);
        }

        @NonNull
        @Override
        public Fragment getItem(int position) {
            switch (position) {
                case 0:
                    return new HomeFragment();
                case 1:
                    return new DashboardFragment();
                case 2:
                    return new NotificationsFragment();
                default:
                    return null;
            }
        }

        @Override
        public int getCount() {
            return 3;
        }
    }
}

这个例子中,我们创建了一个包含三个页面的底部导航栏,每个页面都由一个对应的 Fragment 管理。通过滑动 ViewPager 或点击底部导航栏的图标,可以切换不同的页面。请确保将图标资源(ic_home、ic_dashboard、ic_notifications)添加到你的 res/drawable 目录下。


转载请注明出处:http://www.pingtaimeng.com/article/detail/15185/Android