桃词典 Peach Dictionary 简易英语词典app开发 安卓软件开发 Part 7

前文：

桃词典 Peach Dictionary 简易英语词典app开发 安卓软件开发 Part 6

导航：

桃词典 Peach Dictionary 简易英语词典app开发 安卓软件开发 The End 导航页及收尾工作 

三、搭建主界面

（1）将先前的temp activity删除，替换为Bottom Navigaton Activity ，这我我命名为ButtonNav。

（2）在drawable下找到menu文件夹，对里面的 bottom_nav_menu 进行修改。

bottom_nav_menu.xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:id="@+id/tab_one"
        android:icon="@drawable/ic_baseline_home_24"
        android:title="首页" />

    <item
        android:id="@+id/tab_two"
        android:icon="@drawable/ic_baseline_person_24"
        android:title="我的" />

</menu>

其中需要添加的矢量图为：

@drawable/ic_baseline_home_24
@drawable/ic_baseline_person_24

（3）对activity_button_nav.xml进行修改

activity_button_nav.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingTop="?attr/actionBarSize">

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/nav_view"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="0dp"
        android:layout_marginEnd="0dp"
        android:background="?android:attr/windowBackground"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:menu="@menu/bottom_nav_menu" />

    <fragment
        android:id="@+id/nav_host_fragment_activity_button_nav"
        android:name="androidx.navigation.fragment.NavHostFragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:defaultNavHost="true"
        app:layout_constraintBottom_toTopOf="@id/nav_view"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:navGraph="@navigation/mobile_navigation" />

    <androidx.viewpager.widget.ViewPager
        android:id="@+id/view_pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:contentDescription="@string/TODO"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

（4）把MainActivity.java中的temp修改为ButtonNav。

（5）创建两个fragment，这里我命名为OneFragment和TwoFragment。

（6）新建一个Adapter，这里我命名为FragmentAdapter。

 FragmentAdapter.java

package com.example.peachdictionary;

import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentManager;
import androidx.fragment.app.FragmentPagerAdapter;

import java.util.List;

public class FragmentAdapter extends FragmentPagerAdapter {
    private List<Fragment> mFragments;

    public FragmentAdapter(List<Fragment> fragments, FragmentManager fm) {
        super(fm);
        this.mFragments = fragments;
    }
    @Override
    public Fragment getItem(int i) {
        return mFragments.get(i);
    }

    @Override
    public int getCount() {
        return mFragments.size();
    }

}

（7）编辑ButtonNav的代码。

ButtonNav.java

package com.example.peachdictionary;

import android.content.Intent;
import android.graphics.Color;
import android.os.Build;
import android.os.Bundle;
import android.view.MenuItem;
import android.view.View;
import android.widget.Button;

import com.google.android.material.bottomnavigation.BottomNavigationView;
import androidx.annotation.NonNull;
import androidx.appcompat.app.ActionBar;
import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.Fragment;
import androidx.navigation.NavController;
import androidx.navigation.Navigation;
import androidx.navigation.ui.AppBarConfiguration;
import androidx.navigation.ui.NavigationUI;
import androidx.viewpager.widget.ViewPager;
import java.util.ArrayList;
import java.util.List;
import java.util.Objects;

public class ButtonNav extends AppCompatActivity {
        BottomNavigationView bnView;
        ViewPager viewPager;

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


            bnView = findViewById(R.id.nav_view);
            viewPager = findViewById(R.id.view_pager);

            List<Fragment> fragments = new ArrayList<>();
            fragments.add(new OneFragment());
            fragments.add(new TwoFragment());
            fragments.add(new ThreeFragment());
            fragments.add(new FourFragment());

            FragmentAdapter adapter = new FragmentAdapter(fragments, getSupportFragmentManager());
            viewPager.setAdapter(adapter);

            //BottomNavigationView 点击事件监听
            bnView.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
                @Override
                public boolean onNavigationItemSelected(@NonNull MenuItem menuItem) {
                    int menuId = menuItem.getItemId();
                    // 跳转指定页面：Fragment
                    switch (menuId) {
                        case R.id.tab_one:
                            viewPager.setCurrentItem(0);
                            break;
                        case R.id.tab_two:
                            viewPager.setCurrentItem(1);
                            break;
                        case R.id.tab_three:
                            viewPager.setCurrentItem(2);
                            break;
                        case R.id.tab_four:
                            viewPager.setCurrentItem(3);
                            break;
                    }
                    return false;
                }
            });

            // ViewPager 滑动事件监听
            viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
                @Override
                public void onPageScrolled(int i, float v, int i1) {

                }

                @Override
                public void onPageSelected(int i) {
                    //将滑动到的页面对应的 menu 设置为选中状态
                    bnView.getMenu().getItem(i).setChecked(true);
                }

                @Override
                public void onPageScrollStateChanged(int i) {

                }
            });


        }
    }

（8）在drawable下创建mycolor.xml文件，此文件用于改变底部导航栏选中与未选中的颜色。

mycolor.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="#000000" android:state_checked="true" />
    <item android:color="#66000000" android:state_checked="false" />
</selector>

(9)对activity_button_nav.xml再次进行修改。

activity_button_nav.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingTop="?attr/actionBarSize">

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/nav_view"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="0dp"
        android:layout_marginEnd="0dp"
        android:background="?android:attr/windowBackground"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:itemIconTint="@drawable/mycolor"
        app:itemTextColor="@drawable/mycolor"
        app:menu="@menu/bottom_nav_menu" />

    <fragment
        android:id="@+id/nav_host_fragment_activity_button_nav"
        android:name="androidx.navigation.fragment.NavHostFragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:defaultNavHost="true"
        app:layout_constraintBottom_toTopOf="@id/nav_view"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:navGraph="@navigation/mobile_navigation" />

    <androidx.viewpager.widget.ViewPager
        android:id="@+id/view_pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:contentDescription="@string/TODO"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

实现效果：