Android 设计支持库二级抽屉菜单
Android Design Support Library Secondary Drawer Menu
我已经切换到官方 Google 设计支持库。现在，我想使用带有这样分隔线的二级菜单：
但是由于 Android 正在使用 Menu Inflater，我现在不知道该怎么做。我可以添加第二组，但这样项目的大小相同并且没有分隔符。
drawer.xml:
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<group android:checkableBehavior="single">
<item
android:id="@+id/overview"
android:checked="true"
android:icon="@drawable/ic_action_dashboard"
android:title="@string/drawer_overview" />
<item
android:id="@+id/social_evening"
android:checked="false"
android:icon="@drawable/ic_action_brightness_3"
android:title="@string/drawer_social_evening" />
<item
android:id="@+id/scouting_games"
android:checked="false"
android:icon="@drawable/ic_action_landscape"
android:title="@string/drawer_scouting_games" />
<item
android:id="@+id/olympics"
android:checked="false"
android:icon="@drawable/ic_action_stars"
android:title="@string/drawer_olympics" />
<item
android:id="@+id/quizzes"
android:checked="false"
android:icon="@drawable/ic_action_school"
android:title="@string/drawer_quizzes" />
</group>
</menu>
MainActivity.java:
package net.sutomaji.freizeitspiele;
import android.os.Bundle;
import android.support.design.widget.NavigationView;
import android.support.v4.app.FragmentTransaction;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.ActionBarDrawerToggle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.Toast;
/**
* Created by Tom Schneider on 18.06.15
*/
public class MainActivity extends AppCompatActivity {
//Defining Variables
private Toolbar toolbar;
private NavigationView navigationView;
private DrawerLayout drawerLayout;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// Initializing Toolbar and setting it as the actionbar
toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
//Initializing NavigationView
navigationView = (NavigationView) findViewById(R.id.navigation_view);
//Setting Navigation View Item Selected Listener to handle the item click of the navigation menu
navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
// This method will trigger on item Click of navigation menu
@Override
public boolean onNavigationItemSelected(MenuItem menuItem) {
//Checking if the item is in checked state or not, if not make it in checked state
if(menuItem.isChecked()) menuItem.setChecked(false);
else menuItem.setChecked(true);Q
//Closing drawer on item click
drawerLayout.closeDrawers();
//Check to see which item was being clicked and perform appropriate action
switch (menuItem.getItemId()){
//Replacing the main content with ContentFragment Which is our Inbox View;
case R.id.overview:
Toast.makeText(getApplicationContext(), "Overview Selected", Toast.LENGTH_SHORT).show();
ContentFragment fragment = new ContentFragment();
FragmentTransaction fragmentTransaction = getSupportFragmentManager().beginTransaction();
fragmentTransaction.replace(R.id.frame,fragment);
fragmentTransaction.commit();
return true;
// For rest of the options we just show a toast on click
case R.id.social_evening:
Toast.makeText(getApplicationContext(),"SE Selected",Toast.LENGTH_SHORT).show();
return true;
case R.id.scouting_games:
Toast.makeText(getApplicationContext(),"SG Selected",Toast.LENGTH_SHORT).show();
return true;
case R.id.olympics:
Toast.makeText(getApplicationContext(),"OL Selected",Toast.LENGTH_SHORT).show();
return true;
case R.id.quizzes:
Toast.makeText(getApplicationContext(),"QZ Selected",Toast.LENGTH_SHORT).show();
return true;
default:
Toast.makeText(getApplicationContext(),"Somethings Wrong",Toast.LENGTH_SHORT).show();
return true;
}
}
});
// Initializing Drawer Layout and ActionBarToggle
drawerLayout = (DrawerLayout) findViewById(R.id.drawer);
ActionBarDrawerToggle actionBarDrawerToggle = new ActionBarDrawerToggle(this,drawerLayout,toolbar,R.string.openDrawer, R.string.closeDrawer){
@Override
public void onDrawerClosed(View drawerView) {
// Code here will be triggered once the drawer closes as we dont want anything to happen so we leave this blank
super.onDrawerClosed(drawerView);
}
@Override
public void onDrawerOpened(View drawerView) {
// Code here will be triggered once the drawer open as we dont want anything to happen so we leave this blank
super.onDrawerOpened(drawerView);
}
};
//Setting the actionbarToggle to drawer layout
drawerLayout.setDrawerListener(actionBarDrawerToggle);
//calling sync state is necessay or else your hamburger icon wont show up
actionBarDrawerToggle.syncState();
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.menu_main, menu);
return true;
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
// Handle action bar item clicks here. The action bar will
// automatically handle clicks on the Home/Up button, so long
// as you specify a parent activity in AndroidManifest.xml.
int id = item.getItemId();
//noinspection SimplifiableIfStatement
if (id == R.id.action_settings) {
return true;
}
return super.onOptionsItemSelected(item);
}
}
那么，如何创建这样的菜单，或者如何将分隔线（类别为 headers）添加到我的导航抽屉中？
您可以为抽屉使用任何 ViewGroup，例如 LinearLayout。它不限于 ListView 和 FrameLayout。因此，您可以像 Activity 的任何其他布局一样设置抽屉视图的样式。您唯一应该记住的是 NavigationDrawer 只能有两个孩子。第一个是 Activity 的布局，第二个是抽屉。随心所欲地设计它们！
<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
android:id="@+id/content_frame"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<!-- YOUR DRAWER -->
<LinearLayout
android:id="@+id/drawer_view"
android:layout_width="240dp"
android:layout_height="match_parent"
android:orientation="vertical"
android:layout_gravity="start">
<!-- Use any Views you like -->
<ListView
android:id="@+id/left_drawer"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:choiceMode="singleChoice"
android:divider="@android:color/transparent"
android:dividerHeight="0dp"
android:background="#ffffff"/>
</LinearLayout>
</android.support.v4.widget.DrawerLayout>
用于分隔线
android:divider="#FFFFFF"
android:dividerHeight="1dp"
您可以使用标准 NavigationView 定义如下菜单：
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<group android:id="@+id/group1" android:checkableBehavior="single" id>
//items of group1
</group>
<group android:id="@+id/group2" android:checkableBehavior="single" id>
//items of group2
</group>
给每个组一个唯一的 ID 很重要。
教程：Navigation View Design Support Library
菜单项：
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<group android:checkableBehavior="single">
<item
android:id="@+id/navigation_item_attachment"
android:checked="true"
android:icon="@drawable/ic_attachment"
android:title="@string/nav_item_attachment" />
<item
android:id="@+id/navigation_item_images"
android:icon="@drawable/ic_image"
android:title="@string/nav_item_images" />
<item
android:id="@+id/navigation_item_location"
android:icon="@drawable/ic_place"
android:title="@string/nav_item_location" />
</group>
<item android:title="@string/nav_sub_menu">
<menu>
<item
android:icon="@drawable/ic_emoticon"
android:title="@string/nav_sub_menu_item01" />
<item
android:icon="@drawable/ic_emoticon"
android:title="@string/nav_sub_menu_item02" />
</menu>
</item>
</menu>
这就是您要查找的内容：
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<group android:checkableBehavior="single">
<item
android:id="@+id/Home"
android:checked="false"
android:icon="@drawable/ic_home"
android:title="@string/homestr" />
<item
android:id="@+id/myacc"
android:checked="false"
android:icon="@drawable/ic_account"
android:title="@string/myaccstr" />
<item
android:id="@+id/popular"
android:checked="false"
android:icon="@drawable/ic_star"
android:title="@string/Popularstr" />
<item
android:id="@+id/newsit"
android:checked="false"
android:icon="@drawable/ic_news"
android:title="@string/newsstr" />
<item android:title="@string/gn">
<menu>
<item
android:id="@+id/settings"
android:checked="false"
android:icon="@drawable/ic_setting"
android:title="@string/action_settings" />
<item
android:id="@+id/help"
android:checked="false"
android:icon="@drawable/ic_help"
android:title="@string/helpstr" />
</menu>
</item>
</group>
</menu>
我已经切换到官方 Google 设计支持库。现在，我想使用带有这样分隔线的二级菜单：
但是由于 Android 正在使用 Menu Inflater，我现在不知道该怎么做。我可以添加第二组，但这样项目的大小相同并且没有分隔符。
drawer.xml:
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<group android:checkableBehavior="single">
<item
android:id="@+id/overview"
android:checked="true"
android:icon="@drawable/ic_action_dashboard"
android:title="@string/drawer_overview" />
<item
android:id="@+id/social_evening"
android:checked="false"
android:icon="@drawable/ic_action_brightness_3"
android:title="@string/drawer_social_evening" />
<item
android:id="@+id/scouting_games"
android:checked="false"
android:icon="@drawable/ic_action_landscape"
android:title="@string/drawer_scouting_games" />
<item
android:id="@+id/olympics"
android:checked="false"
android:icon="@drawable/ic_action_stars"
android:title="@string/drawer_olympics" />
<item
android:id="@+id/quizzes"
android:checked="false"
android:icon="@drawable/ic_action_school"
android:title="@string/drawer_quizzes" />
</group>
</menu>
MainActivity.java:
package net.sutomaji.freizeitspiele;
import android.os.Bundle;
import android.support.design.widget.NavigationView;
import android.support.v4.app.FragmentTransaction;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.ActionBarDrawerToggle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.Toast;
/**
* Created by Tom Schneider on 18.06.15
*/
public class MainActivity extends AppCompatActivity {
//Defining Variables
private Toolbar toolbar;
private NavigationView navigationView;
private DrawerLayout drawerLayout;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// Initializing Toolbar and setting it as the actionbar
toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
//Initializing NavigationView
navigationView = (NavigationView) findViewById(R.id.navigation_view);
//Setting Navigation View Item Selected Listener to handle the item click of the navigation menu
navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
// This method will trigger on item Click of navigation menu
@Override
public boolean onNavigationItemSelected(MenuItem menuItem) {
//Checking if the item is in checked state or not, if not make it in checked state
if(menuItem.isChecked()) menuItem.setChecked(false);
else menuItem.setChecked(true);Q
//Closing drawer on item click
drawerLayout.closeDrawers();
//Check to see which item was being clicked and perform appropriate action
switch (menuItem.getItemId()){
//Replacing the main content with ContentFragment Which is our Inbox View;
case R.id.overview:
Toast.makeText(getApplicationContext(), "Overview Selected", Toast.LENGTH_SHORT).show();
ContentFragment fragment = new ContentFragment();
FragmentTransaction fragmentTransaction = getSupportFragmentManager().beginTransaction();
fragmentTransaction.replace(R.id.frame,fragment);
fragmentTransaction.commit();
return true;
// For rest of the options we just show a toast on click
case R.id.social_evening:
Toast.makeText(getApplicationContext(),"SE Selected",Toast.LENGTH_SHORT).show();
return true;
case R.id.scouting_games:
Toast.makeText(getApplicationContext(),"SG Selected",Toast.LENGTH_SHORT).show();
return true;
case R.id.olympics:
Toast.makeText(getApplicationContext(),"OL Selected",Toast.LENGTH_SHORT).show();
return true;
case R.id.quizzes:
Toast.makeText(getApplicationContext(),"QZ Selected",Toast.LENGTH_SHORT).show();
return true;
default:
Toast.makeText(getApplicationContext(),"Somethings Wrong",Toast.LENGTH_SHORT).show();
return true;
}
}
});
// Initializing Drawer Layout and ActionBarToggle
drawerLayout = (DrawerLayout) findViewById(R.id.drawer);
ActionBarDrawerToggle actionBarDrawerToggle = new ActionBarDrawerToggle(this,drawerLayout,toolbar,R.string.openDrawer, R.string.closeDrawer){
@Override
public void onDrawerClosed(View drawerView) {
// Code here will be triggered once the drawer closes as we dont want anything to happen so we leave this blank
super.onDrawerClosed(drawerView);
}
@Override
public void onDrawerOpened(View drawerView) {
// Code here will be triggered once the drawer open as we dont want anything to happen so we leave this blank
super.onDrawerOpened(drawerView);
}
};
//Setting the actionbarToggle to drawer layout
drawerLayout.setDrawerListener(actionBarDrawerToggle);
//calling sync state is necessay or else your hamburger icon wont show up
actionBarDrawerToggle.syncState();
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.menu_main, menu);
return true;
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
// Handle action bar item clicks here. The action bar will
// automatically handle clicks on the Home/Up button, so long
// as you specify a parent activity in AndroidManifest.xml.
int id = item.getItemId();
//noinspection SimplifiableIfStatement
if (id == R.id.action_settings) {
return true;
}
return super.onOptionsItemSelected(item);
}
}
那么，如何创建这样的菜单，或者如何将分隔线（类别为 headers）添加到我的导航抽屉中？
您可以为抽屉使用任何 ViewGroup，例如 LinearLayout。它不限于 ListView 和 FrameLayout。因此，您可以像 Activity 的任何其他布局一样设置抽屉视图的样式。您唯一应该记住的是 NavigationDrawer 只能有两个孩子。第一个是 Activity 的布局，第二个是抽屉。随心所欲地设计它们！
<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
android:id="@+id/content_frame"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<!-- YOUR DRAWER -->
<LinearLayout
android:id="@+id/drawer_view"
android:layout_width="240dp"
android:layout_height="match_parent"
android:orientation="vertical"
android:layout_gravity="start">
<!-- Use any Views you like -->
<ListView
android:id="@+id/left_drawer"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:choiceMode="singleChoice"
android:divider="@android:color/transparent"
android:dividerHeight="0dp"
android:background="#ffffff"/>
</LinearLayout>
</android.support.v4.widget.DrawerLayout>
用于分隔线
android:divider="#FFFFFF"
android:dividerHeight="1dp"
您可以使用标准 NavigationView 定义如下菜单：
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<group android:id="@+id/group1" android:checkableBehavior="single" id>
//items of group1
</group>
<group android:id="@+id/group2" android:checkableBehavior="single" id>
//items of group2
</group>
给每个组一个唯一的 ID 很重要。
教程：Navigation View Design Support Library
菜单项：
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<group android:checkableBehavior="single">
<item
android:id="@+id/navigation_item_attachment"
android:checked="true"
android:icon="@drawable/ic_attachment"
android:title="@string/nav_item_attachment" />
<item
android:id="@+id/navigation_item_images"
android:icon="@drawable/ic_image"
android:title="@string/nav_item_images" />
<item
android:id="@+id/navigation_item_location"
android:icon="@drawable/ic_place"
android:title="@string/nav_item_location" />
</group>
<item android:title="@string/nav_sub_menu">
<menu>
<item
android:icon="@drawable/ic_emoticon"
android:title="@string/nav_sub_menu_item01" />
<item
android:icon="@drawable/ic_emoticon"
android:title="@string/nav_sub_menu_item02" />
</menu>
</item>
</menu>
这就是您要查找的内容：
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<group android:checkableBehavior="single">
<item
android:id="@+id/Home"
android:checked="false"
android:icon="@drawable/ic_home"
android:title="@string/homestr" />
<item
android:id="@+id/myacc"
android:checked="false"
android:icon="@drawable/ic_account"
android:title="@string/myaccstr" />
<item
android:id="@+id/popular"
android:checked="false"
android:icon="@drawable/ic_star"
android:title="@string/Popularstr" />
<item
android:id="@+id/newsit"
android:checked="false"
android:icon="@drawable/ic_news"
android:title="@string/newsstr" />
<item android:title="@string/gn">
<menu>
<item
android:id="@+id/settings"
android:checked="false"
android:icon="@drawable/ic_setting"
android:title="@string/action_settings" />
<item
android:id="@+id/help"
android:checked="false"
android:icon="@drawable/ic_help"
android:title="@string/helpstr" />
</menu>
</item>
</group>
</menu>