优点:去除“无用”图片,节省空间
配合bottomnavigationview,实现一个快速,简洁的tab栏
传统做法:tab 切换,字体变色、图片变色。至少给我提供八张图,四张默认,四张选中,然后通过 selector 文件设置
现在bottomnavigationview只需四张图!!!
implementation 'com.google.android.material:material:1.1.0-alpha01'
<?xml version="1.0" encoding="utf-8"?> <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" android:background="@color/white" tools:context=".mainactivity"> <framelayout android:id="@+id/flayout" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_above="@+id/nav_bottom_menu" android:background="@color/bg" /> <view android:layout_width="match_parent" android:layout_height="0.5dp" android:layout_above="@+id/nav_bottom_menu" android:background="#ffe1e0e0" /> <com.google.android.material.bottomnavigation.bottomnavigationview android:id="@+id/nav_bottom_menu" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignparentbottom="true" app:itembackground="@null" app:itemicontint="@color/tint_selector_menu_color" app:itemtextcolor="@color/tint_selector_menu_color" app:labelvisibilitymode="labeled" app:menu="@menu/nav_bottom_menu" /> <com.makeramen.roundedimageview.roundedimageview android:layout_width="55dp" android:layout_height="55dp" android:layout_alignparentbottom="true" android:layout_centerinparent="true" android:layout_marginbottom="12dp" android:src="@drawable/ic_log" app:riv_corner_radius="200dp" /> </relativelayout>
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:color="@color/orange" android:state_checked="true" /> <item android:color="@color/black" /> </selector>
<?xml version="1.0" encoding="utf-8"?> <menu xmlns:android="http://schemas.android.com/apk/res/android"> <item android:id="@+id/iv_home" android:icon="@drawable/iv_home" android:title="首页" /> <item android:id="@+id/iv_wechat" android:icon="@drawable/iv_wechat" android:title="视频" /> <item android:id="@+id/riv_script" android:icon="@null" android:title="@null" /> <item android:id="@+id/iv_pipi" android:icon="@drawable/iv_pipi" android:title="电影" /> <item android:id="@+id/iv_mine" android:icon="@drawable/iv_mine" android:title="我的" /> </menu>
这里配合fragmen
/* menu显示彩色图标 */ //navbottommenu.setitemicontintlist(null); /* 导航栏点击事件 */ navbottommenu.setonnavigationitemselectedlistener(new bottomnavigationview.onnavigationitemselectedlistener() { @override public boolean onnavigationitemselected(@nonnull menuitem item) { switch (item.getitemid()) { case r.id.iv_home: { fragmentmanager.startfragmenthome(fragment_a.class); return true; } case r.id.iv_wechat: { fragmentmanager.startfragmenthome(fragment_b.class); return true; } case r.id.iv_pipi: { fragmentmanager.startfragmenthome(fragment_c.class); return true; } case r.id.iv_mine: { fragmentmanager.startfragmenthome(fragment_d.class); return true; } default: break; } return false; } });
/* 限制页面数,防止界面反复重新加载 */ viewpager.setoffscreenpagelimit(4); // viewpager 滑动事件监听 viewpager.addonpagechangelistener(new viewpager.onpagechangelistener() { @override public void onpagescrolled(int i, float v, int i1) { } @override public void onpageselected(int i) { //这里我做了中间凹凸按钮,所以要特别处理以下 //如果没有我这种情况的,直接加上这个 navbottommenu.getmenu().getitem(i).setchecked(true); 就不用再加switch语句了 switch (i) { case 0: //将滑动到的页面对应的 menu 设置为选中状态 navbottommenu.getmenu().getitem(i).setchecked(true); break; case 1: //将滑动到的页面对应的 menu 设置为选中状态 navbottommenu.getmenu().getitem(i).setchecked(true); break; case 2: case 3: //将滑动到的页面对应的 menu 设置为选中状态 navbottommenu.getmenu().getitem(i + 1).setchecked(true); break; default: break; } } @override public void onpagescrollstatechanged(int i) { } }); }
(仅供参考,大家也可以去参考以下别人写的代码)
public class fragpageradapter extends fragmentpageradapter { private list<fragment> fragmentlist; public fragpageradapter(@nonnull fragmentmanager fm, list<fragment> fragmentlist) { super(fm); this.fragmentlist = fragmentlist; } @override public fragment getitem(int position) { return fragmentlist.get(position); } @override public int getcount() { return fragmentlist.size(); } }
bottomnavigationview实现的tab栏,比自己以前写的代码更加简洁明了!!!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:mmqy2019@163.com进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。