Androidカスタムストライプナビゲーションダッシュを作成するには？

Question

私はストライプ・ナビゲーション・ドローワを作成したいと思います。このようなものを作成する方法は？

Answer 1

1.カスタムNavigationViewのカスタムlayout XMLを作成します。

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.あなたNavigationView内のカスタムレイアウトnav_custom_layoutを追加します。カスタムメニュー項目（LinearLayout）にonClickリスナーを設定し、方法toggleMenuState()を使用して状態を変更

<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.。

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：

これは、[スタックオーバーフロー]（http://stackoverflow.com/）へ〜