带标题和子标题的导航抽屉菜单项

I have a navigation drawer prototype. we have heading and subheading in the same. am using menu group to include the titles.

我有一个导航抽屉原型。我们有相同的标题和副标题。我正在使用菜单组来包含标题。

1) just want to add sub title or help text for the navigation drawer. 2) want to customise the icon size to fit the whole heading and sub heading so it looks like the image below.

1)只想为导航抽屉添加子标题或帮助文本。 2)想要自定义图标大小以适合整个标题和子标题,使其看起来像下面的图像。

<item
        android:id="@+id/nav_home"
        android:icon="@drawable/ic_menu_home"
        android:subtitle="View your biorhythm" <!-- This should be sub title. -->
        android:title="Home"
        />

1 个解决方案

#1

Inside in DrawerLayout create ListView using below code

在DrawerLayout里面使用下面的代码创建ListView

 <!-- List of Actions (pages) -->
        <ListView
            android:id="@+id/navList"
            android:layout_width="280dp"
            android:layout_height="match_parent"
            android:layout_below="@+id/profileBox"
            android:choiceMode="singleChoice"
            android:background="#ffffffff" />

Now Create one Class that contain property for Title, SubTitle and Icon like below.

现在创建一个包含Title,SubTitle和Icon属性的类,如下所示。

class NavItem {
    String mTitle;
    String mSubtitle;
    int mIcon;

    public NavItem(String title, String subtitle, int icon) {
        mTitle = title;
        mSubtitle = subtitle;
        mIcon = icon;
    }
}

Now Create Adapter for that

现在为此创建适配器

class DrawerListAdapter extends BaseAdapter {

    Context mContext;
    ArrayList<NavItem> mNavItems;

    public DrawerListAdapter(Context context, ArrayList<NavItem> navItems) {
        mContext = context;
        mNavItems = navItems;
    }

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

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

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

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        View view;

        if (convertView == null) {
            LayoutInflater inflater = (LayoutInflater) mContext.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
            view = inflater.inflate(R.layout.drawer_item, null);
        }
        else {
            view = convertView;
        }

        TextView titleView = (TextView) view.findViewById(R.id.title);
        TextView subtitleView = (TextView) view.findViewById(R.id.subTitle);
        ImageView iconView = (ImageView) view.findViewById(R.id.icon);

        titleView.setText( mNavItems.get(position).mTitle );
        subtitleView.setText( mNavItems.get(position).mSubtitle );
        iconView.setImageResource(mNavItems.get(position).mIcon);

        return view;
    }
}

Create Listview item xml to get your format

创建Listview项目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="match_parent"
    android:paddingTop="10dp"
    android:paddingBottom="10dp">

    <ImageView
        android:id="@+id/icon"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:src="@drawable/ic_action_home"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_marginRight="20dp"
        android:layout_marginLeft="10dp"
        android:layout_marginTop="5dp"
         />

    <TextView
        android:id="@+id/title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="18sp"
        android:gravity="center_vertical"
        android:textColor="#000"
        android:text="Line 1"
        android:textStyle="bold"
        android:layout_alignParentTop="true"
        android:layout_toRightOf="@+id/icon"
        android:layout_toEndOf="@+id/icon" />

    <TextView android:id="@+id/subTitle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Line 2"
        android:layout_toRightOf="@+id/icon"
        android:layout_below="@+id/title"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true" />

</RelativeLayout>

and Finally Add into MainActivity.java file like below way.

最后像下面这样添加到MainActivity.java文件中。

private static String TAG = MainActivity.class.getSimpleName();

ListView mDrawerList;
RelativeLayout mDrawerPane;
private ActionBarDrawerToggle mDrawerToggle;
private DrawerLayout mDrawerLayout;

ArrayList<NavItem> mNavItems = new ArrayList<NavItem>();

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    mNavItems.add(new NavItem("Home", "Meetup destination", R.drawable.ic_action_home));
    mNavItems.add(new NavItem("Preferences", "Change your preferences", R.drawable.ic_action_settings));
    mNavItems.add(new NavItem("About", "Get to know about us", R.drawable.ic_action_about));

    // DrawerLayout
    mDrawerLayout = (DrawerLayout) findViewById(R.id.drawerLayout);

    // Populate the Navigtion Drawer with options
    mDrawerPane = (RelativeLayout) findViewById(R.id.drawerPane);
    mDrawerList = (ListView) findViewById(R.id.navList);
    DrawerListAdapter adapter = new DrawerListAdapter(this, mNavItems);
    mDrawerList.setAdapter(adapter);

    // Drawer Item click listeners
    mDrawerList.setOnItemClickListener(new AdapterView.OnItemClickListener() {
        @Override
        public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
            selectItemFromDrawer(position);
        }
    });

You will get Below Output :

您将获得以下输出:

#1