美文网首页Android开发Android开发经验谈Android技术知识
为了满足UI小姐姐要求,自己动手实现了Android面包屑效果(

为了满足UI小姐姐要求,自己动手实现了Android面包屑效果(

作者: Android_until | 来源:发表于2020-08-19 20:55 被阅读0次

    由于UI小姐姐给的设计图中包含了面包屑效果,去github逛了一圈,没有特别合适的,只能自己实现了。

    先看下效果图:

    先看下逐个添加Fragment,然后按返回键挨个回退的场景:

    接着看下逐个添加Fragment,直接点击选择tab的场景:

    demo地址

    BreadCrumbsView

    使用方式

    1、布局中引入BreadCrumbsView

    <com.tinytongtong.breadcrumbs.BreadCrumbsView
            android:id="@+id/breadCrumbs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />
    
    

    2、设置BreadCrumbsView的监听器

    breadCrumbsView.setOnTabListener(new BreadCrumbsView.OnTabListener() {
        @Override
        public void onAdded(BreadCrumbsView.Tab tab) {
            Log.e("BreadCrumbsView", "BreadCrumbsView.OnTabListener#onAdded tab:" + tab.getIndex());
            addFragment(tab);
        }
    
        @Override
        public void onActivated(BreadCrumbsView.Tab tab) {
            Log.e("BreadCrumbsView", "BreadCrumbsView.OnTabListener#onActivated tab:" + tab.getIndex());
        }
    
        @Override
        public void onRemoved(BreadCrumbsView.Tab tab) {
            Log.e("BreadCrumbsView", "BreadCrumbsView.OnTabListener#onRemoved tab:" + tab.getIndex());
            removeLastFragment();
        }
    });
    
    

    BreadCrumbsView.OnTabListener#onAdded方法是通过BreadCrumbsView#addTab(tabName,value)方法添加tab成功后触发的回调,在这里可以将需要的Fragment添加进来,具体看下面的addFragment方法示例:

    private void addFragment(BreadCrumbsView.Tab tab) {
        // TODO: 2020/5/26 3:26 PM 在这里添加你自己的Fragment,tab#getValue返回的是创建Tab时传入的数据,可以根据这些数据创建你自己想要的Fragment
        Fragment fragment = BlankFragment.newInstance(String.format("我是第%d个Fragment", tab.getIndex()), "" + tab.getIndex());
        getSupportFragmentManager()
                .beginTransaction()
                .add(R.id.container, fragment, String.valueOf(tab.getIndex()))
                .show(fragment)
                .addToBackStack(null)
                .commit();
        fragments.add(fragment);
    }
    
    

    BreadCrumbsView.OnTabListener#onActivated方法是通过通过点击切换到已经存在的tab上,改tab再次激活会调用该方法,这里可以做一些刷新对应Fragment的操作。

    BreadCrumbsView.OnTabListener#onRemoved方法tab给移除后出发的操作,这里一般调用removeLastFragment()方法即可,这里看下代码示例:

    /**
     * 移除最后一个Fragment,显示倒数第二个Fragment
     */
    private void removeLastFragment() {
        if (fragments != null && fragments.size() > 1) {
            getSupportFragmentManager().popBackStackImmediate();
            fragments.removeLast();
            FragmentManager fragmentManager = getSupportFragmentManager();
            fragmentManager.beginTransaction()
                    .show(fragments.getLast())
                    .commit();
            fragmentManager.executePendingTransactions();
        }
    }
    
    

    3、完善增加和删除方法

    代码添加tab,需要通过BreadCrumbsView#addTab(String content, Map<String, String> value)方法来实现。

    这里的value携带的信息是依附在tab上的,在创建Fragment时可以通过tab.getValue()获取之前传入的数据,依据这些创建你想要的Fragment即可。

    4、按需更改

    当前BreadCrumbsView的容器是使用RecyclerView实现的,item的宽度是包裹内容,最大宽度屏幕宽度的三分之一,可以按需更改。

    Fragment的移除操作,现在是从Fragment栈中挨个移除,如果有更好的方式,欢迎交流

    原文:https://www.jianshu.com/p/b9b21864d4ca

    相关文章

      网友评论

        本文标题:为了满足UI小姐姐要求,自己动手实现了Android面包屑效果(

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