BottomNavigationView
今天创建工程的时候无意间点到了Bottom Navigatoin Activity于是就四处学习了解了一下,写一篇文章,以免自己忘记。
第一步
你可以直接使用studio自带的创建一个Activity,new-Activity-Bottom Navigation Activity创建一个Activity。
你会发现系统自动给创建好了模板,特别注意的是res文件夹下的menu菜单,多了一个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" />
</menu>
Activity的xml文件里面BottomNavigationView的代码
<android.support.design.widget.BottomNavigationView
android:id="@+id/navigation"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="0dp"
android:layout_marginEnd="0dp"
android:background="?android:attr/windowBackground"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:menu="@menu/navigation" />
Activity中的代码
private TextView mTextMessage;
private BottomNavigationView.OnNavigationItemSelectedListener mOnNavigationItemSelectedListener
= new BottomNavigationView.OnNavigationItemSelectedListener() {
@Overridei
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;
}
return false;
}
};
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main2);
mTextMessage = (TextView) findViewById(R.id.message);
BottomNavigationView navigation = (BottomNavigationView) findViewById(R.id.navigation);
navigation.setOnNavigationItemSelectedListener(mOnNavigationItemSelectedListener);
}
运行一下,显示的效果都是默认的。按照我们自己的需求,我们将会对的文字和图片进行修改,还有文字和图片的颜色。
第二步,了解一下Vector Asset的使用
BottomNavigationView里面添加的图片都是使用的xml的格式
其中的一个图片示例
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportWidth="24.0"
android:viewportHeight="24.0">
<path
android:fillColor="#FF000000"
android:pathData="M3,13h8L11,3L3,3v10zM3,21h8v-6L3,15v6zM13,21h8L21,11h-8v10zM13,3v6h8L21,3h-8z" />
</vector>
首先制作这样的图片对格式是又要求的
点击drawable-new-Vector Asset
Asset Type选择使用系统的图片还是本地文件,本地文件的格式要求问SVG和PSD的,下面讲解的是添加自己的本地图片,你也可以选择Clip Art中的其他系统图片。
然后点击Local file,选择已经准备好的svg的图片,点击next和finish即可创建一个vector类型的图片
在你的drawable文件夹里面就会出现ic_marker.xml的一张图片,打开后是这个样子
<vector android:height="24dp" android:viewportHeight="1024"
android:viewportWidth="1024" android:width="24dp" xmlns:android="http://schemas.android.com/apk/res/android">
<path android:fillColor="#009DD9" android:pathData="M512,249.98c-99.39,0 -180.71,81.32 -180.71,180.71s81.32,180.71 180.71,180.71 180.71,-81.32 180.71,-180.71 -81.32,-180.71 -180.71,-180.71zM512,551.15c-66.26,0 -120.47,-54.21 -120.47,-120.47s54.21,-120.47 120.47,-120.47 120.47,54.21 120.47,120.47 -54.21,120.47 -120.47,120.47z"/>
<path android:fillColor="#009DD9" android:pathData="M512,39.15c-216.85,0 -391.53,174.68 -391.53,391.53 0,349.36 391.53,572.24 391.53,572.24s391.53,-222.87 391.53,-572.24c0,-216.85 -174.68,-391.53 -391.53,-391.53zM512,930.64C424.66,873.41 180.71,686.68 180.71,430.68c0,-183.72 147.58,-331.29 331.29,-331.29s331.29,147.58 331.29,331.29c0,256 -243.95,442.73 -331.29,499.95z"/>
</vector>
第三步,假设你已经准备好了三张图片
然后更新menu中的navigation.xml,设置icon属性为你自己的图片,title为下方显示的文字
<?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_map"
android:title="@string/title_home" />
<item
android:id="@+id/navigation_dashboard"
android:icon="@drawable/ic_earth"
android:title="@string/title_dashboard" />
<item
android:id="@+id/navigation_notifications"
android:icon="@drawable/ic_marker"
android:title="@string/title_notifications" />
</menu>
预览后的效果
发现已经成功的换成了自己的图片
第四步,更改点击和没有点击时的颜色
点击包名-New-Android Resource File
Resource type选择Drawable,写好文件名,点击OK
打开main2_selector.xml文件显示一下代码
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
</selector>
想要更改颜色需要添加下面两句话,这样颜色选择文件就写好了
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!--选中的颜色-->
<item android:color="@color/red" android:state_checked="true" />
<!--未选中的颜色-->
<item android:color="@color/green" android:state_checked="false" />
</selector>
color.xml 中的代码
<?xml version="1.0" encoding="utf-8"?>
<resources>
......
<color name="red">#ff0000</color>
<color name="green">#00ff00</color>
</resources>
最后在Activity的xml文件里的BottomNavigationView组件中添加图片和文字的颜色属性
<android.support.design.widget.BottomNavigationView
......
app:itemIconTint="@drawable/main2_selector"
app:itemTextColor="@drawable/main2_selector"
.......
app:menu="@menu/navigation" />
这样就是实现了颜色的更改,效果如下
注意:如果里面的图标超过了三个
如果图标超过了三个,需要在BottomNavigationView组件中添加属性,不然就会只显示选中的图片下的文字,就像这样:
<android.support.design.widget.BottomNavigationView
......
app:labelVisibilityMode="labeled"
......
>
labelVisibilityMode中的属性值:
labeled : 保持所有文字便签显示
unlabeled :只显示图标
selected :在选中的时候显示文字标签,有动画效果
auto : 在 1-3 个按钮时使用 labeled ,大于 3 个按钮使用 selected
最后,如果你创建的是一个Empty Activity
你需要创建一个menu文件夹和一个menu.xml
在res上右键new-Directory 命名问menu
然后在menu文件夹上右键new-Menu resource file输入文件名,点击ok即可。
然后照上述步骤添加相应的代码。