BottomNavigationView优雅实现Fragment
很多app都挺流行一个Activity底部导航上面加载多个frangment的设计,我们常规实现思路是做很多判断,然后去不停的hide,show这样的方法实现可行但是是有弊端的(就我个人遇到的情况来说,fragment重复加载(偶尔),该清空的时候并没有清空),更何况这样写代码一堆堆的,一点也不优雅。
现在我们就来看看使用Google新推出的MD控件BottomNavigationView来如何实现。
首先,先上主activity的布局
<android.support.design.widget.CoordinatorLayout 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:orientation="vertical">
<FrameLayout
android:id="@+id/lay_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginBottom="@dimen/len_52"
app:layout_behavior="@string/appbar_scrolling_view_behavior" />
<android.support.design.widget.BottomNavigationView
android:id="@+id/navigation"
android:layout_width="match_parent"
android:layout_height="@dimen/len_52"
android:layout_gravity="bottom"
android:background="@color/white"
android:elevation="@dimen/len_4"
android:outlineProvider="bounds"
android:translationZ="@dimen/len_8"
app:itemIconTint="@color/text_nav"
app:itemTextColor="@color/text_nav"
app:menu="@menu/navigation_items"
tools:targetApi="lollipop"
tools:visibility="invisible" />
</android.support.design.widget.CoordinatorLayout>
我们需要一个Framlayout来做容器放入fragment,然后设置相关BottomNavigationView的属性和参数。
然后我们在activity里实现BottomNavigationView的选择监听
public boolean onNavigationItemSelected(@NonNull MenuItem item) {
//转接事件流到工具中
return mNavHelper.performClickMenu(item.getItemId());
}
onNavigationItemSelected方法本来是return true或者fasle的代表是否处理选择事件处理,在这里,我们转入自己的工具类里处理,所以我们建一个工具类NavHelper,并定义事件处理方法performClickMenu()。
我们先定义需要的参数和构造方法
private final SparseArray<Tab<T>> tabs = new SparseArray<Tab<T>>();
private final Context mContext;
private final int containerId;
private final FragmentManager fragmentManager;
private final OnTabChangeListener<T> mListener;
private Tab<T> currentTab;
public NavHelper(Context mContext, int containerId, FragmentManager fragmentManager, OnTabChangeListener<T> mListener) {
this.mContext = mContext;
this.containerId = containerId;
this.fragmentManager = fragmentManager;
this.mListener = mListener;
}
public static class Tab<T> {
public Tab(Class<?> clx, T extra) {
this.clx = clx;
this.extra = extra;
}
public Class<?> clx;
public T extra;
//内部缓存对应的Fragment
private Fragment fragment;
}
/**
* 事件处理回调接口
*
* @param <T>
*/
public interface OnTabChangeListener<T> {
void onTabChange(Tab<T> newTab, Tab<T> oldTab);
}
我们的构造参数里有四个参数,content不必多说,containerId表示放入fragment的容器Id,framentManager也是必须的(注意必须为V4包),最后个就是我们的事件回调监听。
当然,我们还要定义个SparseArray来存储,这里不选择使用List是因为List太过厚重。
而至于Tab这个类是我们自己定义的,使他静态化是并不希望外部收到外界的干扰,因为他只提供内部使用。Tab里的字段clx是通过传入的class去寻找对应的framnegt,所以<? extends fragment>,extra则表示是额外操作的字段,但是我们并不知道具体操作是什么,所以采用泛型来映射。剩下的一个fragment表示是内部缓存对应的fragemnt。
那么接下来我们就在performClickMenu方法里进行事件处理。
public boolean performClickMenu(int menuId) {
Tab<T> tab = tabs.get(menuId);
if (tab != null) {
doSelect(tab);
return true;
}
return false;
}
我们在这里与onNavigationItemSelected返回值设定一样,return true代表处理事件,return false代表无权处理。
首先进行非空判断,不为空进入我们的doSelect();
private void doSelect(Tab<T> tab){
Tab<T> oldTab = null;
if (currentTab!=null){
oldTab=currentTab;
if (oldTab==tab){
//如果当前tab点击的tab,不做任何操作或者刷新
notifyReselect(tab);
return;
}
}
currentTab = tab;
doTabChanged(currentTab,oldTab);
}
我们先声明一个tab为oldTab表示旧fragemnt并初始化,然后用我们定义的currentTab(当前fragment)进行非空判断,不为空我们就把currentTab赋值给oldTab,然后我们判断oldtab(旧Fragemnt)是否等于传入的tab(要切换的新Fragment),如果等于表示是对一个frangment进行了两次点击,这里可以直接return,也可以刷新当前fragemnt。如果currentTab(当前fragment)为空,那么我们就把要切换的fragement赋值给currentTab,然后进行切换改变的逻辑处理。
private void doTabChanged(Tab<T> newTab,Tab<T> oldTab){
FragmentTransaction ft = fragmentManager.beginTransaction();
if (oldTab!=null){
if (oldTab.fragment!=null){
//从界面移除,但在Fragment的缓存中
ft.detach(oldTab.fragment);
}
}
if (newTab!=null){
if (newTab.fragment==null){
//首次新建并缓存
Fragment fragment = Fragment.instantiate(mContext,newTab.clx.getName(),null);
newTab.fragment = fragment;
ft.add(containerId,fragment,newTab.clx.getName());
}else {
//直接从缓存中重用,不会被测量
ft.attach(newTab.fragment);
}
}
ft.commit();
notifySelect(newTab,oldTab);
}
我们在doTabChanged(Tab<T> newTab,Tab<T> oldTab)里传入两个参数,newTab表示要切换到的fragment,oldTab表示被切换的fragment。然后分别进行判断,如果oldTab!=null,并且缓存里的fragment也!=null;那么调用 FragmentTransaction.detach方法移除(仍在内存中)。
如果newTab!=null,并且缓存里的fragment也==null,那么就新建并缓存起来,如果缓存里有,就直接attach。
最后就是通知选择的监听回调了。至此我们的工具类已经封装完成,接下来就是实际使用了。
mNavHelper = new NavHelper<>(this,R.id.lay_container,getSupportFragmentManager(),this);
mNavHelper.add(R.id.action_home,new NavHelper.Tab<>(ActiveFragment.class,R.string.title_fragemnt1
))
.add(R.id.action_group,new NavHelper.Tab<>(GroupFragment.class,R.string.title_fragemnt2))
.add(R.id.action_contact,new NavHelper.Tab<>(ContactFragment.class,R.string.title_fragemnt3));
mNavigation.setOnNavigationItemSelectedListener(this);
//手动触发第一次点击
Menu menu = mNavigation.getMenu();
menu.performIdentifierAction(R.id.action_home,0);
public void onTabChange(NavHelper.Tab<Integer> newTab, NavHelper.Tab<Integer> oldTab) {
//fragemnt的对应title
mTitle.setText(newTab.extra);
}
下面附上完整NavHelper
public class NavHelper<T> {
private final SparseArray<Tab<T>> tabs = new SparseArray<Tab<T>>();
private final Context mContext;
private final int containerId;
private final FragmentManager fragmentManager;
private final OnTabChangeListener<T> mListener;
private Tab<T> currentTab;
public NavHelper(Context mContext, int containerId, FragmentManager fragmentManager, OnTabChangeListener<T> mListener) {
this.mContext = mContext;
this.containerId = containerId;
this.fragmentManager = fragmentManager;
this.mListener = mListener;
}
/**
* 添加tab
*
* @param menuId
* @param tab
* @return
*/
public NavHelper<T> add(int menuId, Tab<T> tab) {
tabs.put(menuId, tab);
return this;
}
/**
* 获取当前Tab
*
* @return
*/
public Tab<T> getCurrentTab() {
return currentTab;
}
/**
* 执行点击菜单的操作
*
* @param menuId
* @return
*/
public boolean performClickMenu(int menuId) {
Tab<T> tab = tabs.get(menuId);
if (tab != null) {
doSelect(tab);
return true;
}
return false;
}
/**
* 进行tab的选择操作
* @param tab
*/
private void doSelect(Tab<T> tab){
Tab<T> oldTab = null;
if (currentTab!=null){
oldTab=currentTab;
if (oldTab==tab){
//如果当前tab点击的tab,不做任何操作或者刷新
notifyReselect(tab);
return;
}
}
currentTab = tab;
doTabChanged(currentTab,oldTab);
}
/**
* Tab切换方法
* @param newTab
* @param oldTab
*/
private void doTabChanged(Tab<T> newTab,Tab<T> oldTab){
FragmentTransaction ft = fragmentManager.beginTransaction();
if (oldTab!=null){
if (oldTab.fragment!=null){
//从界面移除,但在Fragment的缓存中
ft.detach(oldTab.fragment);
}
}
if (newTab!=null){
if (newTab.fragment==null){
//首次新建并缓存
Fragment fragment = Fragment.instantiate(mContext,newTab.clx.getName(),null);
newTab.fragment = fragment;
ft.add(containerId,fragment,newTab.clx.getName());
}else {
ft.attach(newTab.fragment);
}
}
ft.commit();
notifySelect(newTab,oldTab);
}
/**
* 选择通知回调
* @param newTab
* @param oldTab
*/
private void notifySelect(Tab<T> newTab,Tab<T> oldTab){
if (mListener!=null){
mListener.onTabChange(newTab,oldTab);
}
}
private void notifyReselect(Tab<T> tab){
//TODO 刷新
}
public static class Tab<T> {
public Tab(Class<?> clx, T extra) {
this.clx = clx;
this.extra = extra;
}
Class<?> clx;
public T extra;
//内部缓存对应的Fragment
private Fragment fragment;
}
/**
* 事件处理回调接口
*
* @param <T>
*/
public interface OnTabChangeListener<T> {
void onTabChange(Tab<T> newTab, Tab<T> oldTab);
}
}