How to use BottomNavigationView of Materail Design
Introduction to BottomNavigationView
rely:
implementation 'com.google.android.material:material:1.1.0'
XML code:
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="@+id/bottom_navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#FFF"
android:layout_alignParentBottom="true"
app:menu="@menu/bottom_menu" />
You can see that app:menu="@menu/bottom_menu" This line of code is the button in our bottom navigation bar, so we need to create a folder named menu under res first, and then create a folder in the menu folder xml to put our button
code:
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="@+id/page_1"
android:enabled="true"
android:icon="@mipmap/star"
android:title="首页"/>
<item
android:id="@+id/page_2"
android:enabled="true"
android:icon="@mipmap/star"
android:title="资讯"/>
<item
android:id="@+id/page_3"
android:enabled="true"
android:icon="@mipmap/star"
android:title="动态"
/>
</menu>
At this point, we can already see the effect of BottomNavigationView. The official materail design document states that BottomNavigationView does not support more than five menu items, but when there are more than three menus, there will be abnormal text display, and the animation effect will also change. To solve this problem, in the latest version of the API, a solution has been provided for everyone, and only one line of code is needed to solve it perfectly.
//java代码
bottomNavigationView.setLabelVisibilityMode(LABEL_VISIBILITY_LABELED);
//或者在xml文件中使用属性
app:labelVisibilityMode="labeled"
Use of BottomNavigationView+ViewPager+Fragment
In the past, I used Tablayout+ViewPager+Fragment more, and later found that BottomNavigationView is more compatible with them, and there are some effects that the former cannot achieve
code:
<androidx.viewpager.widget.ViewPager
android:id="@+id/ViewPager"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="@+id/bottom_navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="#FFF"
app:menu="@menu/bottom_menu" />
Similar to tablayout, then we create several Fragments, and then associate the three in the activity
code:
List<Fragment> list = new ArrayList<>();//创建Fragment集合
//实例化每个fragment页面
HomePageFragment homePageFragment = new HomePageFragment();
InfomationPageFragment infomationPageFragment = new InfomationPageFragment();
DynamicPageFragment dynamicPageFragment = new DynamicPageFragment();
//添加进去fragment集合
list.add(homePageFragment);
list.add(infomationPageFragment);
list.add(dynamicPageFragment);
//底部标题栏切换
bottomNavigationView.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
@Override
public boolean onNavigationItemSelected(@NonNull MenuItem item) {
switch (item.getItemId()) {
case R.id.page_1://第一个页面(因为返回值是布尔类型的，所以不用break;)
viewPager.setCurrentItem(0, false);
return true;
case R.id.page_2://第二个页面
viewPager.setCurrentItem(1, false);
return true;
case R.id.page_3://第三个页面
viewPager.setCurrentItem(2, false);
return true;
}
return false;
}
});
//默认选中
bottomNavigationView.getMenu().getItem(0).setChecked(true);
//ViewPager
viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
@Override
public void onPageSelected(int position) {
//选中对应下标的页面
bottomNavigationView.getMenu().getItem(position).setChecked(true);
}
@Override
public void onPageScrollStateChanged(int state) {
}
});
//ViewPager绑定Fragment
viewPager.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager()) {
@NonNull
@Override
public Fragment getItem(int position) {
return list.get(position);
}
@Override
public int getCount() {
return list.size();
}
});
Here, ViewPager is equivalent to an intermediary, one side is bound to BottomNavigationView, and the other side is associated with Fragment. At this time, we can already realize page switching
Introduction to BadgeView
This is actually the corner mark of the message reminder under Tencent qq
rely:
implementation 'q.rorbin:badgeview:1.1.3'
code:
Badge is an interface, create an object of the implementation class QBadgeView, and then set related properties.
//Badge的初始化
QBadgeView qBadgeView = new QBadgeView(MainActivity.this);
BottomNavigationMenuView itemView = (BottomNavigationMenuView) bottomNavigationView.getChildAt(0);
//获取导航栏Tab数量
int childCount = itemView.getChildCount();
qBadgeView.bindTarget(itemView.getChildAt(0))
.setBadgeNumber(100)//数量
.setBadgeTextColor(Color.WHITE)//字体颜色
.setBadgeGravity(Gravity.TOP | Gravity.END)//角标位置(右上)
.setExactMode(false)//显示具体数字还是99+
.setGravityOffset(30, 0, true)//角标的位置
.setShowShadow(true)//是否有阴影效果
.setOnDragStateChangedListener(new Badge.OnDragStateChangedListener() {//设置可拖拽
@Override
public void onDragStateChanged(int dragState, Badge badge, View targetView) {
}
});
Looking at the source code, you can see that BottomNavigationMenuView is a sub-View added inside BottomNavigationView, that is to say, it is a parent View of all Menus added in the navigation bar, so BottomNavigationMenuView is; obtained in this way, friends, don’t make mistakes because of forced BottomNavigationMenuView itemView = (BottomNavigationMenuView) bottomNavigationView.getChildAt(0)switching oh
Note: Please do not create Badge in xml (original, reprint please indicate the source)