UI进阶2-滑动菜单

在main.xml中使用DrawerLayout，它允许在布局中放入两个直接子控件，第一个是主屏幕显示内容，第二个是滑动屏幕显示内容

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/draw_lay"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
    >
        <android.support.v7.widget.Toolbar
            android:id="@+id/toolBar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
            />
    </FrameLayout>
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:text="滑动界面"
        android:textSize="30sp"
        android:background="#FFF"/><1--layout_gravity必须设置，可为left、right、start设置滑动方向-->

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

此时滑动菜单就可以显示了，但有时用户不知道滑动菜单的存在，所以我们在标题栏中在加入一个图标以供用户点击

MainActivity中的代码

package com.example.materialtest;

import android.support.v4.view.GravityCompat;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.ActionBar;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.MenuItem;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {
    private DrawerLayout mDrawer;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Toolbar toolbar=(Toolbar)findViewById(R.id.toolBar);
        setSupportActionBar(toolbar);
        mDrawer=(DrawerLayout)findViewById(R.id.draw_lay);//获取滑动菜单实例
        ActionBar actionBar=getSupportActionBar();//获取ToolBar实例
        if(actionBar!=null){
            actionBar.setDisplayHomeAsUpEnabled(true);//显示导航按钮
            actionBar.setHomeAsUpIndicator(R.drawable.f);//此时导航按钮是后退键，我们把它换掉
        }
    }
    public boolean onCreateOptionsMenu(Menu menu){
        getMenuInflater().inflate(R.menu.toolbar,menu);
        return true;

    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        switch (item.getItemId())
        {
            case android.R.id.home://该按钮WieHomeAsUp按钮，名称不可变
                mDrawer.openDrawer(GravityCompat.START);//点击时滑出滑动菜单
                break;
            case R.id.item1:
                Toast.makeText(this,"你点击了第一个按钮",Toast.LENGTH_SHORT).show();
                break;
            case R.id.item2:
                Toast.makeText(this,"你点击了第二个按钮",Toast.LENGTH_SHORT).show();
                break;
            case R.id.item3:
                Toast.makeText(this,"你点击了第三个按钮",Toast.LENGTH_SHORT).show();
                break;
        }
        return true;
    }
}

 NavigationView的使用

NavigationView可以帮我们更简单的写出更加美观的滑动菜单

使用NavigationView之前由于它是support内的所以我们首先要添加依赖，build.gradle中添加

   compile 'com.android.support:design:26.0.0-alpha1'
    compile 'de.hdodenhof:circleimageview:2.1.0'

这里注意依赖的版本一定要与Android的配置一样否则会报错同样在build.gradle中有下面三行代码，我这里全是用的26的

 compileSdkVersion 26
 targetSdkVersion 26
compile 'com.android.support:appcompat-v7:26.+'

在menu文件夹下创建navmenu.xml具体代码如下

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <group android:checkableBehavior="single"><!--group是一个组，single表示所有菜单只可以单选-->
        <item
            android:id="@+id/nav1"
            android:icon="@drawable/nav1"
            android:title="nav_1"/>
        <item
            android:id="@+id/nav2"
            android:icon="@drawable/nav2"
            android:title="nav_2"/>
        <item
            android:id="@+id/nav3"
            android:icon="@drawable/nav3"
            android:title="nav_3"/>
        <item
            android:id="@+id/nav4"
            android:icon="@drawable/nav4"
            android:title="nav_4"/>

    </group>
</menu>

在layout下新建navhead.xml,代码如下,其中使用了一些相对布局的元素

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent" android:layout_height="180dp"
    android:background="?attr/colorPrimary">
    <de.hdodenhof.circleimageview.CircleImageView
        android:layout_width="70dp"
        android:layout_height="70dp"
        android:id="@+id/de_image"
        android:src="@drawable/head"
        android:layout_centerInParent="true"/>
    <TextView
        android:id="@+id/name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="王**"
        android:textColor="#FFF"
        android:layout_above="@+id/address"
        android:textSize="14sp"
        />
    <TextView
        android:id="@+id/address"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="83763489453181@qq.com"
        android:textColor="#FFF"
        android:layout_alignParentBottom="true"
        android:textSize="14sp"
        />

</RelativeLayout>

修改main.xml,删除之前的文本域将DrawerLayout添加进去

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/draw_lay"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
    >
        <android.support.v7.widget.Toolbar
            android:id="@+id/toolBar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
            />
    </FrameLayout>
    <android.support.design.widget.NavigationView
        android:id="@+id/nav_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        app:menu="@menu/nav_menu"
        app:headerLayout="@layout/navhead"/>

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

修改MainActivity，代码如下

package com.example.materialtest;

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

public class MainActivity extends AppCompatActivity {
    private DrawerLayout mDrawer;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        final Toolbar toolbar=(Toolbar)findViewById(R.id.toolBar);
        setSupportActionBar(toolbar);
        mDrawer=(DrawerLayout)findViewById(R.id.draw_lay);
        NavigationView navigationView=(NavigationView)findViewById(R.id.nav_view);//NavigationView
　　　　 navigationView.setItemIconTintList(null);        
　　　　 ActionBar actionBar=getSupportActionBar();
        if(actionBar!=null){
            actionBar.setDisplayHomeAsUpEnabled(true);
            actionBar.setHomeAsUpIndicator(R.drawable.f);
        }
        //NavigationView
        navigationView.setCheckedItem(R.id.nav1);//设置默认选中
        navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener(){
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                if (item.getItemId()==R.id.nav1){
                    mDrawer.closeDrawers();
                }

                return true;
            }
        });
    }
    public boolean onCreateOptionsMenu(Menu menu){
        getMenuInflater().inflate(R.menu.toolbar,menu);
        return true;

    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        switch (item.getItemId())
        {
            case android.R.id.home:
                mDrawer.openDrawer(GravityCompat.START);
                break;
            case R.id.item1:
                Toast.makeText(this,"你点击了第一个按钮",Toast.LENGTH_SHORT).show();
                break;
            case R.id.item2:
                Toast.makeText(this,"你点击了第二个按钮",Toast.LENGTH_SHORT).show();
                break;
            case R.id.item3:
                Toast.makeText(this,"你点击了第三个按钮",Toast.LENGTH_SHORT).show();
                break;
        }
        return true;
    }
}

这一篇博客和上一篇的结合起来可以达到以下效果

在main.java中加入navigationView.setItemIconTintList(null); 可以解决NavigationView中Icon不显示的问题