效果图：
一、新建一个工程
二、在activity_main.xlm文件中插入如下代码
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MainActivity"></LinearLayout>
为了防止小白不清楚代码的构建，我接下来部分代码会加入图片来解释
三、在Design视图中加入ViewPager和BottNavigationView控件
注：BottNavigationView控件是需要先下载的，用之前保持网络畅通
下载之后保存并退出，然后再进入软件，BottNavigationView控件就可以使用了。如果不退出的话，此控件虽然显示，但无属性。
成果图如下：
四、接下来，我们添加底部导航的内容，而添加的内容是通过菜单项来完成的。所以我们新建一个菜单项。
**1.**点击res目录下的new目录下的Android Resource Directory目录，把Resource type改成menu。然后点击OK
2.之后我们新建一个菜单的文件：
在刚刚建好的menu目录下右键选择new目录下的Menu resource file，添入文件名。（读者自己随意）
五、我们现在要添加底部导航栏的图片和文字（读者可以自己找图片添加）
**1、**首先我在drawable目录下添加三个Vector Asset。（具体怎么添加，以及Vector Asset的作用和功能我在我的一篇博文有详细的讲解。
2、接下来添加菜单的列表项。现在我们回到菜单（menu）的Text界面，添加id、图片和标题
<item
android:id="@+id/item1"
android:icon="@drawable/ic_arrow_back_black_24dp"
android:title="左界面"></item>
<item
android:id="@+id/item2"
android:icon="@drawable/ic_dehaze_black_24dp"
android:title="主界面"></item>
<item
android:id="@+id/item3"
android:icon="@drawable/ic_arrow_forward_black_24dp"
android:title="右界面"></item>引领图如下：
六、把menu中的内容添加到BottonNavigationView中
在acivity_main改换<androidx.viewpager.widget.ViewPager和<com.google.android.material.bottomnavigation.BottomNavigationView中的代码如下
<androidx.viewpager.widget.ViewPager
android:id="@+id/ViewPager"
android:layout_weight="1"
android:layout_width="match_parent"
android:layout_height="0dp" >
</androidx.viewpager.widget.ViewPager>
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="@+id/BottomNavigationView"
android:background="#00ffff"
app:menu="@menu/menu_main"
android:layout_width="match_parent"
android:layout_height="wrap_content" />注：如果不改比例，布局会不显示。bottomnavigation的背景颜色可以自己随意更改。如果读者觉得不美观，可以自己调整高度和宽度，代码如下
android:scaleX=" "
android:minHeight=" "完成后界面如图所示：
七、把控件和fragment引用到java后端
1、首先定义3个layout
为了接下来的演示清楚，我在每一个layout中都添加了一个控件（读者可以自行添加）我这里分别添加了button/textView/checkBox，添加过程特别简单，只需要把控件拉到布局中即可
2、定义3个fragment，来将3个layout加载到java后端
（1）右键java包新建3个java类
（2）在每一个java类中添加如下代码（不完全一样）
public class left extends Fragment {
@Nullable
@Override
public View onCreateView(@NonNull LayoutInflater inflater , @Nullable ViewGroup container , @Nullable Bundle savedInstanceState) {
View view = inflater.inflate( R.layout.layout1 , container , false );
return view;
}
}引领图：
注：每一个java类中的代码都差不多，唯一不同的就是
View view = inflater.inflate( R.layout.layout1 , container , false )中载入的布局文件不同
3、将ViewPager和BottomNavigationView引用到java后端,以及把每一个layout加载到java后端。
（1）在MainActivity.java中添加如下代码
public class MainActivity extends AppCompatActivity {
ViewPager viewPager;
BottomNavigationView bottomNavigationView;
List<Fragment>fragments;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate( savedInstanceState );
setContentView( R.layout.activity_main );
viewPager=findViewById( R.id.ViewPager );
bottomNavigationView=findViewById( R.id.BottomNavigationView );
fragments=new ArrayList<>( );
fragments.add( new left() );
fragments.add( new middle() );
fragments.add( new right() );
}4、接下来要给ViewPager添加数据，用适配器添加
（1）注意这个地方需要Alt＋Enter两次，分别添加方法和构造函数
操作完成之后重新构建代码如下：
private class myAdatpter extends FragmentPagerAdapter {
private List<Fragment>fragments;
public myAdatpter(FragmentManager fm,List<Fragment>fragments) {
super( fm );
this.fragments=fragments;
}
@Override
public Fragment getItem(int position) {
return fragments.get( position );
}
@Override
public int getCount() {
return fragments.size();
}
}（2）初始化适配器：
在oncreat中加入如下代码
myAdatpter adatpter=new myAdatpter( getSupportFragmentManager(),fragments );
viewPager.setAdapter( adatpter );引领图：
如果这些步骤你都做完，运行程序你会发现fragment和item不联动，接下来我们解决上下不联动的问题
八、item和fragment联动
1、列表项选择的监听事件：
在MainActivity.java中的oncreat方法中添加列表项的监听事件
bottomNavigationView.setOnNavigationItemSelectedListener( new BottomNavigationView.OnNavigationItemSelectedListener() {
@Override
public boolean onNavigationItemSelected(@NonNull MenuItem menuItem) {
switch (menuItem.getItemId()) {
case R.id.item1:
viewPager.setCurrentItem( 0 );
break;
case R.id.item2:
viewPager.setCurrentItem( 1 );
break;
case R.id.item3:
viewPager.setCurrentItem( 2 );
break;
default:
break;
}
return true;
}
} );引领图：
现在你运行程序你会发现下面图标点击可以带着上面动，但是上边页面滑动下边却不一起动，别着急，接下来就解决这个情况！
2、ViewPager的选择事件：
（1）首先定义一个菜单项，来获取菜单的状态（选中的就是）
（2）在MainActivity.java中的oncreat方法中添加ViewPager的选择事件，不过要注意在上文的列表项的监听事件的类的外面写
viewPager.addOnPageChangeListener( new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position , float positionOffset , int positionOffsetPixels) {
//滚动的时候
}
@Override
public void onPageSelected(int position) {
//选择的时候
if (menuItem == null) {
menuItem = bottomNavigationView.getMenu().getItem( 0 );
}
menuItem.setChecked( false );
menuItem = bottomNavigationView.getMenu().getItem( position );
menuItem.setChecked( true );
}
@Override
public void onPageScrollStateChanged(int state) {
//状态改变的时候
}
} );引领图
好了，代码编写到这里就完了，快快运行到你的手机上试试效果吧，如果还有什么不清楚的，欢迎留言讨论
