实现类似Gmail平板电脑的导航抽屉

Question

我在研究Gmail应用程序的平板电脑设计。在那个导航抽屉实现中，与其他实现不同。我已经附上了图片供您参考。

并且当我展开抽屉时，它应该像普通的导航抽屉一样发生。

我希望以相同的方式实现。我正在搜索，但我只找到了这个link，它并不是很有用。有人能给我建议吗，我该如何做！

- Kavin Prabhu

---

你可以使用滑动面板来实现，http://www.incredibleandros.com/slidingpanel-android-example/ - Tushar Pandey

@TusharPandey 感谢您的回复。我之前没有正确解释问题，是我的错。现在我已经再次编辑了它。我希望行为与导航抽屉类似。请参考第二张图片并帮助我解决问题。 - Kavin Prabhu

您IP地址为143.198.54.68，由于运营成本限制，当前对于免费用户的使用频率限制为每个IP每72小时10次对话，如需解除限制，请点击左下角设置图标按钮（手机用户先点击左上角菜单按钮）。 - Tushar Pandey

但是工具栏与Gmail平板应用程序中的实现方式完全不同。 它怎么可能是一个工具栏？ 我知道什么是工具栏，我也已经实现过它们。 但是我认为无论如何都不能使用工具栏来实现它。 如果您确信要使用工具栏，请解释得更详细些好吗？ - Kavin Prabhu

你是在说抽屉导航，自定义抽屉导航吗？ - Tushar Pandey

我觉得你没有理解我的问题。这是一个自定义导航抽屉。但是我想要的是当我关闭抽屉时，它应该像第一张图片那样，当我打开时，它应该像第二张图片那样。这就是我正在尝试实现的内容。希望你能明白。 - Kavin Prabhu

Answer 1

您可以在主窗格上使用带有边距的SlidingPaneLayout，并使用自定义监听器进行交叉淡入淡出。

<com.sqisland.android.CrossFadeSlidingPaneLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/sliding_pane_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
  <FrameLayout
      android:layout_width="240dp"
      android:layout_height="match_parent"
      android:background="@color/purple">
  <TextView
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:text="@string/full"/>
  <TextView
      android:layout_width="64dp"
      android:layout_height="match_parent"
      android:background="@color/blue"
      android:text="@string/partial"/>
  </FrameLayout>
  <TextView
      android:layout_width="400dp"
      android:layout_height="match_parent"
      android:layout_weight="1"
      android:layout_marginLeft="64dp"
      android:background="@color/light_blue"
      android:text="@string/pane_2"/>
</com.sqisland.android.CrossFadeSlidingPaneLayout>

继承 SlidingPaneLayout 并在 onFinishInflate 中查找部分和完整窗格：

protected void onFinishInflate() {
  super.onFinishInflate();

  if (getChildCount() < 1) {
    return;
  }

  View panel = getChildAt(0);
  if (!(panel instanceof ViewGroup)) {
    return;
  }

  ViewGroup viewGroup = (ViewGroup) panel;
  if (viewGroup.getChildCount() != 2) {
    return;
  }
  fullView = viewGroup.getChildAt(0);
  partialView = viewGroup.getChildAt(1);

  super.setPanelSlideListener(crossFadeListener);
}

使用监听器更改完整面板和部分面板的透明度：

private SimplePanelSlideListener crossFadeListener 
    = new SimplePanelSlideListener() {
  public void onPanelSlide(View panel, float slideOffset) {
    super.onPanelSlide(panel, slideOffset);
    if (partialView == null || fullView == null) {
      return;
    }

    partialView.setVisibility(isOpen() ? View.GONE : VISIBLE);
    partialView.setAlpha(1 - slideOffset);
    fullView.setAlpha(slideOffset);
  }
};

此外，在打开布局时隐藏部分窗格。

protected void onLayout(
    boolean changed, int l, int t, int r, int b) {
  super.onLayout(changed, l, t, r, b);

  if (partialView != null) {
    partialView.setVisibility(isOpen() ? View.GONE : VISIBLE);
  }
}

更多信息： http://blog.sqisland.com/2015/01/partial-slidingpanelayout.html。

该链接提供了有关部分滑动面板布局的更多信息。

- chiuki

---

感谢这个答案。这篇博客帮助我了解他们是如何实现的。非常感谢@chiuki。 - Kavin Prabhu

Answer 2

有一款非常棒的库可以解决这个问题 https://github.com/mikepenz/MaterialDrawer

(使用此库中的MiniDrawer)

- android_dev

---

这个项目是为Android Studio设计的，我想在Eclipse中实现它，你能帮我吗？ - Vaishali Sutariya

Eclipse在Android开发中已经过时，建议转移到Android Studio。 - android_dev