ViewPager中添加底部导航栏

# 1. 简介

## 1.1 ViewPager的基本概念

ViewPager是Android平台上一个常用的视图控件，用于实现多页面的滑动切换效果。它能够有效地展示多个页面，让用户可以通过左右滑动来切换页面，非常适合用于展示多个相关页面、图片轮播广告等场景。

ViewPager的基本原理是将多个页面放入一个容器中，通过手势滑动或者点击的方式来切换页面。每个页面以一个Fragment的形式存在，可以灵活地添加、删除和替换各个页面。

## 1.2 底部导航栏的作用和需求

底部导航栏是移动应用中常见的一种导航方式，通常放置在屏幕底部，用于快速切换不同的功能页面。底部导航栏可以为用户提供直观的导航入口，方便用户在不同页面之间进行快速切换，提高用户体验和操作效率。

在结合ViewPager使用时，底部导航栏可以与ViewPager的页面进行关联，通过点击导航栏的按钮来实现页面的切换。同时，底部导航栏还需要具备选中和未选中状态的样式切换功能，以便用户能够清晰地知道当前所处的页面。

在接下来的步骤中，我们将详细介绍如何在ViewPager中添加底部导航栏，并实现底部导航栏的样式定制和页面切换功能。

# 2. 实现步骤

ViewPager结合底部导航栏的实现步骤如下：

### 2.1 创建ViewPager

首先，在布局文件中添加ViewPager组件：

<androidx.viewpager.widget.ViewPager
    android:id="@+id/viewPager"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1" />

### 2.2 设置FragmentPagerAdapter

创建适配器FragmentPagerAdapter，并将其设置给ViewPager：

public class MyPagerAdapter extends FragmentPagerAdapter {
    private static final int NUM_PAGES = 3;

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

    @Override
    public Fragment getItem(int position) {
        // 返回对应位置的Fragment
        return MyFragment.newInstance(position);
    }

    @Override
    public int getCount() {
        // 返回Fragment的数量
        return NUM_PAGES;
    }
}

然后在Activity中设置适配器给ViewPager：

MyPagerAdapter pagerAdapter = new MyPagerAdapter(getSupportFragmentManager());
ViewPager viewPager = findViewById(R.id.viewPager);
viewPager.setAdapter(pagerAdapter);

### 2.3 添加底部导航栏的布局

在布局文件中添加底部导航栏的布局，一般使用LinearLayout结合ImageButton：

<LinearLayout
    android:id="@+id/bottomNavigation"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:background="?android:attr/windowBackground">
    <ImageButton
        android:id="@+id/tab1"
        android:layout_width="0dp"
        android:layout_weight="1"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_tab1_selector"
        android:contentDescription="@string/tab1" />
    <!-- 添加其他tab按钮 -->
</Line