如何在android.support.v4.widget.DrawerLayout中启用或伪造来自Material Design指南的小型变体?

24

如何从Material Design指南启用“迷你变体”,以便在关闭状态下仅显示抽屉图标?

mini variant

作为我的问题的一个简单测试项目,我选取了谷歌公司著名的导航抽屉示例,并在右侧添加了第二个抽屉和左右两侧ListView条目的图标:

screenshot

screenshot

请指导如何激活(或者伪造?)“迷你抽屉” - 使得只有音乐符号在上述截图的右侧可见。
这是我的布局文件activity_main.xml
<android.support.v4.widget.DrawerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout 
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <android.support.v7.widget.Toolbar 
            xmlns:android="http://schemas.android.com/apk/res/android"
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

        <ImageView 
            android:src="@drawable/ic_music_note_black_24dp"
            android:onClick="openActions"
            android:layout_gravity="right"
            android:padding="16dp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

        </android.support.v7.widget.Toolbar>

        <FrameLayout
            android:id="@+id/content_frame"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />

    </LinearLayout>

    <ListView
        android:id="@+id/left_drawer"
        android:layout_width="240dp"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:choiceMode="singleChoice" />

    <ListView
        android:id="@+id/right_drawer"
        android:layout_width="160dp"
        android:layout_height="match_parent"
        android:layout_gravity="end"
        android:choiceMode="singleChoice" />

</android.support.v4.widget.DrawerLayout>

MainActivity.java 则使用它:

public class MainActivity extends AppCompatActivity {
    private Toolbar mToolbar;
    private DrawerLayout mDrawerLayout;
    private ListView mDrawerList;
    private ListView mActionList;
    private ActionBarDrawerToggle mDrawerToggle;

    private String[] mPlanetTitles;
    private String[] mActions;
    private int[] mIcons;

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

        mPlanetTitles = getResources().getStringArray(R.array.planets_array);
        mActions = getResources().getStringArray(R.array.music_actions);

        TypedArray ta = getResources().obtainTypedArray(R.array.music_icons);
        mIcons = new int[ta.length()];
        for (int i = 0; i < mIcons.length; i++)
            mIcons[i] = ta.getResourceId(i, R.drawable.ic_menu_black_24dp);
        ta.recycle();

        mToolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(mToolbar);

        mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
        mDrawerList = (ListView) findViewById(R.id.left_drawer);
        mActionList = (ListView) findViewById(R.id.right_drawer);

        mDrawerList.setAdapter(new ArrayAdapter<String>(this,
            R.layout.drawer_list_item, mPlanetTitles) {
            @Override
            public View getView(int position, View convertView, ViewGroup parent) {
                TextView view = (TextView) super.getView(position, convertView, parent);
                view.setCompoundDrawablePadding(24);
                view.setCompoundDrawablesWithIntrinsicBounds(
                    R.drawable.ic_stars_white_24dp, 0, 0, 0);
                return view;
            }
        });

        mActionList.setAdapter(new ArrayAdapter<String>(this,
            android.R.layout.simple_list_item_1, mActions) {
            @Override
            public View getView(int position, View convertView, ViewGroup parent) {
                TextView view = (TextView) super.getView(position, convertView, parent);
                view.setCompoundDrawablePadding(24);
                view.setCompoundDrawablesWithIntrinsicBounds(mIcons[position], 0, 0, 0);
                return view;
            }
        });

        mDrawerToggle = new ActionBarDrawerToggle(
                this,                  /* host Activity */
                mDrawerLayout,         /* DrawerLayout object */
                mToolbar,
                R.string.drawer_open,  /* "open drawer" description for accessibility */
                R.string.drawer_close  /* "close drawer" description for accessibility */
                ) {
            public void onDrawerClosed(View view) {
                mToolbar.setTitle(mTitle);
                invalidateOptionsMenu(); // creates call to onPrepareOptionsMenu()
            }

            public void onDrawerOpened(View drawerView) {
                mToolbar.setTitle(mDrawerTitle);
                invalidateOptionsMenu(); // creates call to onPrepareOptionsMenu()
            }
        };
        mDrawerLayout.setDrawerListener(mDrawerToggle);

        if (savedInstanceState == null) {
            selectItem(0);
        }
    }

这里是展示平板电脑上Gmail的视频


请问您能否更明确地描述所需的行为?(小抽屉是否始终可见?当您将抽屉滑开时应使用哪种过渡效果?...) - Lamorak
是的,始终可见:可以是仅图标(关闭抽屉)或相同的图标和文本(打开抽屉时)。过渡并不重要,只要您不仅切换2个不同抽屉的可见性即可。 - Alexander Farber
2
这可以在平板电脑上的Gmail应用程序中看到。我希望它将成为带有设计支持库的NavigationView的一部分。请参见http://www.google.co.in/design/spec/patterns/navigation-drawer.html#navigation-drawer-behavior。 - Amol Gupta
4个回答

7
官方的NavigationDrawer确实在其设计规范中提到了'mini-variant',但没有说明如何使用。也许它会作为支持库的一部分稍后推出。如果有官方解决方案,我会更新答案。
在此之前,看看ActionsContentView库,它正是你想要的。最近一次更新是2年前,但它可以工作,我以前用过。你也可以在Google Play上获取它并测试。

Closed state Opened state


4
请访问以下链接:
https://github.com/mikepenz/MaterialDrawer
https://github.com/mikepenz/MaterialDrawer/issues/487
MaterialDrawer是一个实现材料式侧滑菜单的库。最新版本4.0尚未发布,但它提供了一个“内置式抽屉”功能,方便用户快速定位所需内容。然而目前该功能仍有不足之处,因为我已经下载了它的演示版,并尝试了这个新功能,发现该抽屉无法通过滑动打开,但作者正在努力完善中。
因此,您可以等待即将发布的版本并在那时检查其用法。

2

请查看这个其他的 Mini 导航栏变体问题:实现 Gmail 平板电脑类似的导航抽屉

它似乎有一个工作解决方案,用于 Mini 导航抽屉变体,就像 @Amol Gupta 在 Gmail 平板应用程序中提到的那样。在另一个问题中被接受的答案包含了一个链接,指向一个博客帖子,其中详细说明了如何实现 mini 变体。他们的解决方案使用滑动面板布局,在“部分”布局和“完整”布局之间交替淡入淡出。

这是博客帖子示例源代码的链接:

https://github.com/chiuki/sliding-pane-layout


0

我建议将@id/left_drawerlayout_width240dp改为更小的数字,例如80dp


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接