Android-側滑選單（三）
阿新 • • 發佈：2018-11-26
新整理的仿QQ側滑選單實現的例子，使用android.support.v4.widget.DrawerLayout和android.support.design.widget.NavigationView實現的，下面先上兩張效果圖：
效果圖也看到了，那麼咱們廢話不多說，直接上程式碼：
注意：要在app的build.gradle裡新增下面這句，不然可能會報錯的
compile 'com.android.support:design:25.2.0'首先是佈局檔案activity_slidetest.xml
<?xml version="1.0" encoding="utf-8"?> <android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/activity_na" android:layout_width="match_parent" android:layout_height="match_parent"> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@color/colorPrimary" android:gravity="center_vertical" android:orientation="horizontal"> <ImageView android:id="@+id/main_menu" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_margin="20dp" android:src="@mipmap/ic_launcher_round" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="16dp" android:layout_weight="1" android:text="側滑選單" android:textSize="20sp" /> <ImageView android:id="@+id/search" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_margin="20dp" android:src="@mipmap/ic_launcher" /> </LinearLayout> <TextView android:layout_width="match_parent" android:layout_height="match_parent" android:gravity="center" android:text="主頁" android:textSize="22sp" /> </LinearLayout> <android.support.design.widget.NavigationView xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/nav" android:layout_width="wrap_content" android:layout_height="match_parent" android:layout_gravity="left" android:fitsSystemWindows="true" app:headerLayout="@layout/head" app:menu="@menu/new_menu"> </android.support.design.widget.NavigationView> </android.support.v4.widget.DrawerLayout>
因為側滑選單是隱藏在螢幕左側的，所以在NavigationView裡需要設定android:layout_gravity="left",NavigationView裡還使用到了app:headerLayout="@layout/head"和app:menu="@menu/new_menu",那麼下面我們就來建立這兩個佈局檔案
先來建立head.xml檔案，直接在layout資料夾下建立即可，我這裡只是簡單的一個例子，為了方便裡面隨便放了兩個控制元件，實際開發中藥根據實際情況來佈局：
<?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="match_parent" android:gravity="center" android:orientation="vertical"> <ImageView android:id="@+id/person" android:layout_width="72dp" android:layout_height="72dp" android:layout_marginTop="42dp" android:src="@mipmap/ic_launcher_round" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="24dp" android:text="時代新人" android:textSize="20sp" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginBottom="18dp" android:layout_marginTop="12dp" android:text="跟上時代的步伐，勇往直前" android:textSize="16sp" /> </LinearLayout>
再建立new_menu.xml檔案，這個檔案需要先在res下新建一個資料夾menu,然後再menu資料夾下建立new_menu.xml檔案，這個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/favorite" android:icon="@mipmap/ic_launcher" android:title=" 會員"/> <item android:id="@+id/wallet" android:title=" 錢包" android:icon="@mipmap/ic_launcher"/> <item android:id="@+id/photo" android:title=" 相簿" android:icon="@mipmap/ic_launcher"/> <item android:id="@+id/dress" android:title=" 裝扮" android:icon="@mipmap/ic_launcher"/> <item android:id="@+id/file" android:title=" 檔案" android:icon="@mipmap/ic_launcher" /> </group> </menu>
在這裡我們看到有個group,有group的話就相當於把下面的item都放在了這個組裡面，可以設定選中幾項，相當於單選、多選，android:checkableBehavior="single"單選，如果不需要設定多選，可去掉group，直接寫item即可，有多少項寫多少項。
最後我們再看下方法實現的類檔案SlideTestActivity.java
package com.junto.leftrightslideactivity.activity;
import android.app.Activity;
import android.os.Bundle;
import android.support.annotation.NonNull;
import android.support.annotation.Nullable;
import android.support.design.widget.NavigationView;
import android.support.v4.widget.DrawerLayout;
import android.view.MenuItem;
import android.view.View;
import android.widget.ImageView;
import android.widget.Toast;
import com.junto.leftrightslideactivity.R;
/**
* Created by WangJinyong on 2018/9/27.
*/
public class SlideTestActivity extends Activity {
private DrawerLayout drawerLayout;
private NavigationView navigationView;
ImageView menu;
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_slidetest);
initView();
}
private void initView(){
drawerLayout = findViewById(R.id.activity_na);
navigationView = findViewById(R.id.nav);
menu = findViewById(R.id.main_menu);
View headerView = navigationView.getHeaderView(0);//獲取頭佈局
menu.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
//點選選單，跳出側滑選單
if (drawerLayout.isDrawerOpen(navigationView)){
drawerLayout.closeDrawer(navigationView);
}else{
drawerLayout.openDrawer(navigationView);
}
}
});
navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
@Override
public boolean onNavigationItemSelected(@NonNull MenuItem item) {
Toast.makeText(SlideTestActivity.this,item.getTitle().toString(),Toast.LENGTH_SHORT).show();
// drawerLayout.closeDrawer(navigationView);
return true;
}
});
}
}
上面程式碼中我註釋掉一行drawerLayout.closeDrawer(navigationView),這行的意思是側滑選單的item選中關掉側滑選單。到這裡放QQ側滑選單就做好了，裡面的細節內容還需要根據實際開發來完善，這種文章雖然已經太普通不過了，但是如果有遇到的朋友想看的還是希望能幫助有需要的朋友，寫的不足之處還望大家多多指教。
demo原始碼：https://download.csdn.net/download/u013184970/10690420
上一篇文章：Android-螢幕左右側滑（二）