Material Design——控件大汇总(三)

我尽量不打错别字，用词准确，不造成阅读障碍。

汇总三主要是讲一些突然想起来或新接触的控件，会随时更新，如果想了解其他控件及布局，请移步我的上一篇文章Material Design——控件大汇总(二)；目前有BottomNavigationView

BottomNavigationView

最终效果图：

这个布局设置了padding所以看起来有些奇怪。如果需要代码，请跳到最后一部分。

一般的BottomNavigationView只可以设置三个，超出时就会有动画，且没有提供取消的方法，目前只有使用反射修改：

效果()：

配上ViewPager的时候效果更是绚烂，不忍直视。

使用方法：

 <android.support.design.widget.BottomNavigationView
        android:id="@+id/nv_navigation"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_alignParentBottom="true"
        android:background="#cccccc"
        app:itemIconTint="@drawable/bottom_navigation_selector"
        app:itemTextColor="@drawable/bottom_navigation_selector"
        app:menu="@menu/navigation">
    android.support.design.widget.BottomNavigationView>

itemIconTint：是图片的效果，使用selector可以改变颜色，默认情况与上图实例差不多。
itemTextColor：是文字的效果，与图片一样。

selector如下：

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="#303F9F" android:state_checked="true"/>
    <item android:color="#666666" android:state_checked="false"/>
selector>

menu如下：

<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/navigation_home"
        android:icon="@drawable/tab1check"
        android:title="@string/recycler_view" />
    <item
        android:id="@+id/navigation_dashboard"
        android:icon="@drawable/tab2check"
        android:title="@string/recycler_view" />
    <item
        android:id="@+id/navigation_notifications"
        android:icon="@drawable/tab3check"
        android:title="@string/recycler_view" />
    <item
        android:id="@+id/navigation_person"
        android:icon="@drawable/app_icon_checked"
        android:title="@string/recycler_view" />
    <item
        android:id="@+id/navigation_person2"
        android:icon="@drawable/chat_icon_96"
        android:title="@string/recycler_view" />
menu>

Activity代码如下：

navigationView = (BottomNavigationView) findViewById(R.id.nv_navigation);
BottomNavigationViewHelper.disableShiftMode(navigationView);  //通过反射取消默认动画
navigationView.setOnNavigationItemSelectedListener(onNavigationItemSelectedListener);
private BottomNavigationView.OnNavigationItemSelectedListener onNavigationItemSelectedListener = new BottomNavigationView.OnNavigationItemSelectedListener() {
        @Override
        public boolean onNavigationItemSelected(@NonNull MenuItem item) {
            switch (item.getItemId()) {
                case R.id.navigation_home:
                    return true;
                case R.id.navigation_dashboard:
                    return true;
                case R.id.navigation_notifications:
                    return true;
                case R.id.navigation_person:
                    return true;
                case R.id.navigation_person2:  //case不写则该view将没有点击效果
                    return true;
            }
            return false;
        }
    };

反射代码如下：

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("BNVHelper", "Unable to get shift mode field", e);
        } catch (IllegalAccessException e) {
            Log.e("BNVHelper", "Unable to change value of shift mode", e);
        }
    }
}

若要加上消息提醒，代码如下：

BottomNavigationMenuView menuView = (BottomNavigationMenuView) navigationView.getChildAt(0);
View tab = menuView.getChildAt(3);
BottomNavigationItemView itemView = (BottomNavigationItemView) tab;
View badge = LayoutInflater.from(this).inflate(R.layout.menu_unrend_num, menuView, false);
itemView.addView(badge);
TextView count = (TextView) badge.findViewById(R.id.tv_msg_count);
count.setText("1");

布局如下（可自行调整）：
R.layout.menu_unrend_num

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="match_parent"
              android:layout_height="match_parent">
    <TextView
        android:id="@+id/tv_msg_count"
        android:layout_width="15dp"
        android:layout_height="15dp"
        android:layout_gravity="center"
        android:layout_marginLeft="10dp"
        android:layout_marginTop="3dp"
        android:background="@drawable/bg_red_circle"
        android:gravity="center"
        android:textColor="#ffffff"
        android:textSize="12sp"
        android:visibility="visible" />
LinearLayout>

添加一个红色的圆背景，代码如下：
bg_red_circle

<shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:shape="oval">
    <size
        android:width="5dp"
        android:height="5dp"/>
    <solid android:color="#ff0000"/>
shape>

参考文章（感谢）：
http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2017/0428/7888.html
https://blog.csdn.net/a_zhon/article/details/78334515