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

179 阅读1分钟

前文: 桃词典 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

<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="我的" />
其中需要添加的矢量图为:

@drawable/ic_baseline_home_24 @drawable/ic_baseline_person_24 (3)对activity_button_nav.xml进行修改

activity_button_nav.xml

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="schemas.android.com/apk/res/and…" xmlns:app="schemas.android.com/apk/res-aut…" 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 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

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

activity_button_nav.xml

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="schemas.android.com/apk/res/and…" xmlns:app="schemas.android.com/apk/res-aut…" 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>

实现效果:

———————————————— 版权声明:本文为CSDN博主「SEMHAQ」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。 原文链接:blog.csdn.net/weixin_6062…