如何在安卓系统中创建迷你抽屉菜单？

Question

我想创建一个类似于谷歌示例的迷你抽屉菜单：

我已经尝试过创建一个始终在父元素左侧的布局，然后在打开菜单时让其溢出，但看起来不自然。有人知道我该如何实现吗？

---

更新

我尝试了另一种方法。监听菜单滑动，并在其关闭足够接近时捕获，然后可以设置菜单大小并保持图标可见，但文本会消失。

@Override
        public void onDrawerSlide(float v, int i) {
            Log.d("onDrawerSlide", "v=" + v + " i=" + i);
            if (i<previewsI && decreasingCount > 3) {
                // check if menu is closed enough
                if (i <100 && i > 50) {
                    // change menu size, and force menu to keep opened
                    mDrawer.setMenuSize(Utils.dpToPx(70, getApplicationContext()));
                    mDrawer.openMenu();
                    // TODO: hide menu items title, and let only icons to be visible

                }
            }
            else if (i < previewsI)
                // make sure the menu is closing
                    decreasingCount++;

            previewsI = i;
        }

它能运行，但不如我所愿地顺畅。现在我必须弄清楚如何再次平滑地打开它。 无论如何，我认为这并不是一个优雅的解决方案。我相信一定有更好的解决方案存在。

- Filip Luchianenco

---

请准确地描述您已经拥有的内容以及您认为其中存在的问题。向我们展示布局和打开关闭它的代码，以及问题的描述将是一个好的开始。 - Xaver Kapeller

所以你正在使用NavigationDrawer来实现这个？我怀疑这样做不会有用，至少如果你想与上面的图片相匹配的话。NavigationDrawer目前还没有实现迷你抽屉功能，至少据我所知。个人而言，我宁愿采用完全自定义的实现方式。 - Xaver Kapeller

真的不需要花太长时间。如果你不在意一个可以放进库中的通用解决方案，你可以在半小时到一小时内轻松实现它。 - Xaver Kapeller

这基本上只是一个包含图标和文本的简单行的RecyclerView或ListView，以及两个动画，可以折叠和展开RecyclerView或ListView，同时将其移动到Toolbar上方或下方。一点也不复杂。 - Xaver Kapeller

如果您想在抽屉打开时使其背后的内容变暗，您可以简单地使用FrameLayout及其前景Drawable来绘制透明黑色覆盖其内容。 - Xaver Kapeller

Answer 1

我知道这是一个非常老的问题，而且我不确定你是否愿意使用库。但是MaterialDrawer库将提供一个MiniDrawer实现，包括转换为普通抽屉。

如截图所示，MiniDrawer还支持徽章，并且还配有AccountSwitcher和其他所有内容。

MiniDrawer使用Crossfader库，该库允许交叉淡入淡出效果。 Crossfader库的示例应用程序还展示了如何在MaterialDrawer中实现此效果。

下面是创建所示示例的代码（您也可以在GitHub上的存储库中找到它）：

DrawerBuilder builder = new DrawerBuilder()
        .withActivity(this)
        .withToolbar(toolbar)
        .withInnerShadow(true)
        .addDrawerItems(
                //.. add some items ..
        ) // add the items we want to use with our Drawer
        .withOnDrawerItemClickListener(new Drawer.OnDrawerItemClickListener() {
            @Override
            public boolean onItemClick(View view, int position, IDrawerItem drawerItem) {
                //some actions inside the listener

                return miniResult.onItemClick(drawerItem);
            }
        })
        .withSavedInstance(savedInstanceState);

// build the main drawer
result = builder.buildView();
// build the miniDrawer
miniResult = new MiniDrawer().withDrawer(result).withInnerShadow(true).withAccountHeader(headerResult);

//define the width of the normal drawer, and the minidrawer
int first = (int) UIUtils.convertDpToPixel(300, this);
int second = (int) UIUtils.convertDpToPixel(72, this);

//create the Crossfader used to hook the MiniDrawer and the normal drawer together. This also handles the crossfade effect.
crossFader = new Crossfader()
        .withContent(findViewById(R.id.crossfade_content))
        .withFirst(result.getSlider(), first)
        .withSecond(miniResult.build(this), second)
        .withSavedInstance(savedInstanceState)
        .build();

// inform the MiniDrawer about the crossfader.
miniResult.withCrossFader(new CrossfadeWrapper(crossFader));

- mikepenz

---

我知道这个库，但是我不知道如何实现一个迷你抽屉，因为文档中没有关于此的内容。谢谢 :) - hadi

我已添加了Crossfader库的链接，该库用于实现交叉淡入淡出效果 https://github.com/mikepenz/Crossfader - mikepenz

每个图标抽屉下面是否可以加上标签或标题？ - KikX

Answer 2

我想出了一种使用SlidingPaneLayout实现小型导航抽屉的方法。

创建一个布局资源文件并将SlidingPaneLayout设置为父视图。SlidingPaneLayout需要两个子视图：主视图和详细视图。主视图将包含所有菜单选项的列表，详细视图将包含内容。

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.SlidingPaneLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!--Master fragment-->
    <fragment
        android:name="com.ng.anthony.mininavigationdrawer.MasterFragment"
        android:layout_width="220dp"
        android:layout_height="match_parent"
        android:id="@+id/fragment_master">
    </fragment>

    <!--Detail layout -->
    <FrameLayout
        android:layout_width="1000dp"
        android:layout_height="match_parent"
        android:layout_marginLeft="56dp">
    </FrameLayout>
</android.support.v4.widget.SlidingPaneLayout>

创建一个主片段类。在您的主片段中，应该有一个包含所有菜单选项的列表视图。

public class MasterFragment extends ListFragment {

    public View onCreateView (LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_master, container);

        setListAdapter(new MenuListAdapter(R.layout.row_menu_action_item, getActivity(), MenuActionItem.values()));
        return view;
    }
}

将主片段布局添加到您的布局资源文件夹中。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ListView
        android:id="@android:id/list"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@android:color/darker_gray"
        android:divider="@null">
    </ListView>

</LinearLayout>

主片段包含一个列表视图，并使用菜单选项的枚举来填充列表。

public enum MenuActionItem {
    ITEM1,
    ITEM2,
    ITEM3,
    ITEM4,
    ITEM5
}

主碎片还包含自定义数组适配器，用于显示菜单选项列表。自定义数组适配器为每个菜单选项填充一行布局。

import android.app.Activity;
import android.view.MenuItem;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.ImageView;
import android.widget.TextView;

import java.util.ArrayList;

/**
 * Created by Anthony on 16-01-25.
 */
public class MenuListAdapter extends ArrayAdapter<MenuActionItem> {

    int resource;
    Activity activity;

    public MenuListAdapter(int resource, Activity activity, MenuActionItem[] items) {
        super(activity, resource, items);

        this.resource = resource;
        this.activity = activity;
    }

    public View getView (int position, View convertView, ViewGroup parent) {
        View rowView = convertView;

        if(rowView == null) {
            rowView = activity.getLayoutInflater().inflate(resource, null);

            MenuItemViewHolder viewHolder = new MenuItemViewHolder();

            viewHolder.menuItemImageView = (ImageView)rowView.findViewById(R.id.menu_item_image_view);
            viewHolder.menuItemTextView = (TextView)rowView.findViewById(R.id.menu_item_text_view);

            rowView.setTag(viewHolder);
        }

        MenuItemViewHolder holder = (MenuItemViewHolder)rowView.getTag();

        if(position == MenuActionItem.ITEM1.ordinal()) {
            holder.menuItemImageView.setImageDrawable(activity.getDrawable(R.drawable.ic_payment_white_24dp));
            holder.menuItemTextView.setText(activity.getResources().getString(R.string.item1));
        }
        else if(position == MenuActionItem.ITEM2.ordinal()) {
            holder.menuItemImageView.setImageDrawable(activity.getDrawable(R.drawable.ic_pets_white_24dp));
            holder.menuItemTextView.setText(activity.getResources().getString(R.string.item2));
        }
        else if(position == MenuActionItem.ITEM3.ordinal()) {
            holder.menuItemImageView.setImageDrawable(activity.getDrawable(R.drawable.ic_receipt_white_24dp));
            holder.menuItemTextView.setText(activity.getResources().getString(R.string.item3));
        }
        else if(position == MenuActionItem.ITEM4.ordinal()) {
            holder.menuItemImageView.setImageDrawable(activity.getDrawable(R.drawable.ic_shopping_cart_white_24dp));
            holder.menuItemTextView.setText(activity.getResources().getString(R.string.item4));
        }
        else if(position == MenuActionItem.ITEM5.ordinal()) {
            holder.menuItemImageView.setImageDrawable(activity.getDrawable(R.drawable.ic_work_white_24dp));
            holder.menuItemTextView.setText(activity.getResources().getString(R.string.item5));
        }

        return rowView;
    }

    private static class MenuItemViewHolder {
        public ImageView menuItemImageView;
        public TextView menuItemTextView;
    }
}

添加行布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal" android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="16dp"
    android:gravity="center_vertical">

    <ImageView
        android:id="@+id/menu_item_image_view"
        android:layout_width="24dp"
        android:layout_height="24dp"
        android:layout_marginRight="16dp"/>

    <TextView
        android:id="@+id/menu_item_text_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="16sp"
        android:textColor="@android:color/white"/>

</LinearLayout>

最终你应该看到类似这样的东西 你可以在这里下载示例项目：https://github.com/nganthony/MiniNavigationDrawer

- Anthony Ng

---

这太棒了！做得好！谢谢。 - Filip Luchianenco

如何使迷你抽屉仅固定在图标上？谢谢。 - Mr T

尝试将主片段布局宽度从220dp更改为56dp。这将限制侧面板的大小，仅显示菜单图标。 - Anthony Ng

每个图标抽屉下面是否可以放置标签/标题？ - KikX