实现底部导航栏的方式是多种多样的,今天学习一下谷歌刚出的底部导航栏控件。
一、在使用BottomNavigation前需要自己先导入依赖并手动添加xml资源以及java类
库文件可以从gitHub地址:https://github.com/Ashok-Varma/BottomNavigation下载
实现效果如下:
在gitHub中文件大概是这样的
1.我们需要用到的只有bottom-navigation-bar,在这个文件夹下找到名叫ashokvarma的文件夹并将其复制到com文件夹下,如下图所示:
2.将res文件夹下的资源文件加入已经创建的项目中(有重名的就只加入其中的资源),若不加入这些资源文件那么在运行时会出现找不到R文件的情况,因为ashokvarma中的类会用到这些xml文件中的变量或者其他资源。
3.在github中找到如下位置,点击下载JAR文件
4.完成后点击File->project structure选择Dependencies选项卡,点击右边的加号选择jar dependency,然后选择刚刚下载的jar文件并确认,最后进行sync。
二、完成以上步骤后我们就已经成功添加了依赖(他喵的是真的费劲,真不知道那些直接写一句compile“xxxx.xxxx”的是怎们添加的,反正我这样添加有若干错误,望哪位大神指导一下如何像他们一样简单的添加依赖)
准备工作已经完成了,接下来需要编辑布局文件以及java程序了
1.布局文件(其实只需要把navigationBar添加到xml文件中就行)
<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=".MainActivity">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
com.ashokvarma.bottomnavigation.BottomNavigationBar>
RelativeLayout>
2.java程序
(1)若只是在xml文件中添加了导航栏就运行,那么导航栏中不会出现任东西,因此我们还需要往其中添加项目。需要在oncreate()中添加以下程序段
BottomNavigationBar iconBar;
TextBadgeItem badgeItem = new TextBadgeItem();
badgeItem.setHideOnSelect(false).setText("10").setBackgroundColorResource(R.color.coloryello).setBorderWidth(0);//设置图标右上角的圆圈加数字的显示属性
//笔记:除了这个TextBadgeItem之外还有一个ShapeBadgeItem(右上角变成五角形或者其他的)
iconBar =(BottomNavigationBar)findViewById(R.id.bottom_navigation);
iconBar.setMode(BottomNavigationBar.MODE_SHIFTING);
//笔记:底部导航栏有三种MODE
1)Default 默认效果 选中会突出,有水纹背景的变化 item未选中时不显示文字
2)FIXED 选中图形不会突出 item未选中时显示文字
3)SHIFTING 与Default效果近似
iconBar.setBackgroundStyle(BottomNavigationBar.BACKGROUND_STYLE_RIPPLE);
//笔记:1)STATIC 点击时没有水波纹效果
2)RIPPLE 点击时有水波纹效果
3)DEFAULT mode为fixed则使用static mode使用shifting则使用RIPPLE
这两个设置需要放在前面才有效
iconBar.addItem(new BottomNavigationItem(R.drawable.jiapurson,R.string.firsticonname).setActiveColorResource(R.color.colorgreen).setBadgeItem(badgeItem))
.addItem(new BottomNavigationItem(R.drawable.information
,R.string.secondiconname).setActiveColorResource(R.color.coloryello))
.addItem(new BottomNavigationItem(R.drawable.icon_three,R.string.thirdiconname).setActiveColorResource(R.color.colorPrimaryDark))
.addItem(new BottomNavigationItem(R.drawable.icon_four,R.string.forthiconname).setActiveColorResource(R.color.HONG));//向导航栏中添加item setBadgeItem()用于设置右上角的消息提醒
iconBar.setFirstSelectedPosition(0).initialise();//设置初始选中位置
(2)在添加完导航栏后我们需要对导航栏的item添加监听,以完成item间的切换动作。每一个切换项都是一个Fregment,每一个Fragment都可以像activity一样加载XML布局文件完成页面布局,所以我们需要在此创建4个布局(fragment1…)和一个Fragment的子类。每个activity中可以包含多个Fragment,两者具有相同的生命周期。
接下来看具体的代码
Fragment010.java
package com.example.r.achat;
import android.annotation.SuppressLint;
import android.os.Bundle;
import android.support.annotation.LayoutRes;
import android.support.annotation.NonNull;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
public class Fragment010 extends Fragment {
private int layout=R.layout.fragment1;
@Nullable
@Override
public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
LayoutInflater lf = LayoutInflater.from(getContext());
//笔记:getContext() 这是在View类中提供的方法,用于获取当前View运行的Context。
View view = lf.inflate(layout,container,false);//加载布局并将其转化为VIEW对象。
return view;
}
public void setLayout(int layout)//将layout下的布局文件名传入
{
this.layout = layout;
}
}
fragment1.xml 其他三个布局和这个基本一样
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical|center_horizontal"
android:text="first fragment"
/>
LinearLayout>
然后我们来看看监听程序,这段程序需要写在oncreate()中
iconBar.setTabSelectedListener(new BottomNavigationBar.OnTabSelectedListener() {
@Override
public void onTabSelected(int position) {
switch(position)
{
case 0 :
FragmentManager fm = getSupportFragmentManager();//创建一个Fragment管理器
FragmentTransaction ft = fm.beginTransaction();//开启事务
Fragment010 fs = new Fragment010();
fs.setLayout(R.layout.fragment1);//创建一个fragment对象并将布局名作为参数传入其中
ft.replace(R.id.activity_main,fs);//布局替换,这里需要注意第一个参数是activity布局
ft.commit();//提交事务
break;
case 1:
FragmentManager fragmentManager = getSupportFragmentManager();
FragmentTransaction fragmentTransaction1 = fragmentManager.beginTransaction();
Fragment010 fragment010 = new Fragment010();
fragment010.setLayout(R.layout.fragment2);
fragmentTransaction1.replace(R.id.activity_main,fragment010);
fragmentTransaction1.commit();
break;
case 2:
FragmentManager fragmentManager1= getSupportFragmentManager();
FragmentTransaction fragmentTransaction2 = fragmentManager1.beginTransaction();
Fragment010 fragment0101 = new Fragment010();
fragment0101.setLayout(R.layout.fragment3);
fragmentTransaction2.replace(R.id.activity_main,fragment0101);
fragmentTransaction2.commit();
break;
case 3:
FragmentManager fragmentManager2= getSupportFragmentManager();
FragmentTransaction fragmentTransaction3 = fragmentManager2.beginTransaction();
Fragment010 fragment0102 = new Fragment010();
fragment0102.setLayout(R.layout.fragment4);
fragmentTransaction3.replace(R.id.activity_main,fragment0102);
fragmentTransaction3.commit();
break;
default:
Toast.makeText(MainActivity.this,"default",Toast.LENGTH_SHORT).show();
FragmentManager fm1 = getSupportFragmentManager();
FragmentTransaction ft1 = fm1.beginTransaction();
Fragment010 fs1 = new Fragment010();
fs1.setLayout(R.layout.fragment1);
ft1.replace(R.id.activity_main,fs1);
ft1.commit();
}