带有标题和副标题的导航抽屉菜单项 [英] Navigation drawer menu item with titles and sub titles
问题描述
我有一个导航抽屉原型.我们在同一标题和小标题.我正在使用菜单组来包含标题.
I have a navigation drawer prototype. we have heading and subheading in the same. am using menu group to include the titles.
1)只想为导航抽屉添加子标题或帮助文本. 2)要自定义图标大小以适合整个标题和子标题,因此它看起来像下面的图片.
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.
<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"
/>
推荐答案
在DrawerLayout
中使用以下代码创建ListView
Inside in DrawerLayout
create ListView
using below code
<!-- 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" />
现在创建一个包含Title
,SubTitle
和Icon
属性的Class
,如下所示.
Now Create one Class
that contain property for Title
, SubTitle
and Icon
like below.
class NavItem {
String mTitle;
String mSubtitle;
int mIcon;
public NavItem(String title, String subtitle, int icon) {
mTitle = title;
mSubtitle = subtitle;
mIcon = icon;
}
}
现在为此创建Adapter
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;
}
}
创建Listview
项目xml以获取格式
Create Listview
item xml to get your format
<?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>
,最后按以下方式添加到MainActivity.java
文件中.
and Finally Add into MainActivity.java
file like below way.
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);
}
});
您将获得以下输出:
这篇关于带有标题和副标题的导航抽屉菜单项的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!