Android底部导航栏BottomNavigationView

最新推荐文章于 2024-08-08 15:44:50 发布

谷哥的小弟

最新推荐文章于 2024-08-08 15:44:50 发布

阅读量1k

点赞数

本文链接：https://blog.csdn.net/lfdfhl/article/details/8195132

版权

Android核心专栏收录该内容

485 篇文章 7 订阅

订阅专栏

fragment_first

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
    tools:context=".FirstFragment">

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="This is the first Fragment"
        android:background="@android:color/holo_blue_light"
        android:textColor="@android:color/white"
        android:textSize="20sp"
        android:padding="4dp"
        android:textAllCaps="false"
        android:layout_centerInParent="true" />

</RelativeLayout>

FirstFragment

package com.etime.myproject;

import android.content.Context;
import android.os.Bundle;
import androidx.fragment.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Button;
import android.widget.Toast;

public class FirstFragment extends Fragment {
    private Button mButton;
    private Context mContext;

    public FirstFragment() {

    }
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        // 依据Fragment布局文件生成其对应View
        View view=inflater.inflate(R.layout.fragment_first, container, false);
        // 从View中找到Button
        mButton=(Button)view.findViewById(R.id.button);
        // 为Button设置点击事件
        mButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                mContext=getContext();
                Toast.makeText(mContext,"Hello Fragment",Toast.LENGTH_LONG).show();
            }
        });
        //返回FragView的View
        return view;
    }
}

fragment_second.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
    tools:context=".FirstFragment">

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="This is the second Fragment"
        android:background="@android:color/holo_blue_light"
        android:textColor="@android:color/white"
        android:textSize="20sp"
        android:padding="4dp"
        android:textAllCaps="false"
        android:layout_centerInParent="true" />

</RelativeLayout>

SecondFragment

package com.etime.myproject;

import android.content.Context;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Button;
import android.widget.Toast;
import androidx.fragment.app.Fragment;

public class SecondFragment extends Fragment {
    private Button mButton;
    private Context mContext;

    public SecondFragment() {

    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        // 依据Fragment布局文件生成其对应View
        View view=inflater.inflate(R.layout.fragment_second, container, false);
        // 从View中找到Button
        mButton=(Button)view.findViewById(R.id.button);
        // 为Button设置点击事件
        mButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                mContext=getContext();
                Toast.makeText(mContext,"Hello Fragment",Toast.LENGTH_LONG).show();
            }
        });
        //返回FragView的View
        return view;
    }
}

fragment_third.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
    tools:context=".ThirdFragment">

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="This is the third Fragment"
        android:background="@android:color/holo_blue_light"
        android:textColor="@android:color/white"
        android:textSize="20sp"
        android:padding="4dp"
        android:textAllCaps="false"
        android:layout_centerInParent="true" />

</RelativeLayout>

ThirdFragment

package com.etime.myproject;

import android.content.Context;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Button;
import android.widget.Toast;
import androidx.fragment.app.Fragment;

public class ThirdFragment extends Fragment {
    private Button mButton;
    private Context mContext;

    public ThirdFragment() {

    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        // 依据Fragment布局文件生成其对应View
        View view=inflater.inflate(R.layout.fragment_third, container, false);
        // 从View中找到Button
        mButton=(Button)view.findViewById(R.id.button);
        // 为Button设置点击事件
        mButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                mContext=getContext();
                Toast.makeText(mContext,"Hello Fragment",Toast.LENGTH_LONG).show();
            }
        });
        //返回FragView的View
        return view;
    }
}

build.gradle

implementation 'com.google.android.material:material:1.0.0'

menu_bottom_tab.xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:aapt="http://schemas.android.com/aapt"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <item
        android:id="@+id/tab_home"
        android:icon="@drawable/tab_home"
        android:title="首页"
        app:showAsAction="ifRoom" />
    <item
        android:id="@+id/tab_device"
        android:icon="@drawable/tab_device"
        android:title="设备"
        app:showAsAction="ifRoom" />
    <item
        android:id="@+id/tab_setting"
        android:icon="@drawable/tab_setting"
        android:title="设置"
        app:showAsAction="ifRoom" />
</menu>

selector_bnv_color.xml

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

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<!-- 根布局采用LinearLayout -->
<!-- android:orientation="vertical" -->
<!-- android:background="@drawable/background" -->
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:background="@drawable/background"
    >
   <!-- ViewPager的高为0 -->
   <!-- android:layout_weight="1" -->
   <androidx.viewpager.widget.ViewPager
       android:id="@+id/viewPager"
       android:layout_width="match_parent"
       android:layout_height="0dp"
       android:layout_weight="1"
       />

   <!-- app:menu="@menu/menu_bottom_tab" 指定底部tab -->
   <!-- app:itemIconTint和itemTextColor  设置切换效果-->
   <com.google.android.material.bottomnavigation.BottomNavigationView
       android:id="@+id/bottomNavigationView"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       app:itemIconTint="@drawable/selector_bnv_color"
       app:itemTextColor="@drawable/selector_bnv_color"
       app:menu="@menu/menu_bottom_tab"/>

</LinearLayout>


MainActivity

package com.etime.myproject;

import android.content.Context;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentManager;
import androidx.fragment.app.FragmentPagerAdapter;
import androidx.viewpager.widget.ViewPager;
import com.google.android.material.bottomnavigation.BottomNavigationView;

/**
 * 注意事项：
 * 1、MainActivity继承自AppCompatActivity
 * 2、与ViewPager相关的东西均在androidx包下
 * 3、添加依赖 implementation 'com.google.android.material:material:1.0.0'
 *    否则无法使用BottomNavigationView
 */
public class MainActivity extends AppCompatActivity {
    private ViewPager mViewPager;
    private Context mContext;
    private BottomNavigationView mBottomNavigationView;
    private NavigationItemSelectedListenerImpl mNavigationItemSelectedListenerImpl;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        init();
    }

    public void init(){
        mContext=this;
        mViewPager=(ViewPager) findViewById(R.id.viewPager);
        FragmentManager fragmentManager=getSupportFragmentManager();
        //设置ViewPager的Adapter
        ViewPagerAdapter adapter=new ViewPagerAdapter(fragmentManager,FragmentPagerAdapter.BEHAVIOR_RESUME_ONLY_CURRENT_FRAGMENT);
        mViewPager.setAdapter(adapter);
        //设置ViewPager的翻页监听器
        PageChangeListenerImpl listener=new PageChangeListenerImpl();
        mViewPager.addOnPageChangeListener(listener);

        //设置BottomNavigationView导航监听
        mBottomNavigationView=findViewById(R.id.bottomNavigationView);
        mNavigationItemSelectedListenerImpl=new NavigationItemSelectedListenerImpl();
        mBottomNavigationView.setOnNavigationItemSelectedListener(mNavigationItemSelectedListenerImpl);
    }

    //ViewPager适配器ViewPagerAdapter
    private  class ViewPagerAdapter extends FragmentPagerAdapter{
        FirstFragment firstFragment=new FirstFragment();
        SecondFragment secondFragment=new SecondFragment();
        ThirdFragment thirdFragment=new ThirdFragment();
        private Fragment[] fragments = new Fragment[]{firstFragment,secondFragment,thirdFragment};

        public ViewPagerAdapter(@NonNull FragmentManager fm, int behavior) {
            super(fm, behavior);
        }

        @NonNull
        @Override
        public Fragment getItem(int position) {
            return fragments[position];
        }

        @Override
        public int getCount() {
            return fragments.length;
        }
    }

    //ViewPager翻页监听器ViewPager.OnPageChangeListener
    private class PageChangeListenerImpl implements ViewPager.OnPageChangeListener{
        @Override
        public void onPageScrolled(int i, float v, int i1) {

        }

        @Override
        public void onPageSelected(int position) {
            //切换BottomNavigationView相应位置的item的选中状态
            Menu menu=mBottomNavigationView.getMenu();
            MenuItem menuItem = menu.getItem(position);
            menuItem.setChecked(true);
        }

        @Override
        public void onPageScrollStateChanged(int i) {

        }
    }

    //BottomNavigationView导航监听BottomNavigationView.OnNavigationItemSelectedListener
    private class NavigationItemSelectedListenerImpl implements BottomNavigationView.OnNavigationItemSelectedListener{
        @Override
        public boolean onNavigationItemSelected(@NonNull MenuItem item) {
            int itemId = item.getItemId();
            //切换ViewPager的页面
            switch (itemId){
                case R.id.tab_home:
                    mViewPager.setCurrentItem(0);
                    break;
                case R.id.tab_device:
                    mViewPager.setCurrentItem(1);
                    break;
                case R.id.tab_setting:
                    mViewPager.setCurrentItem(2);
                    break;
            }
            return false;
        }
    }

}