美文网首页Android
BottomNavigationView优雅实现Fragment

BottomNavigationView优雅实现Fragment

作者: 程自舟 | 来源:发表于2017-07-31 13:14 被阅读0次

    很多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);
        }
    }
    

    相关文章

      网友评论

        本文标题:BottomNavigationView优雅实现Fragment

        本文链接:https://www.haomeiwen.com/subject/lrvllxtx.html