android Material Design 底部导航栏
发布时间
阅读量：
阅读量
android Material Design 框架中的底部导航栏设计，
达成预期效果的目标，
设置Gradle项目的依赖关系，
在Android应用中采用Bottom navigation view布局，
根据需求配置resmenu unav bottom item.xml文件，
在src MainActivity.java中实现核心业务逻辑，
提醒相关操作人员注意操作流程的正确性
android Material Design 底部导航栏
实现效果
配置gradle依赖
compile 'com.android.support:appcompat-v7:25.1.0'
//注意：V4包一定要加，material design是依赖V4包的
//不加，某些类可能报“ClassNotFoundException”
compile 'com.android.support:support-v4:25.1.0'
compile 'com.android.support:design:25.1.0'使用BottomNavigationView
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.kangda.app.MainActivity">
<!--一定要加入V4包和Material Design包的依赖-->
<!--itemIconTint设置图标的颜色-->
<!--itemTextColor设置文本标题的颜色-->
<android.support.design.widget.BottomNavigationView
android:id="@+id/nav_bottom"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_alignParentBottom="true"
app:itemIconTint="#767676"
app:itemTextColor="#767676"
app:menu="@menu/nav_bottom_item"
> </android.support.design.widget.BottomNavigationView>
</RelativeLayout>res/menu/nav_bottom_item.xml
<?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"
>
<!--showAsAction如果有剩余空间就显示出来，否则隐藏-->
<item android:id="@+id/menu_pk"
android:enabled="true"
app:showAsAction="ifRoom"
android:title="@string/menu_title_pk"
android:icon="@mipmap/menu_pk" />
<item android:id="@+id/menu_home"
android:enabled="true"
app:showAsAction="ifRoom"
android:title="@string/menu_title_home"
android:icon="@mipmap/menu_home_press" />
<item android:id="@+id/menu_mine"
android:enabled="true"
app:showAsAction="ifRoom"
android:title="@string/menu_title_mine"
android:icon="@mipmap/menu_mine" />
</menu>src/MainActivity.java
@BindView这注解依赖ButterKnife，这个不必理会
@BindView(R.id.nav_bottom)
protected BottomNavigationView navBottom;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ButterKnife.bind(this);
navBottom.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
@Override
public boolean onNavigationItemSelected(@NonNull MenuItem item) {
switch (item.getItemId()){
case R.id.menu_pk:
Toast.makeText(MainActivity.this, "PK", Toast.LENGTH_SHORT).show();
break;
case R.id.menu_home:
Toast.makeText(MainActivity.this, "主页", Toast.LENGTH_SHORT).show();
break;
case R.id.menu_mine:
Toast.makeText(MainActivity.this, "我的", Toast.LENGTH_SHORT).show();
break;
}
return false;
}
});
}注意
此份文档似乎是直接引用官方文档内容，并存在一些问题。具体来说，在下面这段代码中存在问题：
xmlns:design=”http://schema.android.com/apk/res/android.support的设计”
正确的部分应该是：
xmlns:app=”http://schemas.android.com/apk/res-auto”
layout resource file:
<android.support.design.widget.BottomNavigationView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:design="http://schema.android.com/apk/res/android.support.design"
android:id="@+id/navigation"
android:layout_width="match_parent"
android:layout_height="56dp"
android:layout_gravity="start"
design:menu="@menu/my_navigation_items" />
res/menu/my_navigation_items.xml:
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="@+id/action_search"
android:title="@string/menu_search"
android:icon="@drawable/ic_search" />
<item android:id="@+id/action_settings"
android:title="@string/menu_settings"
android:icon="@drawable/ic_add" />
<item android:id="@+id/action_navigation"
android:title="@string/menu_navigation"
android:icon="@drawable/ic_action_navigation_menu" />
</menu>该代码运行正常，并且XML布局预览没有任何显示效果。目前尚不清楚原因。
全部评论 (0)
还没有任何评论哟~