Как включить или подделать мини-вариант из руководства по материальному дизайну для android.support.v4.widget.DrawerLayout?

Как включить "мини-вариант" из Материала Руководство по дизайну - чтобы в закрытом состоянии отображались только значки ящика?

мини-вариант

В качестве простого тестового проекта для своего вопроса я взял хорошо известный Пример панели навигации от Google, а затем добавил второй ящик на правая сторона и значки для записей 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 для планшетов в этом режиме.


person Alexander Farber    schedule 15.07.2015    source источник
comment
Не могли бы вы более подробно описать желаемое поведение? (Всегда ли виден мини-ящик? Какой переход нужно использовать, когда выдвигаете ящик? ...)   -  person Lamorak    schedule 21.07.2015
comment
Да, всегда видны: либо только значки (закрытый ящик), либо те же значки и текст (когда ящик открыт). Переход не имеет значения, если вы не просто переключаете видимость двух разных ящиков.   -  person Alexander Farber    schedule 21.07.2015
comment
это можно увидеть в приложении Gmail на планшетах. Я надеюсь, что он будет частью NavigationView с библиотекой поддержки дизайна. см. google.co.in/design / spec / patterns /   -  person Amol Gupta    schedule 22.07.2015


Ответы (4)


Официальный NavigationDrawer действительно упоминает «мини-вариант» в своих спецификация проекта, но нет документации о том, как его использовать. Возможно, это будет позже как часть библиотеки поддержки. Обновит ответ, если / когда будет официальное решение.

А пока взгляните на библиотеку ActionsContentView, которая делает именно то, что вы хотите. Последний раз это были обновления 2 года назад, но все работает, я использовал его некоторое время назад. Вы также можете получить его в Google Play и протестировать.

Закрытое состояниеОткрытое состояние

person Marko    schedule 21.07.2015

Пожалуйста, перейдите по следующей ссылке:

https://github.com/mikepenz/MaterialDrawer

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

MaterialDrawer - это реализация для создания выдвижного ящика для материалов. Его последняя версия 4.0, хотя еще не выпущена, предоставляет «встроенный ящик» для достижения того, что вы хотите. Не идеально до сих пор, потому что я загрузил его демоверсию, попробовал эту новую функцию и обнаружил, что ящик не открывается, сдвигая его, но автор упорно трудится, чтобы закончить его.

В результате вы можете дождаться скорого выпуска и проверить его использование в это время.

person ywwynm    schedule 21.07.2015

Ознакомьтесь с другим вопросом, касающимся варианта мини-навигации: Реализация планшета Gmail, такого как панель навигации.

Похоже, у него есть рабочее решение для варианта с ящиком Mini nav, как и в приложении Gmail для планшетов, как упоминал @Amol Gupta. Принятый ответ на другой вопрос содержит ссылку на сообщение в блоге с более подробным объяснением того, как реализовать мини вариант. В их решении используется макет скользящей панели, который переключается между «частичным» макетом и «полным» макетом.

Вот ссылка на пример источника сообщения в блоге:

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

person dpremier89    schedule 24.07.2015

Я рекомендую изменить layout_width в @id/left_drawer с 240dp на меньшее число, например 80dp.

person eddie    schedule 07.05.2016