安卓开发之-BottomNavigationView+ViewPager+Fragment实现导航栏

末蓝、 2022-05-27 06:18 273阅读 0赞

1.效果类似于手机qq那样的来回页面切换

2.首先在build.gradle中添加依赖：

compile 'com.android.support:design:25.3.1'

3.然后，设置我们的activity的layout文件为：

<?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:id="@+id/container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        tools:context="com.example.dengjiale.xuanshang.fragment.HomeActivity">
    
        <FrameLayout
            android:id="@+id/content"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1">
    
             <android.support.v4.view.ViewPager
                 android:id="@+id/home_vp"
                 android:layout_width="match_parent"
                 android:layout_height="match_parent">
    
             </android.support.v4.view.ViewPager>
        </FrameLayout>
    
        <android.support.design.widget.BottomNavigationView
            android:id="@+id/navigation"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom"
            android:background="?android:attr/windowBackground"
            app:menu="@menu/navigation" />
    
    </LinearLayout>

该布局文件就是一个viewPager组件和一个BottomNavigationView组件，一个用于显示容纳和切换Fragment，一个用于导航

，其中底部导航栏用到的Menu文件的内容如下：

<?xml version="1.0" encoding="utf-8"?>
    <menu xmlns:android="http://schemas.android.com/apk/res/android">
    
        <item
            android:id="@+id/navigation_home"
            android:icon="@drawable/ic_home_black_24dp"
            android:title="主页" />
    
        <item
            android:id="@+id/navigation_order"
            android:icon="@drawable/ic_dashboard_black_24dp"
            android:title="订单" />
    
        <item
            android:id="@+id/navigation_person"
            android:icon="@drawable/ic_notifications_black_24dp"
            android:title="我的" />
    
    
    
    </menu>

4.接下来要建立Fragment文件，准备建立三个，其中一个的java代码和布局文件的内容如下，另外两个类似：

public class OrderFragment extends Fragment {
        @Override
        public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
            /* 引用创建好的xml布局 */
            View view = inflater.inflate(R.layout.fragment_order,container,false);
            return view;
    
        }
    }

5.接下来，就要写一个关于ViewPager的适配器

package com.example.dengjiale.xuanshang.fragment;
    
    import android.support.v4.app.Fragment;
    import android.support.v4.app.FragmentManager;
    import android.support.v4.app.FragmentPagerAdapter;
    
    import java.util.ArrayList;
    import java.util.List;
    
    /**
     * Created by dengjiale on 2018/4/12.
     */
    
    public class MyFragmentAdapter extends FragmentPagerAdapter {
        private ArrayList<Fragment> list;
        public MyFragmentAdapter(FragmentManager fm, ArrayList<Fragment> list){
            super(fm);
            this.list=list;
        }
        @Override
        public Fragment getItem(int position) {
            return list.get(position);
        }
    
        @Override
        public int getCount() {
            return list.size();
        }
    }

6.ok,万事俱备，只欠东风，我们下面就要写我们的主要的activity了

package com.example.dengjiale.xuanshang.fragment;
    
    import android.os.Bundle;
    import android.support.annotation.NonNull;
    import android.support.design.widget.BottomNavigationView;
    import android.support.v4.app.Fragment;
    import android.support.v4.view.ViewPager;
    import android.support.v7.app.AppCompatActivity;
    import android.view.MenuItem;
    import android.widget.TextView;
    
    import com.example.dengjiale.xuanshang.R;
    
    import java.util.ArrayList;
    import java.util.List;
    
    public class HomeActivity extends AppCompatActivity {
        //设置要用到的变量的引用
        private ViewPager viewPager;
        ArrayList<Fragment>fragmentList;
        private BottomNavigationView navigation;
        MyFragmentAdapter myFragmentAdapter;
    
       //设置导航栏选择变化监听器
        private BottomNavigationView.OnNavigationItemSelectedListener mOnNavigationItemSelectedListener
                = new BottomNavigationView.OnNavigationItemSelectedListener() {
    
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                switch (item.getItemId()) {
                    //根据导航栏的选择给viewPager设置相应的Fragment
                    case R.id.navigation_home:
                        viewPager.setCurrentItem(0);
                        return true;
                    case R.id.navigation_order:
                        viewPager.setCurrentItem(1);
                        return true;
                    case R.id.navigation_person:
                        viewPager.setCurrentItem(2);
                        return true;
                }
                return false;
            }
    
        };
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_home);
            //初始化底部导航栏
            navigation = (BottomNavigationView) findViewById(R.id.navigation);
            navigation.setOnNavigationItemSelectedListener(mOnNavigationItemSelectedListener);
            //初始化viewPager
            viewPager=(ViewPager)findViewById(R.id.home_vp);
            //初始化fragment列表
            fragmentList=new ArrayList<>();
            fragmentList.add(new HomeFragment());
            fragmentList.add(new OrderFragment());
            fragmentList.add(new PersonFragment());
            //初始化viewPager适配器
            myFragmentAdapter=new MyFragmentAdapter(getSupportFragmentManager(),fragmentList);
            //注入适配器
            viewPager.setAdapter(myFragmentAdapter);
    
    
    
    
    
    
    
           //设置viewPager点击事件
            viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
                @Override
                public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
    
                }
    
                @Override
                public void onPageSelected(int position) {
                navigation.getMenu().getItem(position).setChecked(true);
                }
    
                @Override
                public void onPageScrollStateChanged(int state) {
    
                }
            });
        }
    
    }

7.圆满结束。整个过程的思路就是通过bottomNavigation的点击事件来改变viewPager这个组件中应该显示的Fragment，实现了在一个activity中切换显示不同的fragment。