Android材质设计-如何在工具栏中放置面包屑(导航)?

Android材质设计-如何在工具栏中放置面包屑(导航)?,android,material-design,Android,Material Design,我想知道如何在android应用程序的(材质设计)工具栏中创建面包屑 这可以在最新的Dropbox android应用程序中看到,其中面包屑用于显示文件导航 我还发现了一张图片(我从中获取),可以在这里看到: 你能告诉我怎么做吗?我想你不需要图书馆。如果您创建一个视图(可能是一个框架布局),然后将其设置为与工具栏颜色相同的背景,然后在其中放置一个文本视图,那么就完成了。您甚至可以扩展TextView类并重写某些方法来设置更改的动画。你可以通过活动之间的意图传递面包屑的当前字符串,然后每个人都知

我想知道如何在android应用程序的(材质设计)工具栏中创建面包屑

这可以在最新的Dropbox android应用程序中看到,其中面包屑用于显示文件导航

我还发现了一张图片(我从中获取),可以在这里看到:


你能告诉我怎么做吗?

我想你不需要图书馆。如果您创建一个视图(可能是一个框架布局),然后将其设置为与工具栏颜色相同的背景,然后在其中放置一个文本视图,那么就完成了。您甚至可以扩展TextView类并重写某些方法来设置更改的动画。你可以通过活动之间的意图传递面包屑的当前字符串,然后每个人都知道如何更新它。

我为一个应用程序创建了一个这样的工作示例,我想与大家分享,因为它变得比lol更令人困惑。也许它可以节省一些开发人员很多不需要的工作:)

将水平滚动视图添加到AppBarLayout(布局/examplebreadcrumbs\u布局)


创建将用于每个“面包屑”的线性布局。您将为每个对象充气相同的布局。(布局/面包屑文本)


示例breadcrumbs演示了基本的创建/更新/滚动到方法,您可以轻松添加到应用程序流中。不是100%复制粘贴,因为您的应用程序将根据您的面包屑将添加到的活动和设置略有不同。如果你还需要别的什么来让它工作。。。让我知道

public class ExampleBreadcrumbs extends AppCompatActivity {

  private static final String ROOT_NODE = "root";

  private SparseArray<Long> levelNodeIds = new SparseArray<>();
  private SparseArray<String> levelNodeNames = new SparseArray<>();

  public int currentLevel = 0;

  ViewGroup breadcrumbBar;
  HorizontalScrollView breadcrumbWrapper;

  String[] parents = new String[] {"Parent Item 1", "Parent Item 2",
      "Parent Item 3", "Parent Item 4"};

  @Override protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.examplebreadcrumbs_layout);

    breadcrumbWrapper = ((HorizontalScrollView)findViewById(R.id.breadcrumb_wrapper));
    breadcrumbBar = (ViewGroup) findViewById(R.id.breadcrumbs);

    // TODO setup your adapter or whatever

    createParentNodes();
  }

  @Override public void onBackPressed() {
    switch (currentLevel) {
      case 0:
        super.onBackPressed();
        break;
      case 1:
        createParentNodes();
        adapter.notifyDataSetChanged();
        break;
      default:
        // Get values from level you are requesting, not current.
        final long id = levelNodeIds.get(currentLevel - 1);
        final String name = levelNodeNames.get(currentLevel - 1);
        getChildren(id, name, -1);
        break;
    }

  }

  @Override public void onItemClick(View itemView, final String name) {
    long nodeId = (Long) itemView.getTag();
    getChildren(nodeId, name, 1);
  }

  private void getChildren(final long nodeId, final String name, final int difference) {
    if (nodeId != 0) {
      // Example case using retrofit like setup
      getChildren(nodeId, new Callback<NodesResponse>() {
        @Override
        public void onResponse(Call<NodesResponse> call, Response<NodesResponse> response) {
          if (response.body() != null) {
            if (response.body().getNodeObjs() != null && !response.body().getNodeObjs()
                .isEmpty()) {
              createChildNodes(nodeId, name, response.body().getNodeObjs(), difference);
            }
          }
        }

        @Override
        public void onFailure(Call<NodesResponse> call, Throwable t) { // TODO}
      });
    } else {
      createParentNodes();
      adapter.notifyDataSetChanged();
    }
  }

  private void createParentNodes() {
    currentLevel = 0;
    levelNodeIds.put(currentLevel, 0L);
    levelNodeNames.put(currentLevel, ROOT_NODE);

    listItems.clear();
    int count = 0;
    for(String parent : parents) {
      listItems.add(new NodeObj(nodeId[count], parent, parentDescriptions[count]));
      count++;
    }
    adapter.notifyDataSetChanged();
    levelNodeNames.put(currentLevel, ROOT_NODE);
    updateBreadcrumbs(true);
  }

  private void createChildNodes(long id, String name, List<NodeObj> NodeObjs, int difference) {
    listItems.clear();
    for (NodeObj obj : NodeObjs) {
      listItems.add(new NodeObj(obj.getnodeId(), obj.getNodeTitle(), obj.getNodeDescription()));
    }
    adapter.notifyDataSetChanged();

    currentLevel = currentLevel + difference;
    levelNodeIds.put(currentLevel, id);
    levelNodeNames.put(currentLevel, name);

    // If forward, it will create new node along with updating other nodes.
    updateBreadcrumbs(difference > 0);
  }

  private void updateBreadcrumbs(boolean createNew) {
    if (createNew) {
      createBreadcrumb();
    }
    // Loops and updates all breadcrumb nodes
    updateBreadcrumbNodes();
    //printDebug();
  }

  private void createBreadcrumb() {
    boolean needToCreate = true;

    // Remove view if one exists.
    ViewGroup nodeToReplace = (ViewGroup) breadcrumbBar.getChildAt(currentLevel);
    if (nodeToReplace != null) {
      TextView toReplaceTextView = (TextView) nodeToReplace.findViewById(R.id.crumb_text);
      // If node history is not the same, remove view and after.
      if (toReplaceTextView.getText().equals(levelNodeNames.get(currentLevel))) {
        needToCreate = false;
        scrollIfBreadcrumbNotViewable(nodeToReplace);
      } else {
        needToCreate = true;
        // Removes all nodes >= current level
        for (int i = breadcrumbBar.getChildCount() - 1; i >= currentLevel; i--) {
          breadcrumbBar.removeViewAt(i);
        }
      }
    }

    if (needToCreate) {
      // Inflate new breadcrumb node.
      final ViewGroup crumbLayout = (ViewGroup) LayoutInflater.from(this)
          .inflate(R.layout.breadcrumb_text, appBarLayout, false);
      crumbLayout.setTag(levelNodeIds.get(currentLevel));
      // Sets name of node (color gets updated in 'updateBreadcrumbNodes').
      TextView crumbTextView = (TextView) crumbLayout.findViewById(R.id.crumb_text);
      crumbTextView.setVisibility(View.VISIBLE);
      crumbTextView.setText(levelNodeNames.get(currentLevel));
      View crumbArrow = crumbLayout.findViewById(R.id.crumb_arrow);
      crumbArrow.setVisibility(levelNodeNames.get(currentLevel).equals(ROOT_NODE) ? View.GONE : View.VISIBLE);
      // Add new breadcrumb node to bar.
      breadcrumbBar.addView(crumbLayout, currentLevel);
      scrollIfBreadcrumbNotViewable(crumbLayout);
      // Create click listener to jump to history.
      crumbLayout.setOnClickListener(new View.OnClickListener() {
        @Override public void onClick(View v) {
          int viewIndex = breadcrumbBar.indexOfChild(v);
          if (viewIndex == currentLevel) return;
          TextView crumbText = (TextView) v.findViewById(R.id.crumb_text);
          int index = levelNodeNames.indexOfValue(crumbText.getText().toString());
          long nodeId = (Long) v.getTag();
          getChildren(nodeId, levelNodeNames.get(index), viewIndex - currentLevel);
        }
      });
    }

  }

  private void updateBreadcrumbNodes() {
    for (int i = 0; i < breadcrumbBar.getChildCount(); i++) {
      boolean activeNode = i == (currentLevel);
      ViewGroup node = (ViewGroup) breadcrumbBar.getChildAt(i);
      TextView crumbTextView = ((TextView) node.findViewById(R.id.crumb_text));
      crumbTextView.setTextColor(activeNode ? ContextCompat.getColor(this, R.color.breadcrumb_text) :
                                 ContextCompat.getColor(this, R.color.breadcrumb_text_dim));
    }
    breadcrumbWrapper.fullScroll(HorizontalScrollView.FOCUS_BACKWARD);
  }

  private void scrollIfBreadcrumbNotViewable(final ViewGroup view) {
    Rect scrollBounds = new Rect();
    toolbar.getHitRect(scrollBounds);
    if (!view.getLocalVisibleRect(scrollBounds) || scrollBounds.width() < view.getWidth()) {
      view.postDelayed(new Runnable() {
        public void run() {
          breadcrumbWrapper.smoothScrollTo(view.getLeft(), 0);
        }
      }, 100L);
    }
  }

  void printDebug() {
    System.out.println("** DEBUG ** | level: '" + currentLevel + "' | node: id='" + levelNodeIds.get(currentLevel) + "' name='" + levelNodeNames.get(currentLevel) + "' |");
  }
}
public类示例breadcrumbs扩展AppCompative活动{
私有静态最终字符串ROOT\u NODE=“ROOT”;
private SparseArray levelNodeIds=新SparseArray();
私有SparseArray levelNodeNames=新SparseArray();
公共int currentLevel=0;
视图组面包屑;
水平滚动视图面包屑捕捉器;
字符串[]父项=新字符串[]{“父项1”、“父项2”,
“父项3”、“父项4”};
@在创建时覆盖受保护的void(Bundle savedInstanceState){
super.onCreate(savedInstanceState);
setContentView(R.layout.examplebreadcrumbs\u布局);
breadcrumbWrapper=((水平滚动视图)findViewById(R.id.breadcrumb_包装器));
breadcrumbBar=(视图组)findViewById(R.id.breadcrumbs);
//TODO设置您的适配器或任何东西
createParentNodes();
}
@重写公共void onBackPressed(){
开关(电流电平){
案例0:
super.onBackPressed();
打破
案例1:
createParentNodes();
adapter.notifyDataSetChanged();
打破
违约:
//从您请求的级别获取值,而不是当前级别。
最终长id=levelNodeIds.get(currentLevel-1);
最终字符串名=levelNodeNames.get(currentLevel-1);
getChildren(id,name,-1);
打破
}
}
@重写公共项单击(视图项视图,最终字符串名称){
long nodeId=(long)itemView.getTag();
getChildren(nodeId,name,1);
}
私有void getChildren(最终长节点ID、最终字符串名称、最终整数差){
if(nodeId!=0){
//使用类似改装设置的示例案例
getChildren(nodeId,new Callback()){
@凌驾
公共void onResponse(调用、响应){
if(response.body()!=null){
if(response.body().getNodeObjs()!=null&&!response.body().getNodeObjs())
.isEmpty()){
createChildNodes(nodeId,name,response.body().getNodeObjs(),difference);
}
}
}
@凌驾
public void onFailure(Call-Call,Throwable t){//TODO}
});
}否则{
createParentNodes();
adapter.notifyDataSetChanged();
}
}
私有void createParentNodes(){
currentLevel=0;
levelNodeId.put(当前级别,0L);
levelNodeNames.put(当前级别,根节点);
listItems.clear();
整数计数=0;
for(字符串父项:父项){
添加(新的NodeObj(nodeId[count],parent,parentDescriptions[count]);
计数++;
}
adapter.notifyDataSetChanged();
levelNodeNames.put(当前级别,根节点);
UpdateBradCrumbs(真);
}
私有void createChildNodes(长id、字符串名称、列表节点对象、int差){
listItems.clear();
用于(NodeObj对象:NodeObjs){
添加(新节点bj(obj.getnodeId(),obj.getNodeTitle(),obj.getNodeDescription());
}
adapter.notifyDataSetChanged();
currentLevel=currentLevel+差异;
levelNodeId.put(currentLevel,id);
levelNodeNames.put(currentLevel,名称);
//如果转发,它将创建新节点,同时更新其他节点。
UPDATEBREADCRUMPS(差异>0);
}
私有void updateBradCrumps(布尔值createNew){
如果(新建){
createBreadcrumb();
}
//循环并更新所有面包屑节点
UpdateBradNodes();
//printDebug();
}
私有void createBreadcrumb(){
布尔needToCreate=true;
//删除视图(如果存在)。
ViewGroup nodeToReplace=(ViewGroup)breadcrumbBar.getChildAt(currentLevel);
if(nodeToReplace!=null){
TextView to替换TextView=(TextView)nodeToReplace.findViewById(R.id.crumb_text);
//如果节点历史记录不同,请删除“视图”和“之后”。
if(toReplaceTextView.getText().equals(levelNodeNames.get(currentLevel))){
needToCreate=false;
scrollIfBreadcrumbNotViewable(nodeToReplace);
}否则{
needToCreate=true;
//删除所有节点>=当前级别
对于(int i=breadcrumbBar.getChildCount()-1;i>=currentLevel;i--){
面包屑清除视图(i);
}
}
}
如果(需要创建){
//给新面包屑充气
<LinearLayout android:id="@+id/crumb"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:layout_width="wrap_content"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/crumb_arrow"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:visibility="gone"
        android:gravity="center_vertical"
        android:text="@string/greater_than"
        android:padding="4dp"
        android:fontFamily="sans-serif-condensed"
        android:textSize="20sp"
        android:textColor="@color/breadcrumb_text_dim"
        android:textAllCaps="true"
        tools:visibility="visible"/>

    <TextView
        android:id="@+id/crumb_text"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:padding="4dp"
        android:gravity="center_vertical"
        android:visibility="gone"
        android:fontFamily="sans-serif"
        android:textAllCaps="true"
        android:textSize="14sp"
        android:textColor="@color/breadcrumb_text"
        android:background="?selectableItemBackground"/>

</LinearLayout>
public class ExampleBreadcrumbs extends AppCompatActivity {

  private static final String ROOT_NODE = "root";

  private SparseArray<Long> levelNodeIds = new SparseArray<>();
  private SparseArray<String> levelNodeNames = new SparseArray<>();

  public int currentLevel = 0;

  ViewGroup breadcrumbBar;
  HorizontalScrollView breadcrumbWrapper;

  String[] parents = new String[] {"Parent Item 1", "Parent Item 2",
      "Parent Item 3", "Parent Item 4"};

  @Override protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.examplebreadcrumbs_layout);

    breadcrumbWrapper = ((HorizontalScrollView)findViewById(R.id.breadcrumb_wrapper));
    breadcrumbBar = (ViewGroup) findViewById(R.id.breadcrumbs);

    // TODO setup your adapter or whatever

    createParentNodes();
  }

  @Override public void onBackPressed() {
    switch (currentLevel) {
      case 0:
        super.onBackPressed();
        break;
      case 1:
        createParentNodes();
        adapter.notifyDataSetChanged();
        break;
      default:
        // Get values from level you are requesting, not current.
        final long id = levelNodeIds.get(currentLevel - 1);
        final String name = levelNodeNames.get(currentLevel - 1);
        getChildren(id, name, -1);
        break;
    }

  }

  @Override public void onItemClick(View itemView, final String name) {
    long nodeId = (Long) itemView.getTag();
    getChildren(nodeId, name, 1);
  }

  private void getChildren(final long nodeId, final String name, final int difference) {
    if (nodeId != 0) {
      // Example case using retrofit like setup
      getChildren(nodeId, new Callback<NodesResponse>() {
        @Override
        public void onResponse(Call<NodesResponse> call, Response<NodesResponse> response) {
          if (response.body() != null) {
            if (response.body().getNodeObjs() != null && !response.body().getNodeObjs()
                .isEmpty()) {
              createChildNodes(nodeId, name, response.body().getNodeObjs(), difference);
            }
          }
        }

        @Override
        public void onFailure(Call<NodesResponse> call, Throwable t) { // TODO}
      });
    } else {
      createParentNodes();
      adapter.notifyDataSetChanged();
    }
  }

  private void createParentNodes() {
    currentLevel = 0;
    levelNodeIds.put(currentLevel, 0L);
    levelNodeNames.put(currentLevel, ROOT_NODE);

    listItems.clear();
    int count = 0;
    for(String parent : parents) {
      listItems.add(new NodeObj(nodeId[count], parent, parentDescriptions[count]));
      count++;
    }
    adapter.notifyDataSetChanged();
    levelNodeNames.put(currentLevel, ROOT_NODE);
    updateBreadcrumbs(true);
  }

  private void createChildNodes(long id, String name, List<NodeObj> NodeObjs, int difference) {
    listItems.clear();
    for (NodeObj obj : NodeObjs) {
      listItems.add(new NodeObj(obj.getnodeId(), obj.getNodeTitle(), obj.getNodeDescription()));
    }
    adapter.notifyDataSetChanged();

    currentLevel = currentLevel + difference;
    levelNodeIds.put(currentLevel, id);
    levelNodeNames.put(currentLevel, name);

    // If forward, it will create new node along with updating other nodes.
    updateBreadcrumbs(difference > 0);
  }

  private void updateBreadcrumbs(boolean createNew) {
    if (createNew) {
      createBreadcrumb();
    }
    // Loops and updates all breadcrumb nodes
    updateBreadcrumbNodes();
    //printDebug();
  }

  private void createBreadcrumb() {
    boolean needToCreate = true;

    // Remove view if one exists.
    ViewGroup nodeToReplace = (ViewGroup) breadcrumbBar.getChildAt(currentLevel);
    if (nodeToReplace != null) {
      TextView toReplaceTextView = (TextView) nodeToReplace.findViewById(R.id.crumb_text);
      // If node history is not the same, remove view and after.
      if (toReplaceTextView.getText().equals(levelNodeNames.get(currentLevel))) {
        needToCreate = false;
        scrollIfBreadcrumbNotViewable(nodeToReplace);
      } else {
        needToCreate = true;
        // Removes all nodes >= current level
        for (int i = breadcrumbBar.getChildCount() - 1; i >= currentLevel; i--) {
          breadcrumbBar.removeViewAt(i);
        }
      }
    }

    if (needToCreate) {
      // Inflate new breadcrumb node.
      final ViewGroup crumbLayout = (ViewGroup) LayoutInflater.from(this)
          .inflate(R.layout.breadcrumb_text, appBarLayout, false);
      crumbLayout.setTag(levelNodeIds.get(currentLevel));
      // Sets name of node (color gets updated in 'updateBreadcrumbNodes').
      TextView crumbTextView = (TextView) crumbLayout.findViewById(R.id.crumb_text);
      crumbTextView.setVisibility(View.VISIBLE);
      crumbTextView.setText(levelNodeNames.get(currentLevel));
      View crumbArrow = crumbLayout.findViewById(R.id.crumb_arrow);
      crumbArrow.setVisibility(levelNodeNames.get(currentLevel).equals(ROOT_NODE) ? View.GONE : View.VISIBLE);
      // Add new breadcrumb node to bar.
      breadcrumbBar.addView(crumbLayout, currentLevel);
      scrollIfBreadcrumbNotViewable(crumbLayout);
      // Create click listener to jump to history.
      crumbLayout.setOnClickListener(new View.OnClickListener() {
        @Override public void onClick(View v) {
          int viewIndex = breadcrumbBar.indexOfChild(v);
          if (viewIndex == currentLevel) return;
          TextView crumbText = (TextView) v.findViewById(R.id.crumb_text);
          int index = levelNodeNames.indexOfValue(crumbText.getText().toString());
          long nodeId = (Long) v.getTag();
          getChildren(nodeId, levelNodeNames.get(index), viewIndex - currentLevel);
        }
      });
    }

  }

  private void updateBreadcrumbNodes() {
    for (int i = 0; i < breadcrumbBar.getChildCount(); i++) {
      boolean activeNode = i == (currentLevel);
      ViewGroup node = (ViewGroup) breadcrumbBar.getChildAt(i);
      TextView crumbTextView = ((TextView) node.findViewById(R.id.crumb_text));
      crumbTextView.setTextColor(activeNode ? ContextCompat.getColor(this, R.color.breadcrumb_text) :
                                 ContextCompat.getColor(this, R.color.breadcrumb_text_dim));
    }
    breadcrumbWrapper.fullScroll(HorizontalScrollView.FOCUS_BACKWARD);
  }

  private void scrollIfBreadcrumbNotViewable(final ViewGroup view) {
    Rect scrollBounds = new Rect();
    toolbar.getHitRect(scrollBounds);
    if (!view.getLocalVisibleRect(scrollBounds) || scrollBounds.width() < view.getWidth()) {
      view.postDelayed(new Runnable() {
        public void run() {
          breadcrumbWrapper.smoothScrollTo(view.getLeft(), 0);
        }
      }, 100L);
    }
  }

  void printDebug() {
    System.out.println("** DEBUG ** | level: '" + currentLevel + "' | node: id='" + levelNodeIds.get(currentLevel) + "' name='" + levelNodeNames.get(currentLevel) + "' |");
  }
}