Android实现面包屑效果，支持Fragment联动-技术圈

Android实现面包屑效果，支持Fragment联动

龙旋

共 2792字，需浏览 6分钟

· 2021-09-21

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

先看下效果图：

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

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

使用方式

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) {    //在这里添加你自己的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://github.com/tinyvampirepudge/BreadCrumbsView

到这里就结束啦。