Android原生底部标签 BottomNavigationView+Fragment 解决当item大于三出现布局不平均的问题

Android原生底部标签 BottomNavigationView+Fragment 解决当item大于三出现布局不平均的问题项目目录结构，文章末尾有解决当item大于三出现布局不平均的问题

在开始之前导入这个包

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

Android原生底部标签 BottomNavigationView+Fragment 解决当item大于三出现布局不平均的问题

将这几个图片添加进去 Android原生底部标签 BottomNavigationView+Fragment 解决当item大于三出现布局不平均的问题

二、在res新建一个menu文件，在这文件夹下新建一个main_bottom_navigation.xml

插入如下代码，这是BottomNavigationView的item元素。

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <item
        android:id="@+id/menu_message"
        android:enabled="true"
        android:icon="@drawable/message"
        app:showAsAction="ifRoom"
        android:title="消息" />
    <item
        android:id="@+id/menu_contacts"
        android:enabled="true"
        android:icon="@drawable/icon_contacts"
        app:showAsAction="ifRoom"
        android:title="联系人" />
    <item
        android:id="@+id/menu_discover"
        android:enabled="true"
        android:icon="@drawable/icon_discover"
        app:showAsAction="ifRoom"
        android:title="发现" />
    <item
        android:id="@+id/menu_me"
        android:enabled="true"
        app:showAsAction="ifRoom"
        android:icon="@drawable/me"
        android:title="我" />
</menu>

然后在drawable文件夹下新建bottom_navigation_item_selector.xml文件，插入如下代码，这段代码的作用是当你选定某个item，就将它的颜色变成蓝色，未选中则是灰色。

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:color="@color/theme" android:state_checked="true" />
    <item android:color="@color/bottom_navigation_normal" android:state_checked="false" />
</selector>

activity_main.xml代码如下

<?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">
 
    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:background="@color/black_2c"
        app:titleTextColor="@color/write" />

    <FrameLayout
        android:id="@+id/ll_frameLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@id/bv_bottomNavigation"
        android:layout_below="@id/toolbar" />


    <android.support.design.widget.BottomNavigationView
        android:id="@+id/bv_bottomNavigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:background="@color/write"
        app:labelVisibilityMode="labeled"
        app:itemIconTint="@drawable/bottom_navigation_item_selector"
        app:itemTextColor="@drawable/bottom_navigation_item_selector"
        app:menu="@menu/main_bottom_navigation" />
</RelativeLayout>

fragment_account.xml代码如下

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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:gravity="center"
        android:text="我"
        android:textColor="@color/theme"
        android:textSize="23sp" />

</android.support.constraint.ConstraintLayout>

其他的fragment_contacts.xml、fragment_discover.xml、fragment_message.xml分别对应

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    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:gravity="center"
        android:text="联系人"
        android:textColor="@color/theme"
        android:textSize="23sp" />
</android.support.constraint.ConstraintLayout>

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    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:gravity="center"
        android:text="发现"
        android:textColor="@color/theme"
        android:textSize="23sp" />
</android.support.constraint.ConstraintLayout>

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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:gravity="center"
        android:text="消息"
        android:textColor="@color/theme"
        android:textSize="23sp" />
</android.support.constraint.ConstraintLayout>

AccountFragment、ContactsFragment、DiscoverFragment、MessageFragment这几个Fragment分别对应如下代码，其实都是一样的，只是对应不一样的布局文件。

public class AccountFragment extends Fragment {

    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        return inflater.inflate(R.layout.fragment_account, container, false);
    }
}

public class ContactsFragment extends Fragment {

    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        return  inflater.inflate(R.layout.fragment_contacts, container, false);
    }
}

public class DiscoverFragment extends Fragment {
    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        return inflater.inflate(R.layout.fragment_discover, container, false);
    }
}

public class MessageFragment extends Fragment {

    public MessageFragment(){

    }

    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        return inflater.inflate(R.layout.fragment_message, container, false);
    }
}

接下来就是MainActivity代码了

public class MainActivity extends AppCompatActivity {

    private Toolbar mToolbar;
    private BottomNavigationView mBottomNavigationView;

    private int lastIndex;
    List<Fragment> mFragments;

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

    }

    public void initView() {
        mToolbar = findViewById(R.id.toolbar);

    }

    public void initData() {
        setSupportActionBar(mToolbar);
        mFragments = new ArrayList<>();
        mFragments.add(new MessageFragment());
        mFragments.add(new ContactsFragment());
        mFragments.add(new DiscoverFragment());
        mFragments.add(new AccountFragment());
        // 初始化展示MessageFragment
        setFragmentPosition(0);
    }

    public void initBottomNavigation() {
        mBottomNavigationView = findViewById(R.id.bv_bottomNavigation);
//           解决当item大于三个时，非平均布局问题

//       BottomNavigationViewHelper.disableShiftMode(mBottomNavigationView);

        mBottomNavigationView.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                switch (item.getItemId()) {
                    case R.id.menu_message:
                        setFragmentPosition(0);
                        break;
                    case R.id.menu_contacts:
                        setFragmentPosition(1);
                        break;
                    case R.id.menu_discover:
                        setFragmentPosition(2);
                        break;
                    case R.id.menu_me:
                        setFragmentPosition(3);
                        break;
                    default:
                        break;
                }
                // 这里注意返回true,否则点击失效
                return true;
            }
        });
    }


    private void setFragmentPosition(int position) {
        FragmentTransaction ft = getSupportFragmentManager().beginTransaction();
        Fragment currentFragment = mFragments.get(position);
        Fragment lastFragment = mFragments.get(lastIndex);
        lastIndex = position;
        ft.hide(lastFragment);
        if (!currentFragment.isAdded()) {
            getSupportFragmentManager().beginTransaction().remove(currentFragment).commit();
            ft.add(R.id.ll_frameLayout, currentFragment);
        }
        ft.show(currentFragment);
        ft.commitAllowingStateLoss();
    }
}

好了所有代码都已经完成，可以运行看效果了。

-----------------------------------------------------------------------------------------

可以看到这里有段代码被注释了，这是句代码本来是为了解决当item大于三个的时候布局不平均，（ps:懒得作图，如有需要可以自行尝试）

那既然要解决为什么要注释呢，是因为我发现其实根本不需要了。

Android原生底部标签 BottomNavigationView+Fragment 解决当item大于三出现布局不平均的问题

网上很多了都是写这样一个帮助类来解决问题然后在activity里用上面的代码来调用 BottomNavigationViewHelper

public class BottomNavigationViewHelper {
    @SuppressLint("RestrictedApi")
    public static void disableShiftMode(BottomNavigationView view) {
        BottomNavigationMenuView menuView = (BottomNavigationMenuView) view.getChildAt(0);
        try {
            Field shiftingMode = menuView.getClass().getDeclaredField("labelVisibilityMode");
            shiftingMode.setAccessible(true);
            shiftingMode.setInt(menuView, 1);//labelVisibilityMode
//            shiftingMode.setBoolean(menuView, false);//mShiftingMode
            shiftingMode.setAccessible(false);
            for (int i = 0; i < menuView.getChildCount(); i++) {
                BottomNavigationItemView item = (BottomNavigationItemView) menuView.getChildAt(i);
                //noinspection RestrictedApi
//                item.setShiftingMode(false);
                item.setShifting(false);
                // set once again checked value, so view will be updated
                //noinspection RestrictedApi
                item.setChecked(item.getItemData().isChecked());

            }
        } catch (NoSuchFieldException e) {
            Log.e("BNVHelper", "Unable to get shift mode field", e);
        } catch (IllegalAccessException e) {
            Log.e("BNVHelper", "Unable to change value of shift mode", e);
        }
    }
}

但是！现在只需要在activity_main.xml的

android.support.design.widget.BottomNavigationView下添加这一行代码就可以解决当item大于三个出现布局不平均的问题了

Android原生底部标签 BottomNavigationView+Fragment 解决当item大于三出现布局不平均的问题

app:labelVisibilityMode="labeled"

Gitee链接：https://gitee.com/xg520/BottomDemo.git

Android原生底部标签 BottomNavigationView+Fragment 解决当item大于三出现布局不平均的问题

相关推荐