如何在android中创建自定义导航抽屉

如何在android中创建自定义导航抽屉,android,android-listview,navigation-drawer,Android,Android Listview,Navigation Drawer,嗨,我正在尝试创建一个类似gmail应用程序导航抽屉的导航抽屉。我关注开发者网站,但它只指定基本的实现。但是我需要根据我的规格定制导航 我需要添加一个标题来对抽屉中的列表项进行分类 我需要一个单选按钮来选择我的一些选项 我该怎么做 我需要添加一个标题来对抽屉中的列表项进行分类 自定义列表视图或使用可扩展列表视图 我需要一个单选按钮来选择我的一些选项 您无需修改当前的NavigationDrawer实现,只需为列表视图创建自定义适配器即可。您可以将父布局添加为Drawer,然后您可以像平常一样在其

嗨,我正在尝试创建一个类似gmail应用程序导航抽屉的导航抽屉。我关注开发者网站,但它只指定基本的实现。但是我需要根据我的规格定制导航

  • 我需要添加一个标题来对抽屉中的列表项进行分类
  • 我需要一个单选按钮来选择我的一些选项
  • 我该怎么做

    我需要添加一个标题来对抽屉中的列表项进行分类

    自定义
    列表视图
    或使用
    可扩展列表视图

    我需要一个单选按钮来选择我的一些选项


    您无需修改当前的
    NavigationDrawer
    实现,只需为
    列表视图创建自定义适配器即可。您可以将父布局添加为
    Drawer
    ,然后您可以像平常一样在其中执行任何复杂布局

    一旦了解了android导航抽屉的实现方式,您就可以轻松定制它。这是一个不错的地方,你可以设置它

    这将是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>
    
    
    
    通过添加标题,您可以根据自己的喜好自定义此listview。和单选按钮。

    本教程包含一个基本项目和一个自定义项目。后者显示了如何设置导航抽屉,如屏幕截图所示:

    可供下载


    这个项目也是

    在GitHub上提供


    目的是为您的应用程序提供尽可能简单的导航抽屉实现。它提供了大量现成的定制,还包括一个易于使用的标题,可以用作AccountSwitcher


    请注意,Android Studio同时有一个模板项目,用于创建导航抽屉活动,如屏幕截图所示


    这可以跟踪对模板所做的更改。

    对我来说,更简单的解决方案是:

    注意事项:

    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;
      }
    }
    
    <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>
    
    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;
    }
    }
    
    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));
    
    • 此解决方案需要自动生成的导航抽屉活动 由安卓工作室提供
    • DrawerItem
      CustomDrawerAdapter
      和布局
      custom\u drawer\u 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;
      }
    }
    
    <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>
    
    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;
    }
    }
    
    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));
    
    2。为抽屉项目创建自定义布局(custom\u drawer\u item.xml):

    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;
      }
    }
    
    <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>
    
    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;
    }
    }
    
    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\u section N
    R.drawable.ic\u action\u N

    使用活动的Android导航抽屉 我只是举了个例子:

    您只需要进行一些定制:

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

    
    

    我使用了下面的布局,能够在导航视图中实现自定义布局

    <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> 
    
    
    
    请不要将代码标签用于非代码文本。在这种情况下,您应该使用大于号的blockquotes
    ,就像这样
    >这是一个引号。
    看看我有相似和奇怪的问题::我设法让抽屉工作,但有几个错误。不知道怎么修?好的!我知道我可以在android studio中简单地完成,但是如果我想更改导航抽屉的字体呢?@AmirH请打开一个关于Stackoverflow的新问题。@JJD,请更新到源代码的链接。它好像坏了@用户5038993对此我无能为力。我建议你联系文章的作者或留下评论。