实现android studio底部导航栏四个标签的效果

来源:互联网 发布:咸阳网络买花花店 编辑:程序博客网 时间:2024/05/16 07:57

研发任务是实现如下图这样的效果:

在android studio中新建工程时,选择Bottom Navigation Activity,得到的效果是这样的:



效果差距不小,那么就一步步来。

先添加一个标签,凑够四个标签。

修改strings.xml文件内容如下:

<resources>    <string name="app_name">My Application</string>    <string name="title_home">Home</string>    <string name="title_dashboard">Dashboard</string>    <string name="title_notifications">Notifications</string>    <string name="title_mine">mine</string></resources>

修改navigation.xml文件内容如下:

<?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="@string/title_home" />    <item        android:id="@+id/navigation_dashboard"        android:icon="@drawable/ic_dashboard_black_24dp"        android:title="@string/title_dashboard" />    <item        android:id="@+id/navigation_notifications"        android:icon="@drawable/ic_notifications_black_24dp"        android:title="@string/title_notifications" />    <item        android:id="@+id/navigation_mine"        android:icon="@drawable/ic_mine_black_24dp"        android:title="@string/title_mine" /></menu>

还要在drawable下添加一个文件ic_mine_black_24dp.xml,文件内容如下:

<vector xmlns:android="http://schemas.android.com/apk/res/android"    android:width="24dp"    android:height="24dp"    android:viewportHeight="24.0"    android:viewportWidth="24.0">    <path        android:fillColor="#FF000000"        android:pathData="M10,20v-6h4v6h5v-8h3L12,3 2,12h3v8z" /></vector>
还有一个响应函数要改:

private BottomNavigationView.OnNavigationItemSelectedListener mOnNavigationItemSelectedListener        = new BottomNavigationView.OnNavigationItemSelectedListener() {    @Override    public boolean onNavigationItemSelected(@NonNull MenuItem item) {        switch (item.getItemId()) {            case R.id.navigation_home:                mTextMessage.setText(R.string.title_home);                return true;            case R.id.navigation_dashboard:                mTextMessage.setText(R.string.title_dashboard);                return true;            case R.id.navigation_notifications:                mTextMessage.setText(R.string.title_notifications);                return true;            case R.id.navigation_mine:                mTextMessage.setText(R.string.title_mine);                return true;        }        return false;    }};
至此,四个标签的实现效果是这样的:



当标签多于3个时,会自动出现动态效果,当前的标签有文字且颜色突出显示,其它标签没有文字且被挤在一边。接下来要想办法去掉这个动态效果。

先在mainactivity的OnCreate函数中添加如下代码:

//去掉动画效果BottomNavigationViewHelper.disableShiftMode(navigation);

这行代码中的BottomNavigationViewHelper类是网上找到的,实现代码如下:

import android.support.design.internal.BottomNavigationItemView;import android.support.design.internal.BottomNavigationMenuView;import android.support.design.widget.BottomNavigationView;import android.util.Log;import java.lang.reflect.Field;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);                //noinspection RestrictedApi                item.setShiftingMode(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);        }    }}

在这个类里,用setShiftingMode设置了每个标签的动态效果。

成功。

原创粉丝点击