Android 控件BottomNavigationView的使用

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

破魔

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

阅读量815

点赞数

分类专栏： android

本文链接：https://blog.csdn.net/a1160712069/article/details/83384703

版权

android 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

一、项目的导入

在build引入：

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

后面的版本号根据SDK的版本改写如：

implementation 'com.android.support:appcompat-v7:26.1.0'则使用“26.1.0”

二、现在我们可以用一个例子来说明：

1.先activity_main.xml进行布局的设置如下：

    <android.support.design.widget.BottomNavigationView
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_gravity="bottom"
        android:id="@+id/bv"
        android:background="#e4e4e4"
        app:menu="@menu/test_menu">

    </android.support.design.widget.BottomNavigationView>

2.为了实现以上的效果，先要进行每个tab的布局以及代码的编写：

tab.xml的布局如下：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="Tab la"
        android:gravity="center"
        android:textColor="#f00"/>

</LinearLayout>

由于我们有4个界面，所以就要进行创建4个这样的布局，只是显示的字体的颜色不同，其实就是为了显示效果不一样；由于比较懒就不一一贴出。

2.TabFragment代码的编写，其实也是很简单；主要是实现显示每个fragment就OK了

public class Tab1Fragment extends Fragment {

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, Bundle savedInstanceState){

        View view = inflater.inflate(R.layout.tab_1,null);
        return view;
    }
}

这样Fragment已经创建完成，接下来要创建个menu的布局，此menu的文件命名为test_menu,so在使用的时候则是app:test_menu；

<menu xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:id="@+id/item_tab1"
        android:icon="@mipmap/tab1"
        android:title="微信"/>

    <item
        android:id="@+id/item_tab2"
        android:icon="@mipmap/tab2"
        android:title="通讯录"/>

    <item
        android:id="@+id/item_tab3"
        android:icon="@mipmap/tab3"
        android:title="发现"/>

    <item
        android:id="@+id/item_tab4"
        android:icon="@mipmap/tab4"
        android:title="我"/>

</menu>

3.创建viewPager的适配器，BottomAdapter

public class BottomAdapter extends FragmentPagerAdapter {

    private List<Fragment> fragments = new ArrayList<>();

    public BottomAdapter(FragmentManager fm){
        super(fm);
    }
    @Override
    public Fragment getItem(int position){
        return fragments.get(position);
    }
    @Override
    public int getCount(){
        return fragments.size();
    }
    public void addFragment(Fragment fragment){
        fragments.add(fragment);
    }
}

7.为了完成最终的效果，则在activity_main.xml中加上了ViewPager的布局如下：

    <android.support.v4.view.ViewPager
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:id="@+id/vp">

    </android.support.v4.view.ViewPager>

8.最后放出最后的大招，MainActivity的完整代码如下：

public class MainActivity extends AppCompatActivity {

    private BottomNavigationView mBv;
    private ViewPager mVp;

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

    private void initView(){
        mBv = (BottomNavigationView)findViewById(R.id.bv);
        mVp = (ViewPager) findViewById(R.id.vp);

        BottomNavigationViewHelper.disableShiftMode(mBv);

        mBv.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                switch (item.getItemId()){
                    case R.id.item_tab1:
                        mVp.setCurrentItem(0);
                        return true;

                    case R.id.item_tab2:
                        mVp.setCurrentItem(1);
                        return true;

                    case R.id.item_tab3:
                        mVp.setCurrentItem(2);
                        return true;

                    case R.id.item_tab4:
                        mVp.setCurrentItem(3);
                        return true;


                }

                return false;
            }
        });

        setupViewPage(mVp);

        mVp.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

            }

            @Override
            public void onPageSelected(int position) {
                mBv.getMenu().getItem(position).setChecked(true);
            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });
    }

    private void setupViewPage(ViewPager viewPager){
        BottomAdapter adapter = new BottomAdapter(getSupportFragmentManager());
        adapter.addFragment(new TabFragment());
        adapter.addFragment(new Tab1Fragment());
        adapter.addFragment(new Tab2Fragment());
        adapter.addFragment(new Tab3Fragment());
        viewPager.setAdapter(adapter);
    }

}

在这里MainActivity中用到了BottomNavigationViewHelper进行动画效果的设置，二这个类的代码如下：

public class BottomNavigationViewHelper {

    public static void disableShiftMode(BottomNavigationView view){
        BottomNavigationMenuView menuView = (BottomNavigationMenuView) view.getChildAt(0);
        try {
            Field shiftingMode = menuView.getClass().getDeclaredField("mShiftingMode");
            shiftingMode.setAccessible(true);
            shiftingMode.setBoolean(menuView,false);
            shiftingMode.setAccessible(false);
            for (int i = 0;i < menuView.getChildCount();i++){
                BottomNavigationItemView item = (BottomNavigationItemView) menuView.getChildAt(i);
                item.setShiftingMode(false);
                item.setChecked(item.getItemData().isChecked());
            }
        }catch (NoSuchFieldException e){
            Log.e("bnHelper","unable to get shift mode field",e);
        }catch (IllegalAccessException e){
            Log.e("bnHelper","unable to change value shift mode",e);

        }
    }
}

老铁们到这里，这个简单的使用例子已经完成了。

现在总结下这个BottomNavigationView的一些其他的问题：底部Bottom选项，最少为3项，超过3项之后,BottomNavigationView会自动使用本身控件的自带动画属性，同时最多好像为5项

这只是简单的使用，也许会有后续。。。。。

最后附上这个demo的完整代码的地址：https://github.com/brusewu/BottomNavigationView-demo