如何创建Android自定义条纹导航抽屉?

时间:2017-05-23 13:55:36

标签: android android-layout navigation-drawer

我想制作条纹导航抽屉,如何创建这样的东西?

Striped Navigation Drawer

1 个答案:

答案 0 :(得分:1)

1。为自定义layout创建自定义NavigationView 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。nav_custom_layout内添加自定义布局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。onClick侦听器设置为自定义菜单项(LinearLayout)并使用方法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;
            }
        }
    }
}

<强>输出:

enter image description here

enter image description here

希望这会有所帮助〜