馬超老師 ·側(cè)滑菜單：DrawerLayout
側(cè)滑菜單是用來(lái)在頁(yè)面上增加一個(gè)抽屜式菜單欄的控件，它一般位于左側(cè)，用戶可以通過(guò)側(cè)滑拉出或者關(guān)閉。通常你可以放置一些菜單項(xiàng)或者上下文相關(guān)的設(shè)置在里面，幫助你節(jié)省屏幕空間同時(shí)可以很方便的隨時(shí)打開(kāi)。側(cè)滑菜單其實(shí)就是下面這貨：
1. 側(cè)滑菜單的特性
側(cè)滑菜單在 Andriod 應(yīng)用中非常常見(jiàn)，但是當(dāng)你想探究實(shí)現(xiàn)方法的時(shí)候會(huì)發(fā)現(xiàn)很多早期教程都會(huì)教你使用第三方庫(kù)，或者手把手教你通過(guò)一個(gè) ListView 配合手勢(shì)加上動(dòng)畫來(lái)實(shí)現(xiàn)。好消息是現(xiàn)在官方已經(jīng)推出了一個(gè)專門用于側(cè)滑的控件——DrawerLayout。
DrawerLayout 作為頁(yè)面內(nèi)容的頂層容器，讓用戶通過(guò)側(cè)滑手勢(shì)從屏幕邊緣拉出。我們可以給它的子 View 設(shè)置layout_gravity屬性來(lái)決定抽屜是從左側(cè)或者右側(cè)打開(kāi)。
2. DrawerLayout 使用方法
DrawerLayout 作為官方提供的控件，使用起來(lái)還是很簡(jiǎn)單的，如果查看 DrawerLayout 的源碼，可以發(fā)現(xiàn) DrawerLayout 是直接繼承至 ViewGroup 寫的，所以在它內(nèi)部可以承載其他的 View 同時(shí)還會(huì)有一些附屬的功能。我們通常將 DrawerLayout 用做根View，然后將首頁(yè)要展示的內(nèi)容放在 DrawerLayout 的最前面作為第一個(gè)子 View，并且高度、寬度設(shè)置為match_parent。
2.1 DrawerLayout 的常用屬性
DrawerLayout 的特有屬性非常少，常用的基本上就是在前文提到過(guò)的一個(gè)：layout_gravity，它的作用是指定側(cè)滑菜單的滑動(dòng)方向，常用的有以下兩個(gè)值：
- start： 從左側(cè)劃出的菜單
- end： 從右側(cè)劃出的菜單
該屬性是作用在 DrawerLayout 的子 View 之上的，設(shè)置了layout_gravity屬性的子 View 將作為一個(gè)側(cè)滑菜單使用。
2.2 DrawerLayout 的常用 API
常用 API 只有一個(gè)，用來(lái)監(jiān)聽(tīng)策劃菜單的滑動(dòng)事件：
public void addDrawerListener(DrawerListener listener)
接口中有以下幾個(gè)方法：
- public void onDrawerSlide(View drawerView, float slideOffset)
當(dāng)側(cè)滑菜單滑動(dòng)過(guò)程中調(diào)用，傳入滑動(dòng)的 View 對(duì)象及滑動(dòng)的距離 - public void onDrawerOpened(View drawerView)
當(dāng)側(cè)滑菜單打開(kāi)的時(shí)候調(diào)用 - public void onDrawerClosed(@NonNull View drawerView)
當(dāng)側(cè)滑菜單關(guān)閉的時(shí)候調(diào)用 - public void onDrawerStateChanged(int newState)
當(dāng)側(cè)滑菜單滑動(dòng)狀態(tài)變化時(shí)調(diào)用
整體而言，官方已經(jīng)為我們封裝的非常好了，所以使用也比較簡(jiǎn)單，只需要掌握這幾個(gè)屬性和 API，就可以輕松設(shè)置屬于你自己的側(cè)滑菜單了，接下來(lái)我們一起實(shí)現(xiàn)一個(gè) DrawerLayout 示例。
3 DrawerLayout 的使用示例
本節(jié)我們通過(guò) DrawerLayout 實(shí)現(xiàn)一個(gè)左側(cè)的側(cè)滑菜單，仍然借用“水果”作為案例（提醒大家注意健康）。在 DrawerLayout 中放置一個(gè) ListView 作為側(cè)滑菜單載體，用戶通過(guò)在 ListView 上選擇從而更新主頁(yè)面的內(nèi)容。
3.1 編寫主頁(yè)面布局
整體的頁(yè)面布局對(duì)按照第 2 小節(jié)所講的規(guī)則來(lái)編寫，包含幾個(gè)元素：主頁(yè)面標(biāo)題、主頁(yè)面內(nèi)容、側(cè)滑菜單。布局代碼如下：
<?xml version="1.0" encoding="utf-8"?>
<androidx.drawerlayout.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:text="@string/drawer_prompt"
android:textSize="30sp" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="50dp"
android:gravity="center"
android:text="側(cè)滑菜單" />
<ImageView
android:id="@+id/imageview"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
<ListView
android:id="@+id/left_drawer"
android:layout_width="240dp"
android:layout_height="match_parent"
android:layout_gravity="start"
android:background="#FFFFFF"
android:choiceMode="singleChoice"
android:divider="@android:color/darker_gray"
android:dividerHeight="1dp" />
</androidx.drawerlayout.widget.DrawerLayout>
3.2 編寫列表布局
接著就是要針對(duì) ListView 編寫一個(gè)列表樣式了，學(xué)過(guò) ListView 的同學(xué)想必都不在話下，如果對(duì) ListView 不熟悉的可以回顧一下第 24 節(jié)的內(nèi)容，這里我們新建 list_item.xml 文件，用最經(jīng)典的 TextView 搭配 ImageView 的方式：
<?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="100dp"
android:gravity="center"
android:orientation="horizontal"
android:background="?android:attr/activatedBackgroundIndicator"
android:minHeight="?android:attr/listPreferredItemHeightSmall"
android:padding="10dp" >
<ImageView
android:id="@+id/imageViewIcon"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:paddingRight="10dp" />
<TextView
android:id="@+id/textViewName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="15dp"
android:textColor="@android:color/black"
android:textAppearance="?android:attr/textAppearanceListItemSmall" />
</LinearLayout>
3.3 編寫 ListView 適配器
其實(shí)整個(gè)項(xiàng)目針對(duì) DrawerLayout 的操作并不多，更多的是在實(shí)現(xiàn) ListView，這也體現(xiàn)了 Google 大佬們經(jīng)典的封裝能力。有了 ListView 布局就需要添加一個(gè) Adapter，以供將 UI 和 數(shù)據(jù)綁定到一起。
package com.emercy.myapplication;
import android.view.View;
import android.view.ViewGroup;
import android.app.Activity;
import android.content.Context;
import android.view.LayoutInflater;
import android.widget.ArrayAdapter;
import android.widget.ImageView;
import android.widget.TextView;
public class MyAdapter extends ArrayAdapter<Model> {
Context mContext;
int layoutResourceId;
Model data[];
public MyAdapter(Context mContext, int layoutResourceId, Model[] data) {
super(mContext, layoutResourceId, data);
this.layoutResourceId = layoutResourceId;
this.mContext = mContext;
this.data = data;
}
@Override
public View getView(int position, View convertView, ViewGroup parent) {
View listItem = convertView;
LayoutInflater inflater = ((Activity) mContext).getLayoutInflater();
listItem = inflater.inflate(layoutResourceId, parent, false);
ImageView imageViewIcon = (ImageView) listItem.findViewById(R.id.imageViewIcon);
TextView textViewName = (TextView) listItem.findViewById(R.id.textViewName);
Model folder = data[position];
imageViewIcon.setImageResource(folder.icon);
textViewName.setText(folder.name);
return listItem;
}
}
3.4 編寫 MainActivity 主邏輯
最后就可以進(jìn)入主邏輯的編寫，我們需要初始化列表數(shù)據(jù)，然后通過(guò) Adapter 與 ListView 綁定，然后監(jiān)聽(tīng)列表的點(diǎn)擊也就是用戶的選擇，再點(diǎn)擊的時(shí)候主頁(yè)面做出相應(yīng)的改變即可。
package com.emercy.myapplication;
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ImageView;
import android.widget.ListView;
public class MainActivity extends Activity {
private ListView mDrawerList;
private ImageView mImage;
Model[] mItem = new Model[3];
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mDrawerList = (ListView) findViewById(R.id.left_drawer);
mImage = findViewById(R.id.imageview);
mItem[0] = new Model(R.drawable.apple, "蘋果");
mItem[1] = new Model(R.drawable.peach, "桃子");
mItem[2] = new Model(R.drawable.watermelon, "西瓜");
MyAdapter adapter = new MyAdapter(this, R.layout.list_item, mItem);
mDrawerList.setAdapter(adapter);
mDrawerList.setOnItemClickListener(new AdapterView.OnItemClickListener() {
@Override
public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
mImage.setImageResource(mItem[position].icon);
}
});
}
}
最后我們編譯運(yùn)行，會(huì)發(fā)現(xiàn)整個(gè)頁(yè)面只有一個(gè)“選擇水果”的提示信息，不著急，側(cè)滑菜單當(dāng)然是默認(rèn)隱藏的，我們通過(guò)在屏幕左側(cè)側(cè)滑來(lái)請(qǐng)它出山，最終效果如下：
4. 小結(jié)
本節(jié)介紹了官方出品的一個(gè)側(cè)滑菜單控件，它是直接繼承自 ViewGroup 實(shí)現(xiàn)的，通常我們會(huì)把它作為整個(gè)頁(yè)面的根布局，然后將主頁(yè)面作為 DrawerLayout 的第一個(gè)子 View。接著為需要側(cè)滑的列表添加layout_gravity屬性，最后按照需要添加一個(gè)監(jiān)聽(tīng)器，就可以完成側(cè)滑功能了。在 DrawerLayout 出來(lái)之前，有各式各樣第三方的側(cè)滑控件，大家可以翻看一些比較古老的帖子或者教程學(xué)習(xí)學(xué)習(xí)，但是使用上還是推薦使用官方 DrawerLayout 控件，在細(xì)節(jié)和封裝以及后期維護(hù)上還是很具有優(yōu)勢(shì)的。
2025 imooc.com All Rights Reserved |