Android 開發實現側滑導航檢視介面
阿新 • • 發佈：2021-02-12
效果圖：
一、匯入工具包
（1）在build.gradle中引入design支援庫【版本號跟appcompat保持一致】
dependencies { implementation fileTree(dir: 'libs', include: ['*.jar']) implementation 'androidx.appcompat:appcompat:1.0.2' implementation 'androidx.constraintlayout:constraintlayout:1.1.3' testImplementation 'junit:junit:4.12' androidTestImplementation 'androidx.test.ext:junit:1.1.0' androidTestImplementation 'androidx.test.espresso:espresso-core:3.1.1' //引入design庫 implementation 'com.android.support:design:29.1.1' }
（2）修改styles.xml檔案中的樣式為NoActionBar【主要用於ToolBar，本Demo中沒有使用ToolBar，而是模擬了ToolBar的區域，但是也需要設定為NoActionBar】
<!-- Base application theme. --> <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar"> <!-- Customize your theme here. --> <item name="colorPrimary">@color/colorPrimary</item> <item name="colorPrimaryDark">@color/colorPrimaryDark</item> <item name="colorAccent">@color/colorAccent</item> </style>
（3）參考《DrawerLayoutDemo【側邊欄（側滑選單）簡單實現】》進行activity介面的佈局
<?xml version="1.0" encoding="utf-8"?> <androidx.drawerlayout.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:layout_width="match_parent" android:layout_height="match_parent" android:id="@+id/drawerLayout" tools:context=".MainActivity"> <!-- 主內容檢視一定要是DrawerLayout的第一個子檢視【必須】 --> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <!-- 模擬toolbar的左側圖示 --> <LinearLayout android:layout_width="match_parent" android:layout_height="56dp" android:orientation="vertical" android:gravity="center_vertical" android:background="#ffffff"> <Button android:id="@+id/img_menuBtn" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="側邊欄" android:padding="8dp"/> </LinearLayout> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="內容區域" android:textSize="22sp" android:layout_gravity="center"/> </LinearLayout> <!-- app:headerLayout : 指定頭部佈局的資原始檔。 app:menu : 指定導航選單的資原始檔。 app:itemBackground : 指定選單項的的背景。 app:itemTextColor : 指定選單項的文字顏色。 app:itemTextAppearance : 指定選單項的文字樣式。 app:itemIconTint : 指定選單項的圖示色彩。--> <com.google.android.material.navigation.NavigationView android:id="@+id/nav_view" android:layout_width="wrap_content" android:layout_height="match_parent" android:layout_gravity="left" app:headerLayout="@layout/nav_drawer_header" app:menu="@menu/nav_drawer_menu" android:background="#ffffff" app:itemTextAppearance="@style/nav_drawer_menu_text_style" app:itemIconTint="@color/nav_drawer_menu_text_color" /> </androidx.drawerlayout.widget.DrawerLayout>
（4）將nav_drawer_header.xml複製到專案中【根據實際情況修改UI佈局】
<?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="160dp"
android:orientation="vertical"
android:padding="10dp"
android:background="#F4F4F4">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@mipmap/ic_launcher"
android:layout_gravity="center"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="個人中心"
android:layout_gravity="center"
android:layout_marginTop="10dp"/>
</LinearLayout>
（5）將nav_drawer_menu.xml複製到專案的menu目錄中【根據實際情況修改】
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<group android:id="@+id/group0">
<item
android:id="@+id/menu_info"
android:icon="@mipmap/ic_launcher"
android:title="個人資訊"/>
<item
android:id="@+id/menu_pwd"
android:icon="@mipmap/ic_launcher"
android:title="修改密碼"/>
</group>
<group android:id="@+id/group1">
<item
android:id="@+id/menu_setting"
android:icon="@mipmap/ic_launcher"
android:title="設定"/>
<item
android:id="@+id/menu_about"
android:icon="@mipmap/ic_launcher"
android:title="關於"/>
<item
android:id="@+id/menu_exit"
android:icon="@mipmap/ic_launcher"
android:title="退出"/>
</group>
</menu>（6）在styles.xml新增以下程式碼
<!-- NavigationView的選單項的文字樣式 -->
<style name="nav_drawer_menu_text_style">
<item name="android:textColor">@color/nav_drawer_menu_text_color</item>
<item name="android:textSize">16sp</item>
<item name="android:padding">5dp</item>
</style>（7）在colors.xml中新增以下程式碼
<!-- NavigationView的選單項的文字顏色 -->
<color name="nav_drawer_menu_text_color">#434343</color>三、使用方法
package com.chy.test;
import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;
import androidx.drawerlayout.widget.DrawerLayout;
import android.os.Bundle;
import android.view.Gravity;
import android.view.MenuItem;
import android.view.View;
import android.widget.Button;
import android.widget.Toast;
import com.google.android.material.navigation.NavigationView;
public class MainActivity extends AppCompatActivity {
private Button img_menuBtn;
/**導航欄左側的側邊欄的父容器*/
private DrawerLayout mDrawerLayout;
//導航檢視
private NavigationView mNavigationView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initViews();
initEvents();
}
/**
* 初始化檢視
* */
private void initViews() {
img_menuBtn = findViewById(R.id.img_menuBtn);
mDrawerLayout = findViewById(R.id.drawerLayout);
mNavigationView = findViewById(R.id.nav_view);
}
private void initEvents() {
//使用者圖示的點選事件
img_menuBtn.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
mDrawerLayout.openDrawer(Gravity.LEFT);
}
});
mNavigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
@Override
public boolean onNavigationItemSelected(@NonNull MenuItem item) {
switch(item.getItemId()){
case R.id.menu_info:
Toast.makeText(MainActivity.this, "個人資訊", Toast.LENGTH_SHORT).show();
break;
case R.id.menu_pwd:
Toast.makeText(MainActivity.this, "修改密碼", Toast.LENGTH_SHORT).show();
break;
case R.id.menu_setting:
Toast.makeText(MainActivity.this, "設定", Toast.LENGTH_SHORT).show();
break;
case R.id.menu_about:
Toast.makeText(MainActivity.this, "關於", Toast.LENGTH_SHORT).show();
break;
case R.id.menu_exit:
Toast.makeText(MainActivity.this, "退出", Toast.LENGTH_SHORT).show();
break;
}
//關閉側滑選單
mDrawerLayout.closeDrawers();
return true;
}
});
}
}
補充
如果想要更改側邊欄的menu中圖示和文字的間距，需要在Activity中執行下面的java程式碼：
mNavigationView.setItemIconPadding(getResources().getDimensionPixelOffset(R.dimen.navigation_icon_padding));//設定側邊欄圖示和文字的間距