问题
I want to make Striped Navigation Drawer, How to create something just like this?
回答1:
1. Create a custom layout XML for your custom NavigationView.
nav_custom_layout.xml
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#efefef">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="160dp">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="@drawable/dummy_recipe"
android:scaleType="centerCrop"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentBottom="true"
android:layout_marginLeft="24dp"
android:layout_marginBottom="24dp"
android:textSize="28sp"
android:textColor="@android:color/white"
android:text="Menu">
</TextView>
</RelativeLayout>
<!-- Home -->
<LinearLayout
android:id="@+id/custom_menu_home"
android:layout_width="match_parent"
android:layout_height="60dp"
android:orientation="horizontal"
android:background="#efefef"
android:gravity="center_vertical"
android:paddingLeft="24dp"
android:paddingRight="24dp">
<ImageView
android:layout_width="24dp"
android:layout_height="24dp"
android:src="@drawable/ic_action_home"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="30dp"
android:maxLines="1"
android:textSize="16sp"
android:textColor="#555555"
android:text="Home"/>
</LinearLayout>
<!-- Shopping List -->
<LinearLayout
android:id="@+id/custom_menu_shopping_list"
android:layout_width="match_parent"
android:layout_height="60dp"
android:orientation="horizontal"
android:background="#ffffff"
android:gravity="center_vertical"
android:paddingLeft="24dp"
android:paddingRight="24dp">
<ImageView
android:layout_width="24dp"
android:layout_height="24dp"
android:src="@drawable/ic_action_list"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="30dp"
android:maxLines="1"
android:textSize="16sp"
android:textColor="#555555"
android:text="Shopping List"/>
</LinearLayout>
<!-- Search -->
<LinearLayout
android:id="@+id/custom_menu_search"
android:layout_width="match_parent"
android:layout_height="60dp"
android:orientation="horizontal"
android:background="#efefef"
android:gravity="center_vertical"
android:paddingLeft="24dp"
android:paddingRight="24dp">
<ImageView
android:layout_width="24dp"
android:layout_height="24dp"
android:src="@drawable/ic_action_search"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="30dp"
android:maxLines="1"
android:textSize="16sp"
android:textColor="#555555"
android:text="Search"/>
</LinearLayout>
<!-- My Yums -->
<LinearLayout
android:id="@+id/custom_menu_my_yums"
android:layout_width="match_parent"
android:layout_height="60dp"
android:orientation="horizontal"
android:background="#ffffff"
android:gravity="center_vertical"
android:paddingLeft="24dp"
android:paddingRight="24dp">
<ImageView
android:layout_width="24dp"
android:layout_height="24dp"
android:src="@drawable/ic_action_yums"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="30dp"
android:maxLines="1"
android:textSize="16sp"
android:textColor="#555555"
android:text="My Yums"/>
</LinearLayout>
<!-- Settings -->
<LinearLayout
android:id="@+id/custom_menu_settings"
android:layout_width="match_parent"
android:layout_height="60dp"
android:orientation="horizontal"
android:background="#efefef"
android:gravity="center_vertical"
android:paddingLeft="24dp"
android:paddingRight="24dp">
<ImageView
android:layout_width="24dp"
android:layout_height="24dp"
android:src="@drawable/ic_action_settings"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="30dp"
android:maxLines="1"
android:textSize="16sp"
android:textColor="#555555"
android:text="Settings"/>
</LinearLayout>
<!-- Invite Friends -->
<LinearLayout
android:id="@+id/custom_menu_invite_friends"
android:layout_width="match_parent"
android:layout_height="60dp"
android:orientation="horizontal"
android:background="#ffffff"
android:gravity="center_vertical"
android:paddingLeft="24dp"
android:paddingRight="24dp">
<ImageView
android:layout_width="24dp"
android:layout_height="24dp"
android:src="@drawable/ic_action_invite"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="30dp"
android:maxLines="1"
android:textSize="16sp"
android:textColor="#555555"
android:text="Invite Friends"/>
</LinearLayout>
</LinearLayout>
</ScrollView>
2. Add custom layout nav_custom_layout inside your NavigationView.
<android.support.design.widget.NavigationView
android:id="@+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="true">
<include
layout="@layout/nav_custom_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</android.support.design.widget.NavigationView>
3. Set onClick listener to custom menu item(LinearLayout) and change state using method toggleMenuState().
public class MainActivity extends AppCompatActivity
implements View.OnClickListener {
LinearLayout customNavMenuHome;
LinearLayout customNavMenuShoppingList;
LinearLayout customNavMenuSearch;
LinearLayout customNavMenuMyYums;
LinearLayout customNavMenuSettings;
LinearLayout customNavMenuInviteFirends;
TextView textHome, textShoppingList, textSerach, textMyYums, textSettings, textInviteFriends;
ImageView iconHome, iconShoppingList, iconSerach, iconMyYums, iconSettings, iconInviteFriends;
DrawerLayout mDrawer;
NavigationView mNavigationView;
int previousMenu;
int currentMenu;
private static final int MENU_HOME = 1;
private static final int MENU_SHOPPING_LIST = 2;
private static final int MENU_SEARCH = 3;
private static final int MENU_MY_YUMS = 4;
private static final int MENU_SETTINGS = 5;
private static final int MENU_INVITE_FRIENDS = 6;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
............
......................
mDrawer = (DrawerLayout) findViewById(R.id.drawer_layout);
............
......................
// NavigationView
mNavigationView = (NavigationView) findViewById(R.id.nav_view);
// Menus
customNavMenuHome = (LinearLayout) findViewById(R.id.custom_menu_home);
customNavMenuShoppingList = (LinearLayout) findViewById(R.id.custom_menu_shopping_list);
customNavMenuSearch = (LinearLayout) findViewById(R.id.custom_menu_search);
customNavMenuMyYums = (LinearLayout) findViewById(R.id.custom_menu_my_yums);
customNavMenuSettings = (LinearLayout) findViewById(R.id.custom_menu_settings);
customNavMenuInviteFirends = (LinearLayout) findViewById(R.id.custom_menu_invite_friends);
// Menu Titles
textHome = (TextView) customNavMenuHome.findViewById(R.id.text_home);
textShoppingList = (TextView) customNavMenuShoppingList.findViewById(R.id.text_shopping_list);
textSerach = (TextView) customNavMenuSearch.findViewById(R.id.text_search);
textMyYums = (TextView) customNavMenuMyYums.findViewById(R.id.text_my_yums);
textSettings = (TextView) customNavMenuSettings.findViewById(R.id.text_settings);
textInviteFriends = (TextView) customNavMenuInviteFirends.findViewById(R.id.text_invite_friends);
// Menu Icons
iconHome = (ImageView) customNavMenuHome.findViewById(R.id.icon_home);
iconShoppingList = (ImageView) customNavMenuShoppingList.findViewById(R.id.icon_shopping_list);
iconSerach = (ImageView) customNavMenuSearch.findViewById(R.id.icon_search);
iconMyYums = (ImageView) customNavMenuMyYums.findViewById(R.id.icon_my_yums);
iconSettings = (ImageView) customNavMenuSettings.findViewById(R.id.icon_settings);
iconInviteFriends = (ImageView) customNavMenuInviteFirends.findViewById(R.id.icon_invite_friends);
// Set click listeners
customNavMenuHome.setOnClickListener(this);
customNavMenuShoppingList.setOnClickListener(this);
customNavMenuSearch.setOnClickListener(this);
customNavMenuMyYums.setOnClickListener(this);
customNavMenuSettings.setOnClickListener(this);
customNavMenuInviteFirends.setOnClickListener(this);
// Default
previousMenu = MENU_HOME;
currentMenu = MENU_HOME;
toggleMenuState();
}
@Override
public void onClick(View view) {
// Store current menu
previousMenu = currentMenu;
switch (view.getId()) {
case R.id.custom_menu_home: {
currentMenu = MENU_HOME;
Toast.makeText(this, "Home clicked", Toast.LENGTH_SHORT).show();
break;
}
case R.id.custom_menu_shopping_list: {
currentMenu = MENU_SHOPPING_LIST;
Toast.makeText(this, "Shopping List clicked", Toast.LENGTH_SHORT).show();
break;
}
case R.id.custom_menu_search: {
currentMenu = MENU_SEARCH;
Toast.makeText(this, "Search clicked", Toast.LENGTH_SHORT).show();
break;
}
case R.id.custom_menu_my_yums: {
currentMenu = MENU_MY_YUMS;
Toast.makeText(this, "My Yums clicked", Toast.LENGTH_SHORT).show();
break;
}
case R.id.custom_menu_settings: {
currentMenu = MENU_SETTINGS;
Toast.makeText(this, "Settings clicked", Toast.LENGTH_SHORT).show();
break;
}
case R.id.custom_menu_invite_friends: {
currentMenu = MENU_INVITE_FRIENDS;
Toast.makeText(this, "Invite Friends clicked", Toast.LENGTH_SHORT).show();
break;
}
}
// Change selected menu state
toggleMenuState();
// Close drawer
mDrawer.closeDrawer(GravityCompat.START);
}
// Required to change selection state of custom menu
public void toggleMenuState() {
// Reset
switch (previousMenu) {
case MENU_HOME: {
customNavMenuHome.setBackgroundColor(Color.parseColor("#efefef"));
textHome.setTextColor(Color.parseColor("#555555"));
break;
}
case MENU_SHOPPING_LIST: {
customNavMenuShoppingList.setBackgroundColor(Color.parseColor("#ffffff"));
textShoppingList.setTextColor(Color.parseColor("#555555"));
break;
}
case MENU_SEARCH: {
customNavMenuSearch.setBackgroundColor(Color.parseColor("#efefef"));
textSerach.setTextColor(Color.parseColor("#555555"));
break;
}
case MENU_MY_YUMS: {
customNavMenuMyYums.setBackgroundColor(Color.parseColor("#ffffff"));
textMyYums.setTextColor(Color.parseColor("#555555"));
break;
}
case MENU_SETTINGS: {
customNavMenuSettings.setBackgroundColor(Color.parseColor("#efefef"));
textSettings.setTextColor(Color.parseColor("#555555"));
break;
}
case MENU_INVITE_FRIENDS: {
customNavMenuInviteFirends.setBackgroundColor(Color.parseColor("#ffffff"));
textInviteFriends.setTextColor(Color.parseColor("#555555"));
break;
}
}
// Set icon default colors
iconHome.setColorFilter(Color.DKGRAY);
iconShoppingList.setColorFilter(Color.DKGRAY);
iconSerach.setColorFilter(Color.DKGRAY);
iconMyYums.setColorFilter(Color.DKGRAY);
iconSettings.setColorFilter(Color.DKGRAY);
iconInviteFriends.setColorFilter(Color.DKGRAY);
// Selected menu :: GRAY color
switch (currentMenu) {
case MENU_HOME: {
customNavMenuHome.setBackgroundColor(Color.GRAY);
iconHome.setColorFilter(Color.WHITE);
textHome.setTextColor(Color.WHITE);
break;
}
case MENU_SHOPPING_LIST: {
customNavMenuShoppingList.setBackgroundColor(Color.GRAY);
iconShoppingList.setColorFilter(Color.WHITE);
textShoppingList.setTextColor(Color.WHITE);
break;
}
case MENU_SEARCH: {
customNavMenuSearch.setBackgroundColor(Color.GRAY);
iconSerach.setColorFilter(Color.WHITE);
textSerach.setTextColor(Color.WHITE);
break;
}
case MENU_MY_YUMS: {
customNavMenuMyYums.setBackgroundColor(Color.GRAY);
iconMyYums.setColorFilter(Color.WHITE);
textMyYums.setTextColor(Color.WHITE);
break;
}
case MENU_SETTINGS: {
customNavMenuSettings.setBackgroundColor(Color.GRAY);
iconSettings.setColorFilter(Color.WHITE);
textSettings.setTextColor(Color.WHITE);
break;
}
case MENU_INVITE_FRIENDS: {
customNavMenuInviteFirends.setBackgroundColor(Color.GRAY);
iconInviteFriends.setColorFilter(Color.WHITE);
textInviteFriends.setTextColor(Color.WHITE);
break;
}
}
}
}
OUTPUT:
Hope this will help~
来源：https://stackoverflow.com/questions/44136856/how-to-create-android-custom-striped-navigation-drawer