读第一行代码第12章-2.滑动菜单

Posted 2020-11-17 zqm-sau

在之前介绍过Toolbar的基础之上，现在介绍滑动菜单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"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">

<android.support.constraint.ConstraintLayout
    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"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
</android.support.v4.widget.DrawerLayout>  

现在一个简易的滑动菜单已经制作好了，但是用户怎么知道我们有滑动菜单这个功能呢？
所以我们就需要在标题栏的最左边加入一个导航按钮，点击按钮也会显示滑动菜单，所以我们需要导入一张导航图片到drawable-xxhdpi目录下。然后修改MainActivity中的代码：

public class MainActivity extends AppCompatActivity {

private DrawerLayout mDrawerLayout;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    Toolbar toolbar = findViewById(R.id.toolbar);
    setSupportActionBar(toolbar);
    mDrawerLayout = findViewById(R.id.drawer_layout);
    ActionBar actionBar = getSupportActionBar();
    if(actionBar != null){
        actionBar.setDisplayHomeAsUpEnabled(true);
        actionBar.setHomeAsUpIndicator(R.drawable.navigate);
    }
}

@Override
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:
            mDrawerLayout.openDrawer(GravityCompat.START);
            break;
        case R.id.Share:
            Toast.makeText(this,"You click Share!",Toast.LENGTH_SHORT).show();
            break;
        case R.id.Upload:
            Toast.makeText(this,"You click Upload!",Toast.LENGTH_SHORT).show();
            break;
        case R.id.Add:
            Toast.makeText(this,"You click Add!",Toast.LENGTH_SHORT).show();
            break;
        case R.id.Delete:
            Toast.makeText(this,"You click Delete!",Toast.LENGTH_SHORT).show();
            break;
        case R.id.Setting:
            Toast.makeText(this,"You click Setting!",Toast.LENGTH_SHORT).show();
            break;
        default:break;
    }
    return true;
}
}  

通过比较不难发现，其实我们就是在昨天的基础之上加了这几行代码：

private DrawerLayout mDrawerLayout;


mDrawerLayout = findViewById(R.id.drawer_layout);
    ActionBar actionBar = getSupportActionBar();
    if(actionBar != null){
        actionBar.setDisplayHomeAsUpEnabled(true);
        actionBar.setHomeAsUpIndicator(R.drawable.navigate);
    }


case android.R.id.home:
            mDrawerLayout.openDrawer(GravityCompat.START);
            break;  

上面首先调用findViewById()方法得到了DrawerLayout的实例，然后调用getSupportActionBar()方法得到了ActionBar的实例，再调用setDisplayHomeAsUpEnabled()方法让导航栏显示出来，然后通过setHomeAsUpIndicator()方法为导航栏设置一个图片。
接下来通过对HomeAsUp的点击事件(HomeAsUp按钮的id永远是android.R.id.home)，然后调用openDrawer()方法将滑动菜单展示出来。如图：

此时导航图标已经显示出来了，但是滑动菜单还是空的，所以我们需要加点东西进去，首先导入下面两个库：

implementation ‘com.android.support:design:27.1.1‘
implementation ‘de.hdodenhof:circleimageview:2.2.0‘  

第一行的是Design Support库，第二行是开源的CircleImageView，他可以轻松的实现图片圆形化的功能。
在添加之前，我们还需要准备两个东西：menu和headLayoout，把Navigation分成上下两部分，menu用来显示下面具体的菜单项，headLayout用来显示上面的头布局。
先来准备menu，我事先找了五张图片作为按钮的图标，将他们放在drawable-xxhdpi目录下。然后右击 menu文件夹→NEW→Menu→Menu resource file，创建一个nav_menu.xml文件，修改代码如下：

<?xml version="1.0" encoding="utf-8"?>
<menu
xmlns:android="http://schemas.android.com/apk/res/android">
<group android:checkableBehavior="single">
    <item
        android:id="@+id/nav_call"
        android:icon="@drawable/nav_call"
        android:title="Call"/>
    <item
        android:id="@+id/nav_friends"
        android:icon="@drawable/nav_friends"
        android:title="Friends"/>
    <item
        android:id="@+id/nav_location"
        android:icon="@drawable/nav_location"
        android:title="Location"/>
    <item
        android:id="@+id/nav_mail"
        android:icon="@drawable/nav_mail"
        android:title="Mail"/>
    <item
        android:id="@+id/nav_task"
        android:icon="@drawable/nav_task"
        android:title="Task"/>
</group>
</menu>  

我们首先在

中嵌套了一个