ViewPager+BottomNavigationView实现底部菜单

一，先说说这个底部菜单，从最开始在学校到现在工作，已经使用的不同方式实现不下于3种，可是每次都写的特别的复杂，也是在不断的更新。为了避免忘记只能记下。

环境：

    implementation 'com.android.support:design:28.0.0'

看布局：
main_activity

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
    tools:context=".MainActivity"
    tools:ignore="ResAuto,UnusedNamespace">


    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@+id/bottom_navigation" />

    <android.support.design.widget.BottomNavigationView
        android:id="@+id/bottom_navigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/colorPrimaryDark"
        app:labelVisibilityMode="labeled"
        android:layout_alignParentBottom="true"
        app:itemIconTint="@drawable/bottom_navigation_color_selector"
        app:itemTextColor="@drawable/bottom_navigation_color_selector"
        app:menu="@menu/menu_bottom_navigation" />

    <View
        android:layout_width="match_parent"
        android:layout_height="5dp"
        android:layout_above="@+id/bottom_navigation"
        android:background="#0a696868" />

</RelativeLayout>

bottom_navigation_color_selector

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@color/colorBlue" android:state_checked="true" />

    <item android:color="#FFFFFF"/>
</selector>

menu_bottom_navigation
res→menu→menu_bottom_navigation

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/item_one"
        android:icon="@drawable/bottom_one_selector"
        android:checkable="true"
        android:title="新闻" />
    <item
        android:id="@+id/item_two"
        android:icon="@drawable/bottom_two_selector"
        android:title="图书" />
    <item
        android:id="@+id/item_three"
        android:icon="@drawable/bottom_three_selector"
        android:title="发现" />
    <item
        android:id="@+id/item_four"
        android:icon="@drawable/bottom_four_selector"
        android:title="更多" />
    <item
        android:id="@+id/item_fours"
        android:icon="@drawable/bottom_four_selector"
        android:title="更多" />
</menu>

bottom_one_selector

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/one_c" android:state_selected="true" />
    <item android:drawable="@drawable/one_c" android:state_checkable="true" />
    <item android:drawable="@drawable/one_n" android:state_checkable="false" />
    <item android:drawable="@drawable/one_n" android:state_selected="false" />
</selector>

MainActivity

package cwj.com.baseandroid;


import android.support.annotation.NonNull;
import android.support.design.widget.BottomNavigationView;
import android.support.v4.view.ViewPager;
import android.view.MenuItem;
import android.view.MotionEvent;
import android.view.View;
import cwj.com.baseandroid.adapter.ViewPagerAdapter;
import cwj.com.baseandroid.base.BaseActivity;
import cwj.com.baseandroid.fragment.OneFragment;
import cwj.com.baseandroid.fragment.TwoFragment;

public class MainActivity extends BaseActivity {
    private BottomNavigationView navigationView;
    private ViewPager viewPager;
    private MenuItem menuItem;
    @Override
    public void initView() {
        viewPager = findViewById(R.id.viewpager);
        navigationView = findViewById(R.id.bottom_navigation);
        navigationView.setOnNavigationItemSelectedListener(mOnNavigationItemSelectedListener);
        //避免图片被系统渲染
        navigationView.setItemIconTintList(null);
        //禁止ViewPager滑动
        viewPager.setOnTouchListener(new View.OnTouchListener() {
            @Override
            public boolean onTouch(View view, MotionEvent motionEvent) {
                return true;
            }
        });
        viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int i, float v, int i1) {
            }
            @Override
            public void onPageSelected(int i) {
                if (menuItem != null) {
                    menuItem.setChecked(false);
                } else {
                    navigationView.getMenu().getItem(0).setChecked(false);
                }
                menuItem = navigationView.getMenu().getItem(i);
                menuItem.setChecked(true);
            }
            @Override
            public void onPageScrollStateChanged(int i) {

            }
        });
        setupViewPager(viewPager);
    }
	//设置fragment
	//这个地方是灵活的。可以新建fragment 也可以，在同一个fragment 具体要看业务需求
    private void setupViewPager(ViewPager viewPager) {
        ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager());
        adapter.addFragment(OneFragment.newInstance("新闻"));
        adapter.addFragment(TwoFragment.newInstance("图书"));
        adapter.addFragment(OneFragment.newInstance("发现"));
        adapter.addFragment(OneFragment.newInstance("更多"));
        adapter.addFragment(OneFragment.newInstance("更多a"));
        viewPager.setAdapter(adapter);
    }
    private BottomNavigationView.OnNavigationItemSelectedListener mOnNavigationItemSelectedListener = new BottomNavigationView.OnNavigationItemSelectedListener() {
        @Override
        public boolean onNavigationItemSelected(@NonNull MenuItem menuItem) {
            switch (menuItem.getItemId()) {
                case R.id.item_one:
                    viewPager.setCurrentItem(0);
                    break;
                case R.id.item_two:
                    viewPager.setCurrentItem(1);
                    break;
                case R.id.item_three:
                    viewPager.setCurrentItem(2);
                    break;
                case R.id.item_four:
                    viewPager.setCurrentItem(3);
                    break;
                case R.id.item_fours:
                    viewPager.setCurrentItem(4);
                    break;
            }
            return false;
        }
    };

    @Override
    public int setLyoutId() {
        return R.layout.activity_main;
    }

    @Override
    public void initDate() {

    }



}

fragment

package cwj.com.baseandroid.fragment;

import android.os.Bundle;
import android.view.View;
import android.widget.TextView;

import cwj.com.baseandroid.R;
import cwj.com.baseandroid.base.BaseFragment;

/**
 * Created by CWJ on 2018/12/10.
 * Author:Chen
 * Email:[email protected]
 * Ver:1
 * DEC:
 */
public class OneFragment extends BaseFragment {
    private TextView textView;

    @Override
    protected int setView() {
        return R.layout.fragment_one;
    }

    @Override
    protected void init(View view) {
        textView = view.findViewById(R.id.textView);
    }

    @Override
    protected void initData(Bundle savedInstanceState) {

    }

    public static OneFragment newInstance(String info) {
        OneFragment oneFragment = new OneFragment();
        Bundle args = new Bundle();
        args.putString("info", "info");
        oneFragment.setArguments(args);
        return oneFragment;
    }
}

看图：
在这里插入图片描述

对比：Android 底部菜单栏RadioButton+Fragment

Android Fragment viewPage TabLayout用法。

ViewPager+BottomNavigationView实现底部菜单

猜你喜欢