Android.support.v4.widget.DrawerLayoutのマテリアルデザインガイドからミニバリアントを有効化または偽造する方法は？

Question

マテリアルデザインガイド -から「ミニバリアント」を有効にして、ドロワーアイコンのみが閉じた状態で表示されるようにするにはどうすればよいですか？

簡単なテストプロジェクト 私の質問では、よく知られている Googleによるナビゲーションドロワーの例 -を取り、右側に2番目のドロワーと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を示すビデオ このモードです。

Answer 1

公式NavigationDrawerは、実際に 設計仕様 で「ミニバリアント」について言及していますが、使用方法に関するドキュメントはありません。それ。多分それはサポートライブラリの一部として後で来るでしょう。公式の解決策がある場合/いつになるか答えを更新します。

それまでは、 ActionsContentViewライブラリ を見てください。まさにあなたが望むことを実行します。前回の更新は2年前ですが、動作するので、少し前に使用しました。 Google Play で入手してテストすることもできます。

Answer 2

次のリンクにアクセスしてください。

https://github.com/mikepenz/MaterialDrawer

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

MaterialDrawerは、マテリアルドロワーを作成するための実装です。最新バージョンの4.0は、まだリリースされていませんが、「埋め込みドロワー」を提供して、目的の場所に到達します。デモをダウンロードしてこの新機能を試したところ、引き出しをスライドさせて開けられないことがわかったため、これまで完璧ではありませんでしたが、作者はそれを完成させるために一生懸命取り組んでいます。

その結果、まもなくリリースされるのを待って、その時点での使用法を確認できます。

Answer 3

この他のミニナビゲーションバリアントの質問をチェックしてください： ナビゲーションドロワーのようなGmailタブレットの実装 。

@ Amol Guptaが述べたように、タブレット用のGmailアプリにあるのと同じように、ミニナビゲーションドロワーバリアントの実用的なソリューションがあるようです。他の質問で受け入れられた回答には、ミニバリアントの実装方法に関するより詳細な説明を含む ブログ投稿 へのリンクが含まれています。彼らのソリューションは、「部分的な」レイアウトと「完全な」レイアウトの間でクロスフェードするスライディングペインレイアウトを使用しています。

ブログ投稿のソース例へのリンクもあります。

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

Answer 4

layout_widthの@id/left_drawerを240dpから80dpのような小さい数値に変更することをお勧めします。