web-dev-qa-db-ja.com

androidでカスタムナビゲーションドロワーを作成する方法

こんにちは、Gmailアプリのナビゲーションドロワーに似たナビゲーションドロワーを作成しようとしています。開発者サイトをフォローしていますが、基本的な実装についてのみ指定しています。しかし、仕様に従ってナビゲーションをカスタマイズする必要があります。

  1. Drawerでリストアイテムを分類するためにヘッダーを追加する必要があります
  2. オプションの一部を選択するにはラジオボタンが必要です

これどうやってするの？

androidandroid-listviewnavigation-drawer
49
chathura

チュートリアル Android Custom Navigation Drawer（via archive.org） には、basicとcustomプロジェクト。後者は、スクリーンショットに示すようにナビゲーションドロワーをセットアップする方法を示しています。

NavigationDrawerCustom

プロジェクトのソースコード（archive.org経由） はダウンロード可能です。

また、 Navigation Drawer-Live-O project ...

Navigation Drawer - Live-O

プロジェクトのソースコード はGitHubで入手できます。

MaterialDrawerライブラリ は、アプリケーションのナビゲーションドロワーの最も簡単な実装を提供することを目的としています。すぐに使えるカスタマイズが大量に提供され、AccountSwitcherとして使用できる使いやすいヘッダーも含まれています。

MaterialDrawer library demo

Android Studioには、template projectがあり、スクリーンショットに示すように、Navigation Drawer Activity。

Navigation Drawer Activity

この リポジトリ は、テンプレートに加えられた変更を追跡します。

59
JJD

以下のレイアウトを使用し、ナビゲーションビューでカスタムレイアウトを実現できました。

<Android.support.design.widget.NavigationView
        Android:id="@+id/navi_view"
        Android:layout_width="wrap_content"
        Android:layout_height="match_parent"
        Android:layout_gravity="start|top"
        Android:background="@color/navigation_view_bg_color"
        app:theme="@style/NavDrawerTextStyle">

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

            <include layout="@layout/drawer_header" />

            <include layout="@layout/navigation_drawer_menu" />
        </LinearLayout>
</Android.support.design.widget.NavigationView>
29
Anshul Agarwal

私にとって簡単な解決策は次のとおりです。

考慮事項：

  • このソリューションには、Android St​​udioが提供する自動生成されたナビゲーション引き出しアクティビティが必要です。
  • クラスDrawerItem、CustomDrawerAdapterおよびレイアウトcustom_drawer_item.xmlは、 このチュートリアル から取得されました。

1。カスタムドロワーアイテムをラップするためにこのクラスを作成します：

public class DrawerItem {

  String ItemName;
  int imgResID;

  public DrawerItem(String itemName, int imgResID) {
        super();
        ItemName = itemName;
        this.imgResID = imgResID;
  }

  public String getItemName() {
        return ItemName;
  }
  public void setItemName(String itemName) {
        ItemName = itemName;
  }
  public int getImgResID() {
        return imgResID;
  }
  public void setImgResID(int imgResID) {
        this.imgResID = imgResID;
  }
}

2。引き出しアイテムのカスタムレイアウト（custom_drawer_item.xml）を作成します：

<RelativeLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:layout_width="fill_parent"
    Android:layout_height="fill_parent" >

<LinearLayout
    Android:id="@+id/itemLayout"
    Android:layout_width="fill_parent"
    Android:layout_height="wrap_content"
    Android:layout_alignParentLeft="true"
    Android:orientation="vertical"
    Android:layout_marginTop="0dp"
    Android:background="?android:attr/activatedBackgroundIndicator">

    <LinearLayout
        Android:layout_width="fill_parent"
        Android:layout_height="wrap_content"
        Android:minHeight="55dp">

        <ImageView
            Android:id="@+id/drawer_icon"
            Android:layout_width="wrap_content"
            Android:layout_height="wrap_content"/>

        <TextView
            Android:id="@+id/drawer_itemName"
            Android:layout_width="wrap_content"
            Android:layout_height="wrap_content"
            Android:textAppearance="?android:attr/textAppearanceLarge"/>
    </LinearLayout>

    <View
        Android:layout_width="match_parent"
        Android:layout_height="1dp"
        Android:layout_marginBottom="1dp"
        Android:layout_marginTop="1dp"
        Android:layout_marginLeft="10dp"
        Android:layout_marginRight="10dp"
        Android:background="#DADADC">
    </View>
</LinearLayout>
</RelativeLayout>

3。カスタムアダプターを作成します：

import Java.util.List;
import Android.app.Activity;
import Android.content.Context;
import Android.view.LayoutInflater;
import Android.view.View;
import Android.view.ViewGroup;
import Android.widget.ArrayAdapter;
import Android.widget.ImageView;
import Android.widget.TextView;

public class CustomDrawerAdapter extends ArrayAdapter<DrawerItem> {

Context context;
List<DrawerItem> drawerItemList;
int layoutResID;

public CustomDrawerAdapter(Context context, int layoutResourceID, List<DrawerItem> listItems) {
    super(context, layoutResourceID, listItems);
    this.context = context;
    this.drawerItemList = listItems;
    this.layoutResID = layoutResourceID;
}

@Override
public View getView(int position, View convertView, ViewGroup parent) {
    // TODO Auto-generated method stub

    DrawerItemHolder drawerHolder;
    View view = convertView;

    if (view == null) {
        LayoutInflater inflater = ((Activity) context).getLayoutInflater();
        drawerHolder = new DrawerItemHolder();

        view = inflater.inflate(layoutResID, parent, false);
        drawerHolder.ItemName = (TextView)view.findViewById(R.id.drawer_itemName);
        drawerHolder.icon = (ImageView) view.findViewById(R.id.drawer_icon);

        view.setTag(drawerHolder);

    } else {
        drawerHolder = (DrawerItemHolder) view.getTag();
    }

    DrawerItem dItem = (DrawerItem) this.drawerItemList.get(position);

    drawerHolder.icon.setImageDrawable(view.getResources().getDrawable(
            dItem.getImgResID()));
    drawerHolder.ItemName.setText(dItem.getItemName());

    return view;
}

private static class DrawerItemHolder {
    TextView ItemName;
    ImageView icon;
}
}

4。自動生成されたNavigationDrawerFragment class onCreateViewメソッドで、このために自動生成されたアダプターを置き換えます：

ArrayList<DrawerItem> dataList = new ArrayList<DrawerItem>();
dataList.add(new DrawerItem(getString(R.string.title_section1), R.drawable.ic_action_1));
dataList.add(new DrawerItem(getString(R.string.title_section2), R.drawable.ic_action_2));
dataList.add(new DrawerItem(getString(R.string.title_section3), R.drawable.ic_action_3));

mDrawerListView.setAdapter(new CustomDrawerAdapter(
        getActivity(),
        R.layout.custom_drawer_item,
        dataList));

独自のリソースのR.string.title_sectionNとR.drawable.ic_action_Nを置き換えることを忘れないでください。

12
Manuel Lopera

実装方法がわかれば、Androidナビゲーションドロワーを簡単にカスタマイズできます。ここにニースがあります tutorial ここで設定できます。

これは、mainXMLの構造になります。

<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">

    <!-- 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="right"
        Android:choiceMode="singleChoice"
        Android:divider="@color/list_divider"
        Android:dividerHeight="1dp"        
        Android:listSelector="@drawable/list_selector"
        Android:background="@color/list_background"/>
</Android.support.v4.widget.DrawerLayout>

ヘッダーを追加することで、このリストビューを好みに合わせてカスタマイズできます。ラジオボタン。

7
amalBit

アクティビティを使用したAndroid Navigation Drawerの例に従いました： http://antonioleiva.com/navigation-view/

あなただけのカスタマイズが必要です：

public class MainActivity extends AppCompatActivity  {

public static final String AVATAR_URL = "http://lorempixel.com/200/200/people/1/";


private DrawerLayout drawerLayout;
private View content;
private Toolbar toolbar;
private NavigationView navigationView;
private ActionBarDrawerToggle drawerToggle;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_dashboard);
    toolbar = (Toolbar) findViewById(R.id.toolbar);
    drawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
    initToolbar();
    setupDrawerLayout();

    content = findViewById(R.id.content);
    drawerToggle = setupDrawerToggle();
    final ImageView avatar = (ImageView) navigationView.getHeaderView(0).findViewById(R.id.avatar);
    Picasso.with(this).load(AVATAR_URL).transform(new CircleTransform()).into(avatar);


}


private void initToolbar() {
    final Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
    setSupportActionBar(toolbar);
    final ActionBar actionBar = getSupportActionBar();

    if (actionBar != null) {
        actionBar.setHomeAsUpIndicator(R.drawable.ic_menu_black_24dp);
        actionBar.setDisplayHomeAsUpEnabled(true);
    }
}
private ActionBarDrawerToggle setupDrawerToggle() {
    return new ActionBarDrawerToggle(this, drawerLayout, toolbar, R.string.drawer_open,  R.string.drawer_close);
}

   @Override
protected void onPostCreate(Bundle savedInstanceState) {
    super.onPostCreate(savedInstanceState);
    // Sync the toggle state after onRestoreInstanceState has occurred.
    drawerToggle.syncState();
}

@Override
public void onConfigurationChanged(Configuration newConfig) {
    super.onConfigurationChanged(newConfig);
    // Pass any configuration change to the drawer toggles
    drawerToggle.onConfigurationChanged(newConfig);
}
 private void setupDrawerLayout() {

    drawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
    navigationView = (NavigationView) findViewById(R.id.navigation_view);

    navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {

        @Override
        public boolean onNavigationItemSelected(MenuItem menuItem) {

            int id = menuItem.getItemId();

          switch (id) {
                case R.id.drawer_home:
                    Intent i = new Intent(getApplicationContext(), MainActivity.class);
                    startActivity(i);
                    finish();
                    break;
                case R.id.drawer_favorite:
                    Intent j = new Intent(getApplicationContext(), SecondActivity.class);
                    startActivity(j);
                    finish();
                    break;

            }


        return true;
    }
});

} xmlレイアウトは次のとおりです

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

<FrameLayout
    Android:id="@+id/content"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent">



    <Android.support.design.widget.AppBarLayout
        Android:id="@+id/appBarLayout"
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content"
        Android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <Android.support.v7.widget.Toolbar
            Android:id="@+id/toolbar"
            Android:layout_width="match_parent"
            Android:layout_height="?attr/actionBarSize"
            Android:background="?attr/colorPrimary"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
            app:layout_scrollFlags="scroll|enterAlways|snap" />

    </Android.support.design.widget.AppBarLayout>



</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"
    app:headerLayout="@layout/drawer_header"
    app:menu="@menu/drawer"/>

メニューにdrawer.xmlを追加

<menu xmlns:Android="http://schemas.Android.com/apk/res/Android">

<group
    Android:checkableBehavior="single">

    <item
        Android:id="@+id/drawer_home"
        Android:checked="true"
        Android:icon="@drawable/ic_home_black_24dp"
        Android:title="@string/home"/>

    <item
        Android:id="@+id/drawer_favourite"
        Android:icon="@drawable/ic_favorite_black_24dp"
        Android:title="@string/favourite"/>
    ...

    <item
        Android:id="@+id/drawer_settings"
        Android:icon="@drawable/ic_settings_black_24dp"
        Android:title="@string/settings"/>

</group>

引き出しを開閉するには、string.xmlにこの値を追加します

<string name="drawer_open">Open</string>
<string name="drawer_close">Close</string>

引き出し.xml

enter code here

<ImageView
    Android:id="@+id/avatar"
    Android:layout_width="64dp"
    Android:layout_height="64dp"
    Android:layout_margin="@dimen/spacing_large"
    Android:elevation="4dp"
    tools:src="@drawable/ic_launcher"/>

<TextView
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    Android:layout_above="@+id/email"
    Android:layout_marginLeft="@dimen/spacing_large"
    Android:layout_marginStart="@dimen/spacing_large"
    Android:text="Username"
    Android:textAppearance="@style/TextAppearance.AppCompat.Body2"/>
<TextView
    Android:id="@+id/email"
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    Android:layout_alignParentBottom="true"
    Android:layout_marginLeft="@dimen/spacing_large"
    Android:layout_marginStart="@dimen/spacing_large"
    Android:layout_marginBottom="@dimen/spacing_large"
    Android:text="[email protected]"
    Android:textAppearance="@style/TextAppearance.AppCompat.Body1"/>
1
STS

Drawerでリストアイテムを分類するためにヘッダーを追加する必要があります

listViewをカスタマイズするか、expandableListViewを使用します

オプションの一部を選択するにはラジオボタンが必要です

NavigationDrawerの現在の実装を変更せずにこれを行うことができます。listViewのカスタムアダプターを作成するだけです。親レイアウトをDrawerとして追加すると、その中に通常どおり複雑なレイアウトを作成できます。

1
Viswanath Lekshmanan