web-dev-qa-db-ja.com

マテリアルナビゲーションドロワーにチェックボックスを追加するにはどうすればよいですか？

メニュー項目アイコンメニューを使用していますが、すべてのメニュー項目にチェックボックスを追加したいと思います。これは私のdrawer_menu.xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:Android="http://schemas.Android.com/apk/res/Android">
<group Android:checkableBehavior="all">
    <item
        Android:checked="false"
        Android:id="@+id/item_navigation_drawer_inbox"
        Android:icon="@drawable/ic_inbox_black_24dp"
        Android:checkable="true"
        Android:title="Inbox" />
    <item
        Android:id="@+id/item_navigation_drawer_starred"
        Android:icon="@drawable/ic_action_toggle_star"
        Android:checkable="true"
        Android:title="Starred" />
    <item
        Android:id="@+id/item_navigation_drawer_sent_mail"
        Android:icon="@drawable/ic_action_content_send"
        Android:checkable="true"
        Android:title="Sent mail" />
    <item
        Android:id="@+id/item_navigation_drawer_drafts"
        Android:icon="@drawable/ic_action_content_drafts"
        Android:checkable="true"
        Android:title="Drafts"
        />
</group>

<item Android:title="Subheader">
    <menu>
        <item
            Android:id="@+id/item_navigation_drawer_settings"
            Android:icon="@drawable/ic_action_content_mail"
            Android:title="Settings" />
        <item
            Android:id="@+id/item_navigation_drawer_help_and_feedback"
            Android:icon="@drawable/ic_action_action_delete"
            Android:title="Help and feedback" />
    </menu>
</item>

</menu>

アイコンとテキストがあります。それらすべてにチェックボックスも追加したい。

[icon] [some text]  [checkbox]

このような。

コードでマテリアルナビゲーションドロワーを使用しています。

これは私のnav_header.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
Android:layout_width="match_parent"
Android:layout_height="192dp"
Android:gravity="bottom"
Android:theme="@style/ThemeOverlay.AppCompat.Dark">

<ImageView
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content"
    Android:scaleType="centerCrop"
    Android:background="@drawable/bg_ist_nav_img" />

<LinearLayout
    Android:layout_width="match_parent"
    Android:layout_height="52dp"
    Android:layout_gravity="left|bottom"
    Android:gravity="center"
    Android:orientation="vertical"
    Android:paddingBottom="8dp"
    Android:paddingLeft="16dp"
    Android:paddingRight="16dp">

    <TextView
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content"
        Android:layout_gravity="center"
        Android:gravity="center_vertical"
        Android:text="text"
        Android:textSize="30sp"
        Android:textAppearance="@style/TextAppearance.AppCompat.Body2" />

</LinearLayout>

</FrameLayout>

そして最後にこれは私のactivity_main.xml

 <Android.support.v4.widget.DrawerLayout 
xmlns:andro id="http://schemas.Android.com/apk/res/Android"
xmlns:app="http://schemas.Android.com/apk/res-auto"
Android:id="@+id/drawer_layout"
Android:layout_width="match_parent"
Android:layout_height="match_parent">


<LinearLayout
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content"
    Android:orientation="vertical">

    <FrameLayout
        Android:layout_width="match_parent"
        Android:layout_height="@dimen/status_bar_KitKat_height"
        Android:background="?colorPrimary"/>

    <FrameLayout
        Android:layout_width="match_parent"
        Android:layout_height="@dimen/status_bar_Lollipop_height"
        Android:background="?colorPrimaryDark"/>

</LinearLayout>

<FrameLayout
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content"
    Android:layout_marginTop="@dimen/status_bar_margin_top">

    <TextView
        Android:id="@+id/textView"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:layout_gravity="center"
        Android:text="Inbox"
        Android:textAppearance="@style/TextAppearance.AppCompat.Display1"
        Android:textColor="@color/md_text" />



    <Android.support.v7.widget.Toolbar
        Android:id="@+id/toolbar"
        Android:layout_width="match_parent"
        Android:layout_height="?actionBarSize"
        Android:background="?attr/colorPrimary"
        Android:elevation="4dp"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
        app:theme="@style/ToolbarTheme" />

</FrameLayout>

<Android.support.design.widget.NavigationView
    Android:id="@+id/navigation_view"
    Android:layout_width="wrap_content"
    Android:layout_height="match_parent"
    Android:layout_gravity="start"
    Android:fitsSystemWindows="@bool/fitsSystemWindows"
    app:headerLayout="@layout/navigation_drawer_header"
    app:menu="@menu/navigation_drawer_menu"
    app:theme="@style/NavigationViewTheme" />

</Android.support.v4.widget.DrawerLayout>
androidcheckboxnavigation-drawermaterial-design
12
slymnozdmrc

長い研究の末、私はカスタムのスライド式引き出しを使用することにしました。私は私の問題を解決しました。多分あなたは私の方法を使うことができます。それで私は今チェックボックスを持っています。

まず最初に定義しましたdrawer_list_item.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
Android:layout_width="match_parent"
Android:layout_height="30dp"
Android:background="@color/list_item_title">

<ImageView
    Android:id="@+id/icon"
    Android:layout_width="25dp"
    Android:layout_height="wrap_content"
    Android:layout_alignParentLeft="true"
    Android:layout_marginLeft="12dp"
    Android:layout_marginRight="12dp"
    Android:contentDescription="@string/desc_list_item_icon"
    Android:src="@drawable/ic_home"
    Android:layout_centerVertical="true" />

<TextView
    Android:id="@+id/title"
    Android:layout_width="wrap_content"
    Android:layout_height="match_parent"
    Android:layout_toRightOf="@id/icon"
    Android:minHeight="?android:attr/listPreferredItemHeightSmall"
    Android:textAppearance="?android:attr/textAppearanceListItemSmall"
    Android:textColor="@color/counter_text_bg"
    Android:gravity="center_vertical"
    Android:text="text"
    Android:paddingRight="40dp"/>

<CheckBox
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    Android:id="@+id/checkBox"
    Android:checked="false"
    Android:layout_marginLeft="20dp"
    Android:buttonTint="@color/md_Indigo_500"
    Android:layout_marginEnd="19dp"
    Android:layout_alignBaseline="@+id/title"
    Android:layout_alignBottom="@+id/title"
    Android:layout_alignParentEnd="true" />

</RelativeLayout>

これで、アイコン、テキスト、素敵なチェックボックスができました。

その後、リストビューをactivity_main.xmlに追加します

<Android.support.v4.widget.DrawerLayout   
xmlns:Android="http://schemas.Android.com/apk/res/Android"
xmlns:app="http://schemas.Android.com/apk/res-auto"
Android:id="@+id/drawer_layout"
Android:layout_width="match_parent"
Android:layout_height="match_parent">
<!-- Framelayout to display Fragments -->
<FrameLayout
    Android:id="@+id/frame_container"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent" />

<!-- Listview to display slider menu -->
<ListView
    Android:id="@+id/list_slidermenu"
    Android:layout_width="240dp"
    Android:layout_height="match_parent"
    Android:layout_gravity="start"
    Android:choiceMode="singleChoice"
    Android:divider="@Android:color/transparent"
    Android:dividerHeight="0dp"
    Android:listSelector="@drawable/list_selector"
    Android:background="@color/list_item_title"/>

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

ここにListViewを置きます。最後に、onCreate inMainActivity.Javaでプログラム的にコードを定義しました

    mTitle = mDrawerTitle = getTitle();     
    navMenuTitles = getResources().getStringArray(R.array.nav_drawer_items);
    navMenuIcons = getResources().     
    obtainTypedArray(R.array.nav_drawer_icons);

    mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
    mDrawerList = (ListView) findViewById(R.id.list_slidermenu);

    navDrawerItems = new ArrayList<NavDrawerItem>();
    navDrawerItems.add(new NavDrawerItem(navMenuTitles[0],   
    navMenuIcons.getResourceId(0, -1)));

    navDrawerItems.add(new NavDrawerItem(navMenuTitles[1],  
    navMenuIcons.getResourceId(1, -1)));

    navDrawerItems.add(new NavDrawerItem(navMenuTitles[2], 
    navMenuIcons.getResourceId(2, -1)));

    navDrawerItems.add(new NavDrawerItem(navMenuTitles[3], 
    navMenuIcons.getResourceId(3, -1)));

    navDrawerItems.add(new NavDrawerItem(navMenuTitles[4], 
    navMenuIcons.getResourceId(4, -1)));

    navDrawerItems.add(new NavDrawerItem(navMenuTitles[5],   
    navMenuIcons.getResourceId(5, -1)));

    navMenuIcons.recycle();


    adapter = new NavDrawerListAdapter(getApplicationContext(),
            navDrawerItems);
    mDrawerList.setAdapter(adapter);


    getActionBar().setDisplayHomeAsUpEnabled(true);
    getActionBar().setHomeButtonEnabled(true);

    mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout,         
      R.string.app_name, 
    ){
        public void onDrawerClosed(View view) {
            getActionBar().setTitle(mTitle);
            invalidateOptionsMenu();
        }

        public void onDrawerOpened(View drawerView) {
            getActionBar().setTitle(mDrawerTitle);
            invalidateOptionsMenu();
        }
    };
    mDrawerLayout.setDrawerListener(mDrawerToggle);

@Override
public boolean onPrepareOptionsMenu(Menu menu) {
    boolean drawerOpen = mDrawerLayout.isDrawerOpen(mDrawerList);
    menu.findItem(R.id.action_settings).setVisible(!drawerOpen);
    return super.onPrepareOptionsMenu(menu);
}

@Override
public void setTitle(CharSequence title) {
    mTitle = title;
    getActionBar().setTitle(mTitle);
}

@Override
protected void onPostCreate(Bundle savedInstanceState) {
    super.onPostCreate(savedInstanceState);.
    mDrawerToggle.syncState();
}

@Override
public void onConfigurationChanged(Configuration newConfig) {
    super.onConfigurationChanged(newConfig);
    mDrawerToggle.onConfigurationChanged(newConfig);
}

そしてまたあなたは使用しています

string.xmlでアイコンとテキストを取得します。テキストの文字列配列とアイコンの配列を定義する必要があります。私はこのコードについてこのチュートリアルに従います。これは非常に便利です http://www.androidhive.info/2013/11/Android-sliding-menu-using-navigation-drawer/

このソリューションがお役に立てば幸いです。

3
slymnozdmrc

app:actionLayoutあなたは奇跡を起こさせることができます。

これは、Javaコードなしでドロワーでカスタムウィジェットを実現する例です：

<Android.support.v4.widget.DrawerLayout
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    tools:openDrawer="end"
    >
    <Android.support.design.widget.NavigationView
        Android:layout_width="wrap_content"
        Android:layout_height="match_parent"
        Android:layout_gravity="end"
        Android:background="@Android:color/white"
        app:menu="@menu/widgets"
        />
</Android.support.v4.widget.DrawerLayout>

enter image description here

menu/widgets.xml

<?xml version="1.0" encoding="utf-8"?>
<menu
    xmlns:Android="http://schemas.Android.com/apk/res/Android"
    xmlns:app="http://schemas.Android.com/apk/res-auto">
    <item
        Android:title="Widgets"
        >
        <menu>
            <item
                Android:title="Checkable menu item (checked)"
                Android:checkable="true"
                Android:checked="true"
                />
            <item
                Android:title="CheckBox"
                app:actionLayout="@layout/widget_check" />
            <item
                Android:title="Switch"
                app:actionLayout="@layout/widget_switch" />
            <item
                Android:title="EditText"
                app:actionLayout="@layout/widget_edit" />
            <item
                Android:title=""
                app:actionLayout="@layout/widget_wide" />
            <item
                Android:title="NumberPicker"
                app:actionLayout="@layout/widget_number" />
            <item
                Android:title="Custom LinearLayout number"
                app:actionLayout="@layout/widget_custom" />
        </menu>
    </item>
</menu>

すべてのレイアウト（それぞれが単一のファイルです）

<!-- layout/widget_check.xml -->
<CheckBox
    xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:layout_width="wrap_content"
    Android:layout_height="match_parent"
    Android:text="check"
    Android:checked="true"
    />

<!-- layout/widget_edit.xml -->
<EditText
    xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content"
    Android:text="hello"
    Android:inputType="text"
    />

<!-- layout-v14/widget_switch.xml
     for older versions you can add a CheckBox into layout/widget_switch.xml
     and treat both as Checkable or CompoundButton -->
<Switch
    xmlns:Android="http://schemas.Android.com/apk/res/Android"
    xmlns:tools="http://schemas.Android.com/tools"
    Android:layout_width="wrap_content"
    Android:layout_height="match_parent"
    Android:checked="true"
    tools:targetApi="ICE_CREAM_SANDWICH"
    />

<!-- layout/widget_wide.xml
     Just some text, notice that it's wide on the UI because it has a lot of text,
     and not because it has match_parent -->
<TextView
    xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    Android:gravity="center"
    Android:background="#888"
    Android:text="Wide can be only forced by content, match_parent doesn't work"
    />

<!-- layout-v11/widget_number.xml
     you're probably better off creating a custom widget anyway -->
<NumberPicker
    xmlns:Android="http://schemas.Android.com/apk/res/Android"
    xmlns:tools="http://schemas.Android.com/tools"
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    Android:orientation="horizontal"
    tools:targetApi="HONEYCOMB"
    />

<!-- layout/widget_custom.xml -->
<LinearLayout
    xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    Android:layout_gravity="center"
    Android:gravity="center"
    Android:orientation="horizontal"
    >
    <Button
        Android:layout_width="32dp"
        Android:layout_height="32dp"
        Android:padding="0dp"
        Android:text="&lt;"
        Android:gravity="center"
        />
    <TextView
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:text="12"
        />
    <Button
        Android:layout_width="32dp"
        Android:layout_height="32dp"
        Android:padding="0dp"
        Android:text="&gt;"
        Android:gravity="center"
        />
</LinearLayout>

コードで接続する

他のメニューと同じようにアクセスできます。

// <item Android:id="@+id/switch" title="Switch" ... />
NavigationView nav = (NavigationView)findViewById(R.id.navigation_view);
MenuItem switchItem = nav.getMenu().findItem(R.id.switch);
CompoundButton switchView = (CompoundButton)MenuItemCompat.getActionView(switchItem);
switchView.setOnCheckedChangeListener(new OnCheckedChangeListener() {
    @Override public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) { }
});
42
TWiStErRob

TWiStErRobコードの代替ソリューションは、actionViewClassを使用することです。

   <item
        Android:id="@+id/nav_switch"
        Android:title="Switch"
        app:actionViewClass="Android.widget.Switch"
    />

したがって、レイアウトファイルを作成する必要はありません。もちろん、Switchの場合は、API14 +のメニューにする必要があります

26
Alex

@Alexの回答に応じて、次のように使用できます。

<item
    Android:id="@+id/checkboxX-axis"
    Android:title="Show x-axis"
    Android:icon="@drawable/ic_x_axis_black_24dp"
    app:actionViewClass="Android.widget.CheckBox"
    />

プログラムでcheckBoxにアクセスするには、次のようにします。

MenuItem menuItem = navigationView.getMenu().findItem(R.id.checkboxX_axis);
CompoundButton compundButton = (CompoundButton) menuItem.getActionView();
compundButton.setChecked(true) // or set an eventListener to it.
3
Nikhil Wagh