android : 底部导航栏的实现（使用ViewPager和BottomNavigationView）

admin • 2023-12-23 20:56 • 移动开发

本案例中需要用的控件ViewPager和BottomNavigationView

ViewPager：主要是页面的切换
Fragment：碎片（也就是每个页面的内容）
BottomNavigationView：底部导航栏

非常简单，主要就是一个Viewpager和BottomNavigationView

先来说一下思路：BottomNavigationView底部导航栏 ViewPager+Fragment页面

那么我么如何设置两个控件联动（仅需要两个方法即可）

ViewPager中的滑动页面监听接口onPageSelected()方法
BottomNavigationViewr中的底部图标切换监听接口onNavigationItemSelected()方法
- 简单地说就是当我们滑动页面的时候改变底部导航栏图标id
- 点击底部导航栏时更改viewpager界面

activity_main.xml

注意：BottomNavigationView需要一个app:menu菜单文件（下面会作讲解）

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:orientation="vertical"
    tools:context=".MainActivity"

    >

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

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/main_bnv"
        android:layout_width="match_parent"
        android:layout_height="73dp"
        app:labelVisibilityMode="labeled"
        app:menu="@menu/bottom_nav_menu"
        />
</LinearLayout>

bottom_nav_menu.xml

主要就是两个属性 icon图标 title文字

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/menu_home"
        android:icon="@android:drawable/star_big_on"
        android:title="首页" />
    <item
        android:id="@+id/menu_service"
        android:icon="@android:drawable/ic_menu_mylocation"
        android:title="全部服务" />
    <item
        android:id="@+id/menu_rich"
        android:icon="?attr/actionModePasteDrawable"
        android:title="精准扶贫" />
    <item
        android:id="@+id/menu_news"
        android:icon="@android:drawable/ic_menu_my_calendar"
        android:title="新闻" />
    <item
        android:id="@+id/menu_mine"
        android:icon="@android:drawable/ic_menu_myplaces"
        android:title="个人中心" />
</menu>

接下来创建空白的Fragment，不用做任何修改

创建过程如下：

创建完成后会生成Fragment的java文件和对应的XML文件

Fragment文件不需要修改，后期只需要传入两个参数即可

创建5个即可，创建方法相同，以下只示例一个

示例：

HomeFragment.java

package com.example.myapplication;

import android.os.Bundle;

import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.fragment.app.Fragment;
import androidx.viewpager.widget.ViewPager;

import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import com.google.android.material.tabs.TabLayout;

import java.util.ArrayList;
import java.util.List;

public class HomeFragment extends Fragment {

    private static final String ARG_PARAM1 = "param1";
    private static final String ARG_PARAM2 = "param2";


    private String mParam1;
    private String mParam2;

    public HomeFragment() {

    }


    public static HomeFragment newInstance(String param1, String param2) {
        HomeFragment fragment = new HomeFragment();
        Bundle args = new Bundle();
        args.putString(ARG_PARAM1, param1);
        args.putString(ARG_PARAM2, param2);
        fragment.setArguments(args);
        return fragment;
    }

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        if (getArguments() != null) {
            mParam1 = getArguments().getString(ARG_PARAM1);
            mParam2 = getArguments().getString(ARG_PARAM2);
        }
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        return inflater.inflate(R.layout.fragment_home, container, false);
    }

    @Override
    public void onViewCreated(@NonNull View view, @Nullable Bundle savedInstanceState) {
        super.onViewCreated(view, savedInstanceState);


    }


}

fragment_home.xml

<?xml version="1.0" encoding="utf-8"?>
<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" >

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="首页"
        android:textSize="50sp"
        android:gravity="center"
   />

</LinearLayout>

MainActivity.java


package com.example.myapplication;

import android.os.Bundle;
import android.view.MenuItem;

import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.Fragment;
import androidx.viewpager.widget.ViewPager;

import com.google.android.material.bottomnavigation.BottomNavigationView;

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {
    List<Fragment> fragmentList = new ArrayList<>();

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

        ViewPager viewPager = findViewById(R.id.main_vp);
        BottomNavigationView bottomNavigationView = findViewById(R.id.main_bnv);

        initData();

        MainActivityAdapter adapter = new MainActivityAdapter(getSupportFragmentManager(), fragmentList);
        viewPager.setAdapter(adapter);
//        页面更改监听
        viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

            }

            @Override
            public void onPageSelected(int position) {
                switch (position) {
                    case 0:
                        bottomNavigationView.setSelectedItemId(R.id.menu_home);
                        break;
                    case 1:
                        bottomNavigationView.setSelectedItemId(R.id.menu_service);
                        break;
                    case 2:
                        bottomNavigationView.setSelectedItemId(R.id.menu_rich);
                        break;
                    case 3:
                        bottomNavigationView.setSelectedItemId(R.id.menu_news);
                        break;
                    case 4:
                        bottomNavigationView.setSelectedItemId(R.id.menu_mine);
                        break;
                }
            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });
//        图标选择监听
        bottomNavigationView.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                switch (item.getItemId()){
                    case R.id.menu_home:
                        viewPager.setCurrentItem(0);
                        break;
                    case R.id.menu_service:
                        viewPager.setCurrentItem(1);
                        break;
                    case R.id.menu_rich:
                        viewPager.setCurrentItem(2);
                        break;
                    case R.id.menu_news:
                        viewPager.setCurrentItem(3);
                        break;
                    case R.id.menu_mine:
                        viewPager.setCurrentItem(4);
                        break;
                }
                return true;
            }
        });
    }

    private void initData() {
        HomeFragment homeFragment = HomeFragment.newInstance("首页", "");
        fragmentList.add(homeFragment);
        ServiceFragment serviceFragment = ServiceFragment.newInstance("全部服务", "");
        fragmentList.add(serviceFragment);
        RichFragment richFragment = RichFragment.newInstance("精准扶贫", "");
        fragmentList.add(richFragment);
        NewsFragment newsFragment = NewsFragment.newInstance("新闻", "");
        fragmentList.add(newsFragment);

       MineFragment mineFragment = MineFragment.newInstance("个人中心", "");
        fragmentList.add(mineFragment);
    }


}

接下来是Viewpager的适配器

MainActivityAdapter.java

package com.example.myapplication;

import androidx.annotation.NonNull;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentManager;
import androidx.fragment.app.FragmentStatePagerAdapter;

import java.util.ArrayList;
import java.util.List;

public class MainActivityAdapter extends FragmentStatePagerAdapter {
    List<Fragment> fragmentList=new ArrayList<>();

    public MainActivityAdapter(@NonNull FragmentManager fm, List<Fragment> fragmentList) {
        super(fm);
        this.fragmentList = fragmentList;
    }

    @NonNull
    @Override
    public Fragment getItem(int position) {
        return fragmentList.get(position);
    }

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

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。

THE END

android studio ide

二维码

MAC Charles 抓包工具安装以及使用方法（带破解）

< <上一篇

在微信公众平台设置小程序域名白名单

下一篇>>

搜索内容

android : 底部导航栏的实现（使用ViewPager和BottomNavigationView）

最新文章

分类

标签云