DrawerLayout+NavigationView仿摩拜单车

2017-12-27 本文已影响365人奔跑吧李博

曾经的侧滑菜单通常是使用SlidingMenu，但是用起来设置属性太多，使用繁琐。后来官方出来DrawerLayout，使侧滑控件得以转正，功能效果更佳。这里是我用DrawerLayout+NavigationView仿摩拜单车做的主界面。

视觉效果：

giphy.gif

github代码直通车

制作步骤：

使用到了NavigationView，来自于design包，需添加依赖：

    compile 'com.android.support:design:26.0.0-alpha1'

添加主布局，在activity_main.xml中：
DrawerLayout有两个子view，分别主界面布局和侧滑界面布局。主界面顶部为Toolbar，侧滑界面为NavigationView，需要给NavigationView设置android:layout_gravity="start"属性，表示从左侧滑出，"end"表示从右侧滑出。
app:headerLayout="@layout/navigation_header"表示添加侧边头布局，app:menu="@menu/navigation_menu"表示添加列表菜单。activity_main代码如下：

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout android:id="@+id/drawerlayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="48dp"
            xmlns:android="http://schemas.android.com/apk/res/android">

            <ImageView
                android:layout_width="80dp"
                android:layout_height="16dp"
                android:background="@mipmap/ic_mobike"/>
        </android.support.v7.widget.Toolbar>

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@mipmap/location"/>
    </LinearLayout>

    <android.support.design.widget.NavigationView
        android:id="@+id/navigationview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        app:headerLayout="@layout/navigation_header"
        app:menu="@menu/navigation_menu"/>

</android.support.v4.widget.DrawerLayout>

navigation_header.xml头布局：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="20dp">

        <ImageView
            android:id="@+id/iv_avator"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginRight="25dp"
            android:background="@mipmap/internet_star"/>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="16sp"
            android:textColor="#000"
            android:textStyle="bold"
            android:layout_marginTop="8dp"
            android:layout_toRightOf="@id/iv_avator"
            android:text="182****8234"/>

        <TextView
            android:id="@+id/tv_author"
            android:layout_width="wrap_content"
            android:layout_height="23dp"
            android:layout_marginTop="32dp"
            android:background="@drawable/btn_halftransparent_roundshape"
            android:gravity="center"
            android:layout_toRightOf="@id/iv_avator"
            android:text="信用积分 193  >"
            android:textColor="#fff"
            android:textSize="11sp"/>
    </RelativeLayout>

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@mipmap/bg_header"
        android:scaleType="centerCrop"/>

</LinearLayout>

创建menu包，menu包下的navigation_menu菜单文件：

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:id="@+id/one"
          android:icon="@mipmap/my_favorites"
          android:title="我的钱包"/>

    <item android:id="@+id/two"
        android:icon="@mipmap/my_competition"
        android:title="我的卡券"/>

    <item android:id="@+id/three"
        android:icon="@mipmap/my_honor"
        android:title="我的行程"/>

    <item android:id="@+id/four"
        android:icon="@mipmap/my_offline_cache"
        android:title="邀请好友"/>

    <item android:id="@+id/five"
        android:icon="@mipmap/my_help_and_feedback"
        android:title="我的贴纸"/>

    <item android:id="@+id/six"
        android:icon="@mipmap/my_set_up"
        android:title="设置"/>
</menu>

setSupportActionBar(toolbar)设置toolbar；setHomeButtonEnabled(true)设置是否使用自带返回键；setDisplayHomeAsUpEnabled(true)给左上角图标的左边加上一个返回的图标 ;mDrawerLayout.setDrawerListener(mToggle)给drawerlayout设置开关事件触发。

toolbar = (Toolbar) findViewById(R.id.toolbar);
        mDrawerLayout = (DrawerLayout) findViewById(R.id.drawerlayout);
        navigationView = (NavigationView) findViewById(R.id.navigationview);
        toolbar.setTitle("");
        setSupportActionBar(toolbar);
        getSupportActionBar().setHomeButtonEnabled(true);
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);

        mToggle = new ActionBarDrawerToggle(this,mDrawerLayout,toolbar,R.string.open,R.string.close){
            @Override
            public void onDrawerOpened(View drawerView) {
                super.onDrawerOpened(drawerView);

            }

            @Override
            public void onDrawerClosed(View drawerView) {
                super.onDrawerClosed(drawerView);

            }
        };

        mToggle.syncState();
        mDrawerLayout.setDrawerListener(mToggle);

给菜单添加点击事件：

        navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                switch (item.getItemId()){
                    case R.id.one:
                        Toast.makeText(getApplicationContext(),"one",Toast.LENGTH_SHORT).show();
                        break;
                    case R.id.two:
                        Toast.makeText(getApplicationContext(),"two",Toast.LENGTH_SHORT).show();
                        break;
                    case R.id.three:
                        Toast.makeText(getApplicationContext(),"three",Toast.LENGTH_SHORT).show();
                        break;
                    case R.id.four:
                        Toast.makeText(getApplicationContext(),"four",Toast.LENGTH_SHORT).show();
                        break;
                    case R.id.five:
                        Toast.makeText(getApplicationContext(),"five",Toast.LENGTH_SHORT).show();
                        break;
                    case R.id.six:
                        Toast.makeText(getApplicationContext(),"six",Toast.LENGTH_SHORT).show();
                        break;
                }
                return true;
            }
        });

MainActivity完整代码：

package com.example.drawerlayout;

import android.support.annotation.NonNull;
import android.support.design.widget.NavigationView;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.ActionBarDrawerToggle;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.Toolbar;
import android.view.MenuItem;
import android.view.View;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {
    private Toolbar toolbar;
    private ActionBarDrawerToggle mToggle;
    private DrawerLayout mDrawerLayout;
    private NavigationView navigationView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        init();
    }

    private void init() {
        toolbar = (Toolbar) findViewById(R.id.toolbar);
        mDrawerLayout = (DrawerLayout) findViewById(R.id.drawerlayout);
        navigationView = (NavigationView) findViewById(R.id.navigationview);
        toolbar.setTitle("");
        setSupportActionBar(toolbar);
        getSupportActionBar().setHomeButtonEnabled(true);
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);

        mToggle = new ActionBarDrawerToggle(this,mDrawerLayout,toolbar,R.string.open,R.string.close){
            @Override
            public void onDrawerOpened(View drawerView) {
                super.onDrawerOpened(drawerView);

            }

            @Override
            public void onDrawerClosed(View drawerView) {
                super.onDrawerClosed(drawerView);

            }
        };

        mToggle.syncState();
        mDrawerLayout.setDrawerListener(mToggle);

        navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                switch (item.getItemId()){
                    case R.id.one:
                        Toast.makeText(getApplicationContext(),"one",Toast.LENGTH_SHORT).show();
                        break;
                    case R.id.two:
                        Toast.makeText(getApplicationContext(),"two",Toast.LENGTH_SHORT).show();
                        break;
                    case R.id.three:
                        Toast.makeText(getApplicationContext(),"three",Toast.LENGTH_SHORT).show();
                        break;
                    case R.id.four:
                        Toast.makeText(getApplicationContext(),"four",Toast.LENGTH_SHORT).show();
                        break;
                    case R.id.five:
                        Toast.makeText(getApplicationContext(),"five",Toast.LENGTH_SHORT).show();
                        break;
                    case R.id.six:
                        Toast.makeText(getApplicationContext(),"six",Toast.LENGTH_SHORT).show();
                        break;
                }
                return true;
            }
        });
    }
}

使用技巧：

获取头布局控件：

        View headerView = navigationView.getHeaderView(0);
        ImageView ivAvatar = headerView.findViewById(R.id.iv_avator);

默认menu图标是灰色的，需要添加 app:itemIconTint="@color/blue"设置统一颜色。更改效果如下：

image.png

若要还原icon的原本颜色，调用navigationView.setItemIconTintList(null)，使用原生原色。

好了，打完收工！给个❤️就最好不过了。

DrawerLayout+NavigationView仿摩拜单车

制作步骤：

MainActivity完整代码：

使用技巧：

猜你喜欢

热点阅读