如何在 Android Studio 中自定义导航抽屉？

Question

如何将导航抽屉自定义为如下所示：

我找不到任何自定义导航抽屉的教程。有人可以帮忙吗？

Answer 1

这是布局（activity布局）：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:focusable="true"
android:focusableInTouchMode="true"
android:background="#e7e7e7"
android:id="@+id/mainLayout"
tools:context=".MainActivity">


<android.support.v4.widget.DrawerLayout
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout
        android:id="@+id/main"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">


        <FrameLayout
            android:id="@+id/frame"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
    </LinearLayout>

    <ListView
        android:id="@+id/navList"
        android:layout_width="250dp"
        android:layout_height="match_parent"
        android:layout_gravity="left|start"
        android:background="#315d82"
        android:clickable="true"
        android:divider="@null"
        android:dividerHeight="20sp" />
</android.support.v4.widget.DrawerLayout>
</RelativeLayout>

现在列表视图应该有一个自定义适配器：

public class DrawerAdapter extends BaseAdapter {
public List<MenuItem> items;
Context c;
TextView title;
ImageView icon;

public DrawerAdapter(Context c, List<MenuItem> items) {
    this.c = c;
    this.items = items;
}

@Override
public int getCount() {
    return items.size();
}

@Override
public Object getItem(int position) {
    return items.get(position);
}

@Override
public long getItemId(int position) {
    return position;
}

@Override
public View getView(final int position, View convertView, ViewGroup parent) {
    if (convertView == null) {
        LayoutInflater mInflater = (LayoutInflater)
                c.getSystemService(Activity.LAYOUT_INFLATER_SERVICE);
        convertView = mInflater.inflate(R.layout.menu_item, null);
    }
    title = (TextView) convertView.findViewById(R.id.title);
    icon = (ImageView) convertView.findViewById(R.id.icon);
    title.setText(items.get(position).title);
    title.setTypeface(tf);
    icon.setImageResource(items.get(position).image);
    return convertView;
}
}

现在这是自定义适配器的 xml：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/background"
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:orientation="horizontal">

<ImageView
    android:id="@+id/icon"
    android:layout_width="35dp"
    android:layout_height="35dp"
    android:layout_gravity="center"
    android:layout_marginLeft="10dp"
    android:src="@drawable/pin_icon" />

<TextView
    android:id="@+id/title"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:layout_marginLeft="20dp"
    android:gravity="center"
    android:text="Hello"
    android:textColor="#ffffff"
    android:textSize="20sp" />

现在您 class 必须扩展 AppCompatActivity ：

在您的 activity class 中：（这应该在您初始化项目并向其添加一些变量后完成）

 list.setAdapter(new DrawerAdapter(getApplicationContext(), items));

现在 items 是一个列表变量：

List<String< titles;
List<Integer> images;
List<Items> items;

你这样初始化它：

items= new ArrayList<>();
images= new ArrayList<>();
titles= new ArrayList<>();
titles.add("home");
images.add(R.drawable.icon);

然后向其中添加项目：

for (int i = 0; i < titles.size(); i++) {
            MenuItem item = new MenuItem();
            item.image = images.get(i);
            item.title = titles.get(i);
            items.add(item);
        }

Class 项目如下：

public class MenuItem {
public String title;
public int image;
}

如果您需要更多帮助，请告诉我。我非常乐意提供帮助。

Answer 2

您可以使用 MaterialDrawer 库，它有一个非常好的 API 并像这样为抽屉设置您想要的自定义视图：

        drawer = new DrawerBuilder()
            .withActivity(this)
            .withCustomView(myView)
            .build();

Answer 3

首先将此代码添加到您的 res/values/strings.xml

<string-array name="titles">
        <item>Home</item>
        <item>Featured</item>
        <item>Products Search</item>
        <item>Barcode Scanner</item>
        <item>Sales</item>
        <item>Weekly Specials</item>
        <item>My Shopping List</item>
        <item>Recipes</item>
        <item>Shopping Cart</item>
        <item>Order History</item>
    </string-array>

    <array name="icons">
        <item>@drawable/image 1</item>
        <item>@drawable/image 2</item>
        <item>@drawable/image 3</item>
        <item>@drawable/image 4</item>
        <item>@drawable/image 5</item>
        <item>@drawable/image 6</item>
        <item>@drawable/image 7</item>
        <item>@drawable/image 8</item>
        <item>@drawable/image 9</item>
        <item>@drawable/image 10</item>
    </array>

然后像这样设计你的NavigationDrawer.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">
    <!-- The main content view -->
    <FrameLayout
        android:id="@+id/frame_container"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
<ListView
            android:id="@+id/slider_list"
            android:layout_width="300dp"
            android:layout_height="match_parent"
            android:layout_gravity="start"
            android:layout_below="@+id/textPlacesNearBy"
            android:choiceMode="singleChoice"
            android:divider="@android:color/transparent"
            android:dividerHeight="0dp"
            android:layout_weight="1" />
</android.support.v4.widget.DrawerLayout>

然后像这样设计你的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="48dp"
    android:padding="5dp" >

        <ImageView
            android:id="@+id/icon"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_centerVertical="true"
            android:layout_marginLeft="5dp"
            android:layout_marginRight="12dp"
            />

        <TextView
            android:id="@+id/title"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_marginTop="10dp"
            android:layout_toRightOf="@id/icon"
            android:gravity="center_vertical"
            android:textColor="#ffffff"
            android:textSize="20sp" />

</RelativeLayout>

这只是设计。如果您需要任何编码帮助，请告诉我。 :)

如何在 Android Studio 中自定义导航抽屉？

How do I customize the navigation drawer in Android Studios?

android

menu

android-studio

navigation-drawer