24

如何启用Material Design 指南中的“迷你变体” - 以便只有抽屉图标显示在其关闭状态?

迷你变种

作为我的问题的一个简单测试项目,我采用了Google 著名的 Navigation Drawer Example - 然后在右侧添加了第二个 Drawer 并在两侧添加了 ListView 条目的图标:

截屏

截屏

请告知如何激活(或者可能是假的?)“迷你变体抽屉” - 以便在上述屏幕截图的右侧只有音乐符号可见。

这是我的布局文件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 。

4

4 回答 4

7

官方NavigationDrawer在他们的设计规范中确实提到了“迷你变体” ,但没有关于如何使用它的文档。也许它稍后会作为支持库的一部分出现。如果/何时会有官方解决方案,将更新答案。

在此之前,请查看ActionsContentView 库,它完全符合您的要求。上次更新是在 2 年前,但它有效,我前一阵子用过。您也可以在Google Play上获取并进行测试。

关闭状态 打开状态

于 2015-07-21T10:05:02.850 回答
4

请访问以下链接:

https://github.com/mikepenz/MaterialDrawer

https://github.com/mikepenz/MaterialDrawer/issues/487

MaterialDrawer 是一个创建材质抽屉的实现。它的最新版本 4.0 虽然尚未发布,但提供了一个“嵌入式抽屉”来满足您的需求。到现在还不是很完美,因为我已经下载了它的demo,尝试了这个新功能,发现抽屉不能滑动打开,但作者正在努力完成它。

因此,您可以等待即将发布的版本并在那时检查其使用情况。

于 2015-07-21T16:13:38.400 回答
2

查看另一个 Mini nav 变体问题:Implementing Gmail Tablet like Navigation Drawer

正如@Amol Gupta 提到的,它似乎有一个适用于Mini nav drawer 变体的工作解决方案,就像它在平板电脑的Gmail 应用程序中找到的一样。另一个问题中接受的答案包含指向博客文章的链接,其中包含有关如何实现迷你变体的更详细说明。他们的解决方案使用在“部分”布局和“完整”布局之间交叉淡入淡出的滑动窗格布局。

这里也是博客文章示例源的链接:

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

于 2015-07-24T20:57:20.593 回答
0

我建议将from更改layout_width为较小的数字,例如.@id/left_drawer240dp80dp

于 2016-05-07T18:07:12.073 回答