基本使用总结美高梅网投平台,BottomNavigationVie

2020-03-14 03:05 来源:未知

BottomNavigationView 是安卓官方提供的底部导航栏,能够方便的实现下图中的底部导航效果。

不多说先上效果图

不怕跌倒,所以飞翔

现在可能很多人实现类似微信界面结构更多是使用tablayout viewpager(嵌套fragment),目前谷歌出现了BottomNavigationView这个控件,本篇文章将介绍其具体的使用,也欢迎大家互相讨论:
话不多说先上效果图:

美高梅网投平台 1Paste_Image.png

美高梅网投平台 2

特别说明:

美高梅网投平台 3

按照 官方的设计规范 当底部导航的标签在 3--5 个之间的时候, 可以使用BottomNavigationView 。

zhouchatian.com

BottomNavigationView 是安卓官方提供的底部导航栏,能够方便的实现下图中的底部导航效果。当导航标签少于3个的时候,也可以使用,不会报错,但实际项目中一般不会有少于三个的;如果导航标签超过5个,在使用BottomNavigationView 时在运行期会报错,错误信息如下:
java.lang.IllegalArgumentException: Maximum number of items supported by BottomNavigationView is 5. Limit can be checked with BottomNavigationView#getMaxItemCount()。意思是说,最多不能超过 5 个条目!

Screenshot_2016-10-25-00-29-57-581_com.example.b9.png

当导航标签少于3个的时候,也可以使用,不会报错,但实际项目中一般不会有少于三个的;如果导航标签超过5个,在使用BottomNavigationView 时在运行期会报错,错误信息如下:java.lang.IllegalArgumentException: Maximum number of items supported by BottomNavigationView is 5. Limit can be checked with BottomNavigationView#getMaxItemCount()。意思是说,最多不能超过 5 个条目!

添加依赖

compile 'com.android.support:design:25.0.0'

简单的使用

1、在 build.gradle 文件中增加依赖:

BottomNavigationView是放置在design包中的,所以,使用前需要先引入com.android.support:design:25.1.0包,引入方式有两种,一种是直接从当前module的 gradle 文件中编辑,一种是从Project Structure 界面的 dependences 选项卡中导入。导入方式,参考下图:

添加控件

在布局文件添加BottomNavigationView组件

<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="com.zhouchatian.baseandroid.MainActivity">

    <TextView
        android:id="@ id/text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="18sp"
        android:layout_centerInParent="true"/>

    <android.support.design.widget.BottomNavigationView
        android:id="@ id/navigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        app:menu="@menu/navigation"/>

</RelativeLayout>

1.xml的一些标签说明:

  • android:background BottomBavigationView的背景颜色
  • app:itemBackground 条目的背景色。设置之后在切换选项时将无法看到水波纹效果
  • app:itemIconTint 条目图标的颜色,这里可以是单一的颜色,也可以是select形式的颜色,但是这里建议是select的颜色
  • app:itemTextColor 文字的颜色,这个也和上面的一样,也可以设置select
  • app:menu 可以设置底部显示的Menu
  • setOnNavigationItemSelectedListener() 设置选中条目的监听
  • getMenu() 获取menu文件
  • setSelectedItemId(R.id.sports) 设置默认选中的选项

这里贴一个简单的颜色Select和布局的Menu

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="#f4b733" android:state_checked="true"></item>
    <item android:color="#666565"></item>
</selector>

<?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:icon="@drawable/ic_menu_camera"
        android:title="音乐"/>
    <item
        android:icon="@drawable/ic_menu_gallery"
        android:title="体育"/>
    <item
        android:icon="@drawable/ic_menu_manage"
        android:title="新闻"/>
    <item
        android:icon="@drawable/ic_menu_send"
        android:title="我的"/>
</menu>
compile 'com.android.support:design:25.0.0'

美高梅网投平台 4直接从当前Module的gradle文件中编辑.png美高梅网投平台 5从Project Structure 界面的 dependences 选项卡中导入.png

添加按钮

在res下创建navigation.xml 放在menu文件夹下,如果没有就创建一个menu文件夹

<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@ id/bottom_home"
        android:icon="@mipmap/ic_home_white_24dp"
        android:title="首页" />
    <item
        android:id="@ id/bottom_book"
        android:icon="@mipmap/ic_book_white_24dp"
        android:title="书本" />

    <item
        android:id="@ id/bottom_collection"
        android:icon="@mipmap/ic_favorite_white_24dp"
        android:title="收藏"/>

    <item
        android:id="@ id/bottom_setting"
        android:icon="@mipmap/ic_tv_white_24dp"
        android:title="设置" />
</menu>

要说下的这个按钮只能创建3个到5个,多了或少了都会报错。

2.BottomNavigationView的细节

  • 禁用ShiftingMode模式
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);
        }
    }
}

然后代码调用

BottomNavigationView bottomNavigationView = (BottomNavigationView) findViewById(R.id.bottom_navigation_bar);
BottomNavigationViewHelper.disableShiftMode(bottomNavigationView);

2、布局:

  • android:background

添加监听

public class MainActivity extends AppCompatActivity {
    private TextView mTextView;
    private BottomNavigationView mNavigationView;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mTextView = (TextView) findViewById(R.id.text);
        mNavigationView = (BottomNavigationView) findViewById(R.id.navigation);
        mNavigationView.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                mTextView.setText(item.getTitle().toString().toUpperCase());
                return true;
            }
        });
    }
}

这样一个建的底部导航就做好了,控件使用简单,带来局限性,只有修改一些。

这一系列文章的地址,希望对大家有帮助

  • MaterialDesign系列文章(一)转场动画

  • MaterialDesign系列文章(二)Theme主题设置

  • MaterialDesign系列文章(三)Palette库来获取图片的主要色彩

  • 美高梅网投平台,MaterialDesign系列文章(四)RecealAnimation动画的使用

  • MaterialDesign系列文章(五)ToolBar的使用

  • MaterialDesign系列文章(六)沉浸式状态栏的使用

  • MaterialDesign系列文章(七)TabLayout的使用

  • MaterialDesign系列文章(八)CollapsingToolbarLayout的使用

  • MaterialDesign系列文章(九)AppBarLayout的使用

  • MaterialDesign系列文章(十)NavigationView和DrawerLayout的使用

  • MaterialDesign系列文章(十一)NestedScrollView的使用

  • MaterialDesign系列文章(十二)TextInputLayout的使用

  • MaterialDesign系列文章(十三)FloatingActionButton的使用

  • MaterialDesign系列文章(十四)SnackBar的使用

  • MaterialDesign系列文章(十五)BottomSheet的使用

  • MaterialDesign系列文章(十六)BottomNavigationView的使用

  • MaterialDesign系列文章(十七)Behavior的相关问题

  • CoordinatorLayout的分析

<android.support.design.widget.BottomNavigationView    
android:id="@ id/bnv_mainactivity" 
android:layout_width="match_parent"
android:layout_height="wrap_content"  
android:layout_alignParentBottom="true"    
app:itemBackground="@color/colorAccent"  
app:itemIconTint="@android:color/white"    
app:itemTextColor="@android:color/white"   
app:menu="@menu/bottom">
</android.support.design.widget.BottomNavigationView>

整个BottomNavigationView 的背景色,设置背景色之后,切换选项时依旧会有水波纹效果(设置背景色也是为了将底部导航和上方的内容进行分割区分)

修改

app:itemIconTint="#FFFFFF"设置图标的颜色

app:itemTextColor="#FFFFFF"设置文字的颜色

app:itemBackground="@color/colorPrimary" 设置背景色

如果不设置就是上图的颜色,官方提供了三个颜色

美高梅网投平台 6

2017-04-25_211939.png

<android.support.design.widget.BottomNavigationView
        android:id="@ id/navigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        app:itemIconTint="#FFFFFF"
        app:itemTextColor="#FFFFFF"
        app:itemBackground="@color/colorPrimary"
        app:menu="@menu/navigation"/>

当然你也可以在代码中设置

setItemBackgroundResource(int resId)
setItemIconTintList(ColorStateList tint)
setItemTextColor(ColorStateList textColor)

在实际开发中使用item.getItemId()使用switch来判断选中了哪一个

mNavigationView.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                switch (item.getItemId()) {
                    case R.id.bottom_home:
                        mTextView.setText(item.getTitle());
                        break;
                    case R.id.bottom_book:
                        mTextView.setText(item.getTitle());
                        break;
                    case R.id.bottom_collection:
                        mTextView.setText(item.getTitle());
                        break;
                    case R.id.bottom_setting:
                        mTextView.setText(item.getTitle());
                        break;
                }
                return true;
            }
        });

其实这个还有另外一个监听

BottomNavigationView.OnNavigationItemReselectedListener

官方解释用于重选的监听,特意提下是希望各位用的时候别选错了。

项目地址

3、menu菜单项:

  • app:itemBackground

问题

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
 <item    android:icon="@drawable/ic_account_balance_black_24dp"  android:title="主页" />   
 <item    android:icon="@drawable/ic_account_balance_wallet_black_24dp"   android:title="钱包" /> 
 <item   android:icon="@drawable/ic_add_shopping_cart_black_24dp" android:title="购物" />  
 <item   android:icon="@drawable/ic_account_circle_black_24dp"  android:title="我的" />
</menu>

条目的背景色。设置之后在切换选项时将无法看到水波纹效果

1. 默认选中的是第一个,但是我们要默认选中其他的怎么办?

在menu.xml中使用 android:checked="true"

<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@ id/bottom_home"
        android:icon="@mipmap/ic_home_white_24dp"
        android:title="首页" />
    <item
        android:id="@ id/bottom_book"
        android:icon="@mipmap/ic_book_white_24dp"
        android:title="书本" />

    <item
        android:id="@ id/bottom_collection"
        android:icon="@mipmap/ic_favorite_white_24dp"
        android:title="收藏"
        android:checked="true"/>

    <item
        android:id="@ id/bottom_setting"
        android:icon="@mipmap/ic_tv_white_24dp"
        android:title="设置" />
</menu>

或者代码中这么写

mNavigationView.getMenu().getItem(0).setChecked(false);
        mNavigationView.getMenu().getItem(2).setChecked(true);

4、activity中使用:

  • app:itemIconTint
@BindView(R.id.bnv_mainactivity)
BottomNavigationView bnvMainactivity;
@BindView(R.id.activity_main)
RelativeLayout activityMain;
@Overrideprotected void onCreate(Bundle savedInstanceState) {   super.onCreate(savedInstanceState);    
setContentView(R.layout.activity_main);   
ButterKnife.bind(this);  

bnvMainactivity.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() { 
@Override     
   public boolean onNavigationItemSelected(@NonNull MenuItem item) {  
      setTitle(item.getTitle());      
      return true;     
   }   
 });
}

条目图标的颜色。可以是单一颜色,也可以是颜色selector。通常建议设置selector,当未选中时指定一种颜色,选中时再指定另一种颜色。该selector 定义在 res -- color 目录下。(未设置该属性时,默认未选中状态为深灰色,选中状态时的颜色为当前主题的 colorPrimary 颜色)

5、注意:
底部导航栏高度默认是 56dp。
菜单元素只能是 3~5 个。如果个数少于3个或者多于5个,则会报错。
icon 的选中颜色默认是 @color/colorPrimary。当然你也可以使用app:itemIconTint="@android:color/white"来自定义,这样定以后,所有的 icon 颜色都是这个了。
菜单元素文字的默认颜色是 @color/colorPrimary。你可以使用app:itemTextColor="@android:color/white"自定义。
底部导航栏背景颜色默认是当前样式的背景色(白色/黑色),你可以使用app:itemBackground="@android:color/black"来更改。

  • itemTextColor

条目文本的颜色。可以是单一颜色,也可以是颜色selector。通常建议设置selector,当未选中时指定一种颜色,选中时再指定另一种颜色。该selector 定义在 res -- color 目录下。未设置该属性时,默认未选中状态为深灰色,选中状态时的颜色为当前主题的 colorPrimary 颜色)

  • app:menu

当前BottomNavigationView 所引用的menu 菜单。

  • setOnNavigationItemSelectedListener()

设置导航条目被选中时的监听器

  • getMenu

获取当前BottomNavigationView 中所引用的 menu 菜单对象

最终实现效果:

美高梅网投平台 7BottomNavigationView.gif

  • BottomNavigationViewActivity.java
/** * 作者:CnPeng * <p> * 时间:2017/4/11:下午8:32 * <p> * 说明:安卓原生底部导航栏 BottomNavigationView 的基本使用示例 * <p> * 使用时需要先引入 design 包 * <p> * 底部Item的数量不能超过5 ,否则会报错,报错信息如下: java.lang.IllegalArgumentException: Maximum number of items supported by * BottomNavigationView is 5. Limit can be checked with BottomNavigationView#getMaxItemCount() * <p> * 当item超过3个时,未被选中的item 只显示图标,只有被选中的才会显示图标和文字;而3个及3个以内时图标和文字都会显示 * <p> * 如果底部Item 想实现小红点,就无法使用BottomNavigationView 了 。//~~ */public class BottomNavigationViewActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_bottom_navigation_view); final TextView tv_whichItemSelected =  findViewById(R.id.tv_whichItemSelected); BottomNavigationView bnv_001 = (BottomNavigationView) findViewById(R.id.bnv_001); //为底部导航设置条目选中监听 bnv_001.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() { @Override public boolean onNavigationItemSelected( @NonNull MenuItem item) { switch (item.getItemId { case R.id.item1: tv_whichItemSelected.setText(item.getTitle; break; case R.id.item2: tv_whichItemSelected.setText(item.getTitle; break; case R.id.item3: tv_whichItemSelected.setText(item.getTitle; break; case R.id.item4: tv_whichItemSelected.setText(item.getTitle; break; case R.id.item5: tv_whichItemSelected.setText(item.getTitle; break; } return true; //这里返回true,表示事件已经被处理。如果返回false,为了达到条目选中效果,还需要下面的代码 // item.setChecked; 不论点击了哪一个,都手动设置为选中状态true(该控件并没有默认实现) // 。如果不设置,只有第一个menu展示的时候是选中状态,其他的即便被点击选中了,图标和文字也不会做任何更改 } }); //默认选中底部导航栏中的第三个 bnv_001.getMenu().getItem.setChecked; }}
  • activity_bottom_navigation.xml
<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:andro xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent"> <TextView android: android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true"/> <!-- itemBackground item的背景 ,设置之后将无法看到默认的水波纹效果 itemIconTint item图标的颜色,可以是固定值,可以是 颜色selector(定义在 res —— color 目录) itemTextColor item文字的颜色,可以是固定值,可以是 颜色selector 如果不设置itemIconTint和 itemTextColor的时候,当某一个item被选中,选中时图标和文字的颜色是 当前主题的 colorPrimary 颜色 background 整个底部导航的背景色,设置之后,在切换被选中的item时依旧具有水波纹效果。(设置background 也是为了能够明显的区分底部导航和上方的具体内容) --> <android.support.design.widget.BottomNavigationView android: android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:background="@color/e7e7e6" app:itemIconTint="@color/selectot_bnv" app:itemTextColor="@color/selectot_bnv" app:menu="@menu/menu_bottom_navigation"/></RelativeLayout>
  • menu_bottom_navigation.xml
<?xml version="1.0" encoding="utf-8"?><menu xmlns:andro> <item android: android:icon="@drawable/hot_green" android:title="Item1"/> <item android: android:icon="?android:attr/actionModeShareDrawable" android:title="Item2"/> <item android: android:icon="@drawable/act_attentioned" android:title="Item3"/> <item android: android:icon="@android:drawable/btn_star_big_off" android:title="Item4"/> <item android: android:icon="@drawable/mainfocus" android:title="Item5"/></menu>
  • selector_bnv.xml
<?xml version="1.0" encoding="utf-8"?><selector xmlns:andro> <item android:color="#f4b733" android:state_checked="true"></item> <item android:color="#666565"></item></selector>
  • BottomNavigationView 整体实现比较简单,但是扩展性不强。比如,想在某个条目的右上角加上小红点,这就行不通了。。。

  • 没有提供直接选中某项的方法,默认选中第一项。如果想更改默认选中,就需要通过getMenu 方法获取menu 对象,然后获取其中的具体 item,最后再调用item 的 setChecked

  • 总的条目数量不能超过5个。当条目数量小于等于三个时,能将条目的图标和title 完全展示出来。如果大于3个小于等于5个,则只有被选中的条目才能同时展示图标和title,未被选中的条目只展示图标。

  • 创建 menu 菜单的时候,没必要手写,可以切换到design模式下,直接拖拽,然后再最右侧更改属性即可,大致如下图:

美高梅网投平台 8Paste_Image.png

参考:

TAG标签:
版权声明:本文由美高梅网投平台发布于新闻中心,转载请注明出处:基本使用总结美高梅网投平台,BottomNavigationVie