如何在Android Studios中自定义导航抽屉?

时间:2015-08-19 16:12:57

标签: android android-studio menu navigation-drawer

如何将导航栏自定义如下:

enter image description here

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

3 个答案:

答案 0 :(得分:0)

这是布局(活动布局):

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

现在listview应该有一个自定义适配器:

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

现在你的课必须扩展AppCompatActivity:

在您的活动类中:(这应该在您初始化项目并向其添加一些变量后完成)

 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);
        }

班级项目如下:

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

如果您需要更多帮助,请与我们联系。我已经准备好协助了。

答案 1 :(得分:0)

您可以使用具有非常好的API的MaterialDrawer库,并为抽屉设置所需的自定义视图,如下所示:

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

答案 2 :(得分:0)

首先将此代码添加到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>

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