BottomNavigationView底部导航栏的一点东西

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

ApiPlayer

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

阅读量1.8k

点赞数

分类专栏： android基础 Android控件文章标签：底部导航栏 BottomNavigationView

本文链接：https://blog.csdn.net/code__man/article/details/79031475

版权

android基础同时被 2 个专栏收录

14 篇文章 0 订阅

订阅专栏

Android控件

2 篇文章 0 订阅

订阅专栏

#Material Design使用

##2. BottomNavigationView 底部导航控件

爸爸原文链接

中文参考

###1. 继承关系

java.lang.Object  
	↳	android.view.View  
   		↳	android.view.ViewGroup  
 	   		↳	android.widget.FrameLayout  
 	 	   		↳	android.support.design.widget.BottomNavigationView

###2. 基本用法

	//布局文件中
	<android.support.design.widget.BottomNavigationView
        android:id="@+id/bottomNavigationView"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_alignParentBottom="true"
        android:layout_marginTop="5dp"
        app:itemIconTint="@color/yellow_menu_selector"
        app:itemTextColor="@color/yellow_menu_selector"
        app:menu="@menu/main_bottom_menu"/>
        
   //设置我们需要显示的menu
	<?xml version="1.0" encoding="utf-8"?>
	<menu xmlns:android="http://schemas.android.com/apk/res/android">
    	<item
        	android:orderInCategory="0"
        	android:title="首页"
        	android:icon="@drawable/icon_home_default" />
    	<item
        	android:orderInCategory="1"
        	android:title="消息"
        	android:icon="@drawable/icon_dynamic_default" />
    	<item
        	android:orderInCategory="2"
        	android:title="财富"
        	android:icon="@drawable/icon_treasure_default" />
	</menu>
	
	//activity中
	bottomNavigationView.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                viewPager.setCurrentItem(item.getOrder());
                return false;
            }
        });

###3. 先上两张效果图，第一次进行adb命令录屏，然后工具转GIF，稍后也记录一下。 ###4. 源码导读，一看究竟

Google推荐我们在有3-5个顶层视图时使用这个控件，但在实际使用过程中发现在底部MenuItem的个数大于3的时候显示的形式和我想要的还是有点区别的。
接下来我们就要去查看是什么造成了这种显示效果的区别。
BottomNavigationView类包含在这样这样一个成员变量

private final BottomNavigationMenuView mMenuView;

这是我们在xml中设置的menu，我猜出现不同显示效果的原因就是由它控制的，我们去看源码。哎！我看到了这个！

mShiftingMode = mMenu.size() > 3;
for (int i = 0; i < mMenu.size(); i++) {
        mPresenter.setUpdateSuspended(true);
        mMenu.getItem(i).setCheckable(true);
        mPresenter.setUpdateSuspended(false);
        BottomNavigationItemView child = getNewItem();
        mButtons[i] = child;
        child.setIconTintList(mItemIconTint);
        child.setTextColor(mItemTextColor);
        child.setItemBackground(mItemBackgroundRes);
        child.setShiftingMode(mShiftingMode);
        child.initialize((MenuItemImpl) mMenu.getItem(i), 0);
        child.setItemPosition(i);
        child.setOnClickListener(mOnClickListener);
        addView(child);
    }

这是个什么玩意儿呢，它是怎么造成显示异常的呢？继续看源码。看到这里

protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        final int width = MeasureSpec.getSize(widthMeasureSpec);
        final int count = getChildCount();

        final int heightSpec = MeasureSpec.makeMeasureSpec(mItemHeight, MeasureSpec.EXACTLY);

        if (mShiftingMode) {
            final int inactiveCount = count - 1;
            final int activeMaxAvailable = width - inactiveCount * mInactiveItemMinWidth;
            final int activeWidth = Math.min(activeMaxAvailable, mActiveItemMaxWidth);
            final int inactiveMaxAvailable = (width - activeWidth) / inactiveCount;
            final int inactiveWidth = Math.min(inactiveMaxAvailable, mInactiveItemMaxWidth);
            int extra = width - activeWidth - inactiveWidth * inactiveCount;
            for (int i = 0; i < count; i++) {
                mTempChildWidths[i] = (i == mActiveButton) ? activeWidth : inactiveWidth;
                if (extra > 0) {
                    mTempChildWidths[i]++;
                    extra--;
                }
            }
        } else {
            final int maxAvailable = width / (count == 0 ? 1 : count);
            final int childWidth = Math.min(maxAvailable, mActiveItemMaxWidth);
            int extra = width - childWidth * count;
            for (int i = 0; i < count; i++) {
                mTempChildWidths[i] = childWidth;
                if (extra > 0) {
                    mTempChildWidths[i]++;
                    extra--;
                }
            }
        } 
    }

从代码中可以看出，  
在mShiftingMode = true 时，经过一系列的算法之后确定不同状态下的MenuItem的尺寸，出于选中状态下的menu的宽度是比其他的menuItem 大很多的。由于除法是取整的，最后的循环就是为了将剩下的几个像素分散在前几个MenuItem上。  
在mShiftingMode =false 时，直接将宽度等分分配给了每一个MenuItem。那我们如果希望在menuItem数量为4甚至5的时候使用等分效果，直接设置mShiftingMode =false不就行了吗？！事实上也就是如此，但是该怎么做呢我们又不能修改源码，难道要重写？算了太麻烦了，还是开启上帝模式吧（反射）。可别高兴的太早，当你这么做了之后，发现虽然是等分了，可是为什么menuTitle没有显示呢？  
*答案在这里*

	public void buildMenuView() {
        if (mButtons != null) {
            for (BottomNavigationItemView item : mButtons) {
                sItemPool.release(item);
            }
        }
        removeAllViews();
        if (mMenu.size() == 0) {
            return;
        }
        mButtons = new BottomNavigationItemView[mMenu.size()];
        mShiftingMode = mMenu.size() > 3;
        for (int i = 0; i < mMenu.size(); i++) {
            mPresenter.setUpdateSuspended(true);
            mMenu.getItem(i).setCheckable(true);
            mPresenter.setUpdateSuspended(false);
            BottomNavigationItemView child = getNewItem();
            mButtons[i] = child;
            child.setIconTintList(mItemIconTint);
            child.setTextColor(mItemTextColor);
            child.setItemBackground(mItemBackgroundRes);
            //！！！！！看这里！！！！！！！
            child.setShiftingMode(mShiftingMode);
            child.initialize((MenuItemImpl) mMenu.getItem(i), 0);
            child.setItemPosition(i);
            child.setOnClickListener(mOnClickListener);
            addView(child);
        }
        mActiveButton = Math.min(mMenu.size() - 1, mActiveButton);
        mMenu.getItem(mActiveButton).setChecked(true);
    }

为什么设置了这个就可以了呢？继续看MenuItem的源码。

	public void setChecked(boolean checked) {
        mItemData.setChecked(checked);

        ViewCompat.setPivotX(mLargeLabel, mLargeLabel.getWidth() / 2);
        ViewCompat.setPivotY(mLargeLabel, mLargeLabel.getBaseline());
        ViewCompat.setPivotX(mSmallLabel, mSmallLabel.getWidth() / 2);
        ViewCompat.setPivotY(mSmallLabel, mSmallLabel.getBaseline());
        if (mShiftingMode) {
            if (checked) {
                LayoutParams iconParams = (LayoutParams) mIcon.getLayoutParams();
                iconParams.gravity = Gravity.CENTER_HORIZONTAL | Gravity.TOP;
                iconParams.topMargin = mDefaultMargin;
                mIcon.setLayoutParams(iconParams);
                //！！！这里！！！
                mLargeLabel.setVisibility(VISIBLE);
                ViewCompat.setScaleX(mLargeLabel, 1f);
                ViewCompat.setScaleY(mLargeLabel, 1f);
            } else {
                LayoutParams iconParams = (LayoutParams) mIcon.getLayoutParams();
                iconParams.gravity = Gravity.CENTER;
                iconParams.topMargin = mDefaultMargin;
                mIcon.setLayoutParams(iconParams);
                //！！！这里！！！
                mLargeLabel.setVisibility(INVISIBLE);
                ViewCompat.setScaleX(mLargeLabel, 0.5f);
                ViewCompat.setScaleY(mLargeLabel, 0.5f);
            }
            //mShiftingMode模式下 小字体会被隐藏
            mSmallLabel.setVisibility(INVISIBLE);
        } else {
            if (checked) {
                LayoutParams iconParams = (LayoutParams) mIcon.getLayoutParams();
                iconParams.gravity = Gravity.CENTER_HORIZONTAL | Gravity.TOP;
                iconParams.topMargin = mDefaultMargin + mShiftAmount;
                mIcon.setLayoutParams(iconParams);
                //！！！这里！！！
                mLargeLabel.setVisibility(VISIBLE);                					mSmallLabel.setVisibility(INVISIBLE);
                ViewCompat.setScaleX(mLargeLabel, 1f);
                ViewCompat.setScaleY(mLargeLabel, 1f);
                ViewCompat.setScaleX(mSmallLabel, mScaleUpFactor);
                ViewCompat.setScaleY(mSmallLabel, mScaleUpFactor);
            } else {
                LayoutParams iconParams = (LayoutParams) mIcon.getLayoutParams();
                iconParams.gravity = Gravity.CENTER_HORIZONTAL | Gravity.TOP;
                iconParams.topMargin = mDefaultMargin;
                mIcon.setLayoutParams(iconParams);
                //！！！这里！！！
                mLargeLabel.setVisibility(INVISIBLE);
                mSmallLabel.setVisibility(VISIBLE);

                ViewCompat.setScaleX(mLargeLabel, mScaleDownFactor);
                ViewCompat.setScaleY(mLargeLabel, mScaleDownFactor);
                ViewCompat.setScaleX(mSmallLabel, 1f);
                ViewCompat.setScaleY(mSmallLabel, 1f);
            }
        }

        refreshDrawableState();
    }

什么 代码太多懒得看，来，我来带你看。很简单啊，根据mShiftingMode的值做了不同处理啊。对什么进行了区别处理？我猜就是文字的显示和隐藏。看15,24和36,47有什么不一样，相信你一定已经看出来了。相信想探底的你肯定还不满足，再来看一段代码。

	<merge xmlns:android="http://schemas.android.com/apk/res/android">
    <ImageView
        android:id="@+id/icon"
        android:layout_width="24dp"
        android:layout_height="24dp"
        android:layout_gravity="center_horizontal"
        android:layout_marginTop="@dimen/design_bottom_navigation_margin"
        android:layout_marginBottom="@dimen/design_bottom_navigation_margin"
        android:duplicateParentState="true" />
    <android.support.design.internal.BaselineLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="@dimen/design_bottom_navigation_margin"
        android:layout_gravity="bottom|center_horizontal"
        android:duplicateParentState="true">
        <TextView
            android:id="@+id/smallLabel"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="@dimen/design_bottom_navigation_text_size"
            android:duplicateParentState="true" />
        <TextView
            android:id="@+id/largeLabel"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:visibility="invisible"
            android:textSize="@dimen/design_bottom_navigation_active_text_size"
            android:duplicateParentState="true" />
    </android.support.design.internal.BaselineLayout>
</merge>

看到smallLabel和largeLabel了吗，mShiftingMode模式下 小字体会被隐藏，选中时显示字体，未选中不显示字体（暂时没有考虑动效）。ok,事已至此，针对性的解决问题就好了。来看代码

	public class BottomNavigationViewHelper {

        public void disableShiftMode(BottomNavigationView navigationView) {
            BottomNavigationMenuView menuView = (BottomNavigationMenuView) navigationView.getChildAt(0);
            try {
                //修改BottomNavigationMenuView中mShiftingMode变量的值
                //达到均分宽度的效果
                Field shiftingMode = menuView.getClass().getDeclaredField("mShiftingMode");
                shiftingMode.setAccessible(true);
                shiftingMode.setBoolean(menuView, false);
                shiftingMode.setAccessible(false);

                //修改BottomNavigationItemView中mShiftingMode变量的值
                //达到正常显示文字的效果
                for (int i = 0; i < menuView.getChildCount(); i++) {
                    BottomNavigationItemView itemView = (BottomNavigationItemView) menuView.getChildAt(i);
                    itemView.setShiftingMode(false);
                    itemView.setChecked(itemView.getItemData().isChecked());
                }

            } catch (Exception e) {
                e.printStackTrace();
            }
        }
    }

###5. 实战演练

MenuItem = 3 参考基础用法
MenuItem = 4

//XML
<android.support.design.widget.BottomNavigationView
	android:id="@+id/bottomNavigationView"
	android:layout_width="match_parent"
	android:layout_height="50dp"
	android:layout_alignParentBottom="true"
	android:layout_marginTop="5dp"
	app:itemIconTint="@color/yellow_menu_selector"
	app:itemTextColor="@color/yellow_menu_selector"
	app:menu="@menu/main_bottom_menu"/>
	
//MenuItem
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:orderInCategory="0"
        android:title="首页"
        android:icon="@drawable/icon_home_default" />
    <item
        android:orderInCategory="1"
        android:title="消息"
        android:icon="@drawable/icon_dynamic_default" />
    <item
        android:orderInCategory="2"
        android:title="财富"
        android:icon="@drawable/icon_treasure_default" />
    <item
        android:orderInCategory="3"
        android:title="我的"
        android:icon="@drawable/icon_my_default" />
</menu>

private void initNavigationView() {
    BottomNavigationViewHelper.disableShiftMode(bottomNavigationView);
    bottomNavigationView.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                viewPager.setCurrentItem(item.getOrder());
                return false;
            }
        });   
}

public class BottomNavigationViewHelper {
    public void disableShiftMode(BottomNavigationView navigationView) {
        BottomNavigationMenuView menuView = (BottomNavigationMenuView) navigationView.getChildAt(0);
        try {
            //修改BottomNavigationMenuView中mShiftingMode变量的值
            //达到均分宽度的效果
            Field shiftingMode = menuView.getClass().getDeclaredField("mShiftingMode");
            shiftingMode.setAccessible(true);
            shiftingMode.setBoolean(menuView, false);
            shiftingMode.setAccessible(false);

            //修改BottomNavigationItemView中mShiftingMode变量的值
            //达到正常显示文字的效果
            for (int i = 0; i < menuView.getChildCount(); i++) {
                BottomNavigationItemView itemView = (BottomNavigationItemView) menuView.getChildAt(i);
                itemView.setShiftingMode(false);
                itemView.setChecked(itemView.getItemData().isChecked());
            }

        } catch (Exception e) {
            e.printStackTrace();
        }
    }
}