Android-側邊導航欄的使用

在學習之前，我們先得知道側邊導航欄是什么？

它是一個 可以讓內容從屏幕邊緣滑出的布局容器，由安卓官方提供，用于創建側邊菜單，通常搭配 NavigationView 使用；

添加依賴：

在app下的build.gradle中添加以下代碼：

implementation 'androidx.appcompat:appcompat:1.6.1'implementation 'com.google.android.material:material:1.11.0'implementation 'androidx.drawerlayout:drawerlayout:1.2.0'implementation 'androidx.constraintlayout:constraintlayout:2.1.4'

我們還需要在導包的時候修改一下：

把

import android.widget.Toolbar;

修改成

import androidx.appcompat.widget.Toolbar;

做好之后，我們就正式的開始學習了；

DrawerLayout的基本結構和用法

其實導航欄的實現就是靠DrawerLayout來實現的，我把概念放在下面：

DrawerLayout 是一個允許內容從屏幕邊緣滑出顯示的布局，適合放置菜單、用戶信息或頁面切換功能。它可以從**左邊（start）或右邊（end）**滑出，通常用于構建帶有側邊欄的 Material Design 風格 App。

DrawerLayout的功能和特點

1. 側滑菜單功能：DrawerLayout 提供側邊滑出菜單的實現，允許用戶通過滑動屏幕邊緣或點擊按鈕打開抽屜菜單，提升界面簡潔性和可用性；

2. 支持左右兩側菜單：支持從屏幕的左側或右側分別展示抽屜菜單。通過 layout_gravity="start"（左側）和 layout_gravity="end"（右側）來指定；

3. 與 Toolbar 集成：可以與 Toolbar 和 ActionBarDrawerToggle 配合使用，在 Toolbar 上顯示圖標，通過點擊圖標打開或關閉抽屜；

4. 內建動畫效果：DrawerLayout 自動提供抽屜打開和關閉的動畫效果。主內容視圖可以根據抽屜的滑動進行遮擋或平移，增強用戶體驗；

5. 支持監聽抽屜事件：提供 DrawerListener，可以監聽抽屜的打開、關閉、滑動、狀態變化等事件，方便開發者根據抽屜狀態執行相關操作。

6. 適配不同屏幕大小：DrawerLayout 可以自動適配小屏和大屏設備，適用于手機和平板等不同尺寸的屏幕，支持響應式布局。

7. 結合 NavigationView 使用：常與 NavigationView 配合使用，后者提供了方便的菜單項管理、頭部布局和選中狀態功能，適合構建標準的側邊導航菜單。

我們來講講代碼，在代碼中通過講解它的屬性，布局等來學習：

<?xml version="1.0" encoding="utf-8"?>
<androidx.drawerlayout.widget.DrawerLayoutxmlns: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/main"android:layout_width="match_parent"android:layout_height="match_parent"tools:context=".MainActivity"><LinearLayoutandroid:layout_width="match_parent"android:orientation="vertical"android:layout_height="match_parent"><androidx.appcompat.widget.Toolbarandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:id = "@+id/toolbar"app:subtitle="子標題"app:title="標題"app:navigationIcon="@drawable/title"></androidx.appcompat.widget.Toolbar><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="Hello World!"android:layout_gravity="center"android:layout_marginTop="300dp"/></LinearLayout><com.google.android.material.navigation.NavigationViewandroid:layout_width="wrap_content"android:layout_height="match_parent"android:id = "@+id/nav_view"android:layout_gravity="start"app:headerLayout="@layout/nax_drawer_header"app:menu = "@menu/nav_drawer_menu"></com.google.android.material.navigation.NavigationView></androidx.drawerlayout.widget.DrawerLayout>

小知識點：

關于布局方面，我們需要學習兩點：

  • 這里我們可以看到，drawerlayout布局中，可以放置多個子布局，但是子布局的順序很重要：drawerlayout布局中，第一個子布局必須是app的主內容，后續的子布局才能是你的側邊導航欄；

官方規定：drawerlayout的第一個子view會被視為“主界面”，后續的view會被視為抽屜視圖，比如側邊欄；

  • DrawerLayout 最多只能有兩個直接子 View；

什么是直接子view，給大家舉個例子?

比如上圖，中間的兩個子view都是直接子view;

<DrawerLayout><LinearLayout>                <FrameLayout />          <NavigationView />        </LinearLayout>
</DrawerLayout>

在上圖中，<FrameLayout />?就不是直接子view了；

回顧代碼：

<DrawerLayout><FrameLayout /> or ConstraintLayout<NavigationView />
</DrawerLayout>

關于主界面中所需要用到的Toolbar:

第一個view:Toolbar

Toolbar 是 Android 中用于替代傳統 ActionBar 的一個可高度自定義的頂部導航欄控件。它通常位于屏幕頂部，承載著應用的標題、導航按鈕（如返回箭頭或抽屜菜單圖標）、操作菜單（如搜索、分享）等元素；

Toolbar 的特點：

  • 靈活可定制：可以自由設置布局、樣式、顏色和內容，比傳統 ActionBar 更加靈活；

  • 兼容性好：支持在不同 Android 版本中統一外觀；

  • 可嵌入布局中：不像 ActionBar 固定，Toolbar 可以作為普通視圖嵌入到任意布局，方便自定義設計；

  • 支持導航控件：例如左上角圖標，常用于控制 DrawerLayout 的開合；

總結一下：Toolbar 就是你 App 界面頂部的“工具欄”，負責承載導航和操作入口；

這里不做過多的介紹，簡要告訴大家屬性：

      <androidx.appcompat.widget.Toolbarandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:id = "@+id/toolbar"app:subtitle="子標題"app:title="標題"app:navigationIcon="@drawable/title"></androidx.appcompat.widget.Toolbar>

在這段代碼中：
比較生疏的屬性就三個：

  1. app:subtitle="子標題"    設置副標題，顯示在主標題下方，一般用來補充信息，比如當前子頁面名、狀態等。

  2. app:title="標題"         設置 Toolbar 的主標題，通常顯示應用名稱或當前頁面名稱
  3. app:navigationIcon="@drawable/title"   設置左側的導航圖標，比如常見的“返回箭頭”或“漢堡菜單”圖標，用于導航或打開 DrawerLayout 抽屜。

這是這么設置后的效果；

第二個布局是NavigationView，我們來系統的介紹一下吧；

NavigationView

主要介紹：

NavigationView 是 Android 支持庫中提供的一個專門用于配合 DrawerLayout 實現側邊導航菜單的控件。它本質上是一個可滾動的菜單容器，通常放在 DrawerLayout 的“抽屜”部分，用于顯示應用的導航條目。

它的主要作用：

  • 顯示菜單項：可通過 menu 屬性引用菜單 XML 文件（menu.xml），自動生成可點擊的導航項；

  • 支持添加頭部視圖：通過 app:headerLayout 屬性或 Java 代碼添加用戶頭像、昵稱、背景等內容；

  • 與 DrawerLayout 搭配：放在 DrawerLayout 的第二個子視圖中，用來顯示側邊導航欄；

  • 支持狀態高亮、點擊事件：點擊某個菜單項自動高亮，可以配合 NavigationItemSelectedListener 實現頁面跳轉；

  • 自帶 Material Design 風格：默認支持波紋點擊動畫、圖標與文本組合布局等；

   <com.google.android.material.navigation.NavigationViewandroid:layout_width="wrap_content"android:layout_height="match_parent"android:id = "@+id/nav_view"android:layout_gravity="start"app:headerLayout="@layout/nax_drawer_header"app:menu = "@menu/nav_drawer_menu"></com.google.android.material.navigation.NavigationView>
  • app:menu：引用一個菜單 XML 文件，定義導航項
  • app:headerLayout：引用一個布局 XML 文件，作為導航頭部
  • android:layout_gravity="start"：指定抽屜從哪邊滑出，通常是 start 表示左側，end代表右側；
  • itemIconTint, itemTextColor：設置菜單圖標和文字的顏色

app:menu：菜單的定義?

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"><itemandroid:id="@+id/it_title"android:title="更改頭像"/><itemandroid:id="@+id/it_name"android:title="修改昵稱"/><itemandroid:id="@+id/it_chatperson"android:title="在線人數"/><itemandroid:id="@+id/it_gotochat"android:title="去聊天"/><itemandroid:id="@+id/it_exit"android:title="退出"/>
</menu>

?app:headerLayout ：導航頭部

<?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="300dp"android:orientation="vertical"><ImageViewandroid:layout_width="70dp"android:layout_height="70dp"android:src = "@drawable/title1"android:layout_marginTop="100dp"android:layout_gravity="center"/><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:id = "@+id/tv_title"android:layout_marginTop="20dp"android:layout_gravity="center"android:text="個人中心"/>
</LinearLayout>

?關于監聽事件

    navigationView = findViewById(R.id.nav_view);Toolbar toolbar = findViewById(R.id.toolbar);setSupportActionBar(toolbar);DrawerLayout drawerLayout = findViewById(R.id.main);toolbar.setNavigationOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View view) {drawerLayout.openDrawer(Gravity.LEFT);}});

這是關于toolbar開啟側邊欄視圖的代碼：?

  • 獲取 toolbar，設置為當前 Activity 的 ActionBar；

  • setSupportActionBar(toolbar) 使 Toolbar 能使用 ActionBar 的功能，比如標題、返回按鈕、菜單等；

  • Toolbar 左上角“導航按鈕”的點擊事件監聽器；

  • 手動打開左側的抽屜（Gravity.LEFT 表示“左側抽屜”）；

? ?drawerLayout.openDrawer(Gravity.LEFT);這句手動打開抽屜視圖的代碼，同時我們也可以為按鈕設立點擊事件；

  drawerLayout.closeDrawer(Gravity.RIGHT);

同時我們也可以手動關閉側邊欄?；

下面是關于每個菜單項的點擊事件，我們可以利用點擊事件達到我們想要的結果；

  navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {@Overridepublic boolean onNavigationItemSelected(@NonNull MenuItem menuItem) {int id = menuItem.getItemId();if(id == R.id.it_chatperson){Toast.makeText(MainActivity.this,"chatperson",Toast.LENGTH_SHORT).show();}else if(id == R.id.it_exit){Toast.makeText(MainActivity.this,"exit",Toast.LENGTH_SHORT).show();}else if(id == R.id.it_gotochat){Toast.makeText(MainActivity.this,"gotochat",Toast.LENGTH_SHORT).show();}else if(id == R.id.it_name){Toast.makeText(MainActivity.this,"name",Toast.LENGTH_SHORT).show();}else if(id == R.id.it_title){Toast.makeText(MainActivity.this,"title",Toast.LENGTH_SHORT).show();}return true;}});

給 NavigationView 設置一個 菜單點擊事件監聽器setNavigationItemSelectedListener(...) 是 NavigationView 專用的方法；

最后完成的效果如下：?

本次分享到此結束！?

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/web/91605.shtml
繁體地址，請注明出處：http://hk.pswp.cn/web/91605.shtml
英文地址，請注明出處：http://en.pswp.cn/web/91605.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

lesson30：Python迭代三劍客：可迭代對象、迭代器與生成器深度解析

lesson30：Python迭代三劍客：可迭代對象、迭代器與生成器深度解析

目錄 一、可迭代對象&#xff1a;迭代的起點 可迭代對象的本質特征 可迭代對象的工作原理 自定義可迭代對象 二、迭代器&#xff1a;狀態化的迭代工具 迭代器協議與核心方法 迭代器的狀態管理 內置迭代器的應用 三、生成器&#xff1a;簡潔高效的迭代器 生成器函數&a…
閱讀更多...
實時語音流分段識別技術解析：基于WebRTC VAD的智能分割策略

實時語音流分段識別技術解析：基于WebRTC VAD的智能分割策略

引言 在現代語音識別應用中&#xff0c;實時處理音頻流是一項關鍵技術挑戰。不同于傳統的文件式語音識別&#xff0c;流式處理需要面對音頻數據的不確定性、網絡延遲以及實時性要求等問題。本文將深入解析一個基于WebRTC VAD&#xff08;Voice Activity Detection&#xff09;…
閱讀更多...
word中rtf格式介紹

word中rtf格式介紹

RTF&#xff08;Rich Text Format&#xff0c;富文本格式&#xff09;是一種由微軟開發的跨平臺文檔文件格式&#xff0c;用于在不同應用程序和操作系統之間交換格式化文本。以下是對RTF格式的簡要說明&#xff1a; RTF格式特點 跨平臺兼容性&#xff1a;RTF文件可以在多種文字…
閱讀更多...
Springboot 配置 doris 連接

Springboot 配置 doris 連接

Springboot 配置 doris 連接 一. 使用 druid 連接池 因為 Doris 的前端&#xff08;FE&#xff09;兼容了 MySQL 協議&#xff0c;可以像連 MySQL 一樣連 Doris。這是 Doris 的一個核心設計特性&#xff0c;目的是方便接入、簡化生態兼容。 首先需要引入 pom 依賴:<dependen…
閱讀更多...
Linux 系統啟動與 GRUB2 核心操作指南

Linux 系統啟動與 GRUB2 核心操作指南

Linux 系統啟動與 GRUB2 核心操作指南 Linux 系統的啟動過程是一個環環相扣的鏈條&#xff0c;從硬件自檢到用戶登錄&#xff0c;每一步都依賴關鍵組件的協作。其中&#xff0c;GRUB2 引導器和systemd 進程是核心樞紐&#xff0c;而運行級別則決定了系統的啟動狀態。以下是系統…
閱讀更多...
供應鏈分銷代發源碼：一站式打通供應商供貨、平臺定價、經銷商批發及零售環節

供應鏈分銷代發源碼：一站式打通供應商供貨、平臺定價、經銷商批發及零售環節

在當前復雜的市場環境中&#xff0c;供應鏈管理成為企業發展的關鍵。尤其對于電商平臺來說&#xff0c;高效、精準的供應鏈管理不僅能提升運營效率&#xff0c;還能增強市場競爭力。為了應對日益復雜的供應鏈挑戰&#xff0c;核貨寶供應鏈分銷代發系統應運而生&#xff0c;旨在…
閱讀更多...
機器學習、深度學習與數據挖掘：核心技術差異、應用場景與工程實踐指南

機器學習、深度學習與數據挖掘：核心技術差異、應用場景與工程實踐指南

技術原理與核心概念數據挖掘作為知識發現的關鍵技術&#xff0c;其核心在于通過算法自動探索數據中的潛在模式。關聯規則挖掘可以發現項目之間的有趣關聯&#xff0c;如經典的"啤酒與尿布"案例&#xff1b;聚類分析能夠將相似對象自動分組&#xff0c;常用于客戶細分…
閱讀更多...
《C++初階之STL》【stack/queue/priority_queue容器適配器：詳解 + 實現】（附加：deque容器介紹）

《C++初階之STL》【stack/queue/priority_queue容器適配器：詳解 + 實現】（附加：deque容器介紹）

【stack/queue/priority_queue容器適配器&#xff1a;詳解 實現】目錄前言&#xff1a;------------標準接口介紹------------一、棧&#xff1a;stack標準模板庫中的stack容器適配器是什么樣的呢&#xff1f;1. 棧的基本操作std::stack::topstd::stack::pushstd::stack::pop2…
閱讀更多...
Thymeleaf 模板引擎原理

Thymeleaf 模板引擎原理

Thymeleaf 的模板文件&#xff0c;本質上是標準的 HTML 文件&#xff0c;只是“加了標記&#xff08; th&#xff1a;&#xff09;的屬性”&#xff0c;讓模板引擎在服務端渲染時能 識別并處理 這些屬性&#xff0c;從而完成數據&#xff08;model&#xff09; 的填充。<!DO…
閱讀更多...
5、生產Redis高并發分布式鎖實戰

5、生產Redis高并發分布式鎖實戰

一、核心問題與解決方案 問題本質 #mermaid-svg-W1SnVWZe1AotTtDy {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-W1SnVWZe1AotTtDy .error-icon{fill:#552222;}#mermaid-svg-W1SnVWZe1AotTtDy .error-text{fill:#5…
閱讀更多...
CS231n-2017 Lecture8深度學習框架筆記

CS231n-2017 Lecture8深度學習框架筆記

深度學習硬件&#xff1a;CPU:CPU有數個核心&#xff0c;每個核心可以獨立工作&#xff0c;同時進行多個線程&#xff0c;內存與系統共享GPU&#xff1a;GPU有上千個核心&#xff0c;但每個核心運行速度很慢&#xff0c;適合并行做類似的工作&#xff0c;不能獨立工作&#xff…
閱讀更多...
以ros的docker鏡像為例，探討docker鏡像的使用

以ros的docker鏡像為例，探討docker鏡像的使用

標題以ros的docker鏡像為例&#xff0c;探討docker鏡像的使用&#xff08;待完善&#xff09; 1. docker介紹&#xff08;以ros工程距離&#xff09; &#xff08;1&#xff09;個人理解&#xff1a;docker就是一個容器&#xff0c;主要的作用就是將環境打包好&#xff0c;方…
閱讀更多...
Android Audio實戰——TimeCheck機制解析（十三）

Android Audio實戰——TimeCheck機制解析（十三）

上一篇文章我們雖然通過 tombstoned Log 推斷出 audioserver 崩潰的原因就是系統調用內核接口時發生阻塞，導致 TimeCheck 檢測超時異常而崩潰，但并沒有實質性的證據證明是 kernel 層出現問題導致的崩潰，因此這里我們繼續看一下 TimeCheck 的檢測原理。 一、TimeCheck機制 T…
閱讀更多...
飛機大戰小游戲

飛機大戰小游戲

1.視覺設計&#xff1a;采用柔和的藍紫色漸變背景&#xff0c;營造夢幻感飛機、敵機和子彈使用柔和的糖果色調添加了粒子爆炸效果&#xff0c;增強視覺反饋星星收集物增加游戲趣味性2.游戲機制&#xff1a;玩家使用左右方向鍵控制飛機移動空格鍵發射子彈P鍵暫停游戲擊落敵機獲得…
閱讀更多...
Linux 啟動服務腳本

Linux 啟動服務腳本

1. 創建命令文件# 創建可執行文件 touch 文件名稱 例&#xff1a; touch stopServer.sh2. 命令文件授權# 授權文件可執行權限 chmod 777 文件名稱 例&#xff1a; chmod 777 stopServer.sh3. 停止服務命令編寫#!/bin/bash# 獲取進程號 pidps -ef | grep -- /mnt/apache-tomcat-…
閱讀更多...
【華為機試】34. 在排序數組中查找元素的第一個和最后一個位置

【華為機試】34. 在排序數組中查找元素的第一個和最后一個位置

文章目錄34. 在排序數組中查找元素的第一個和最后一個位置描述示例 1&#xff1a;示例 2&#xff1a;示例 3&#xff1a;提示&#xff1a;解題思路算法分析問題本質分析雙重二分查找詳解左邊界查找過程右邊界查找過程算法流程圖邊界情況分析各種解法對比二分查找變種詳解時間復…
閱讀更多...
【網絡編程】WebSocket 實現簡易Web多人聊天室

【網絡編程】WebSocket 實現簡易Web多人聊天室

一、實現思路 Web端就是使用html JavaScript來實現頁面&#xff0c;通過WebSocket長連接和服務器保持通訊&#xff0c;協議的payload使用JSON格式封裝 服務端使用C配合第三方庫WebSocket和nlonlohmann庫來實現 二、Web端 2.1 界面顯示 首先&#xff0c;使用html來設計一個…
閱讀更多...
AI 驅動、設施擴展、驗證器強化、上線 EVM 測試網，Injective 近期動態全更新！

AI 驅動、設施擴展、驗證器強化、上線 EVM 測試網，Injective 近期動態全更新！

作為一個專注于金融應用、且具有高度可互操作性的高性能 Layer-1 區塊鏈&#xff0c;Injective 自誕生以來便為開發者提供有即插即用的技術模塊&#xff0c;以便開發者能夠更好地搭建新一代 Web3 金融類應用。談及項目發展的愿景和基本定位&#xff0c;創始團隊曾提到希望 Inje…
閱讀更多...
Qt-----初識

Qt-----初識

1. 什么是Qt定義&#xff1a;Qt是一個跨平臺的應用程序和用戶界面框架&#xff0c;主要用于開發具有圖形用戶界面的應用程序&#xff0c;同時也支持非GUI程序的開發。 編程語言&#xff1a;主要使用C&#xff0c;但也提供了對Python&#xff08;PyQt&#xff09;、JavaScript&a…
閱讀更多...
理解微信體系中的 AppID、OpenID 和 UnionID

理解微信體系中的 AppID、OpenID 和 UnionID

前言: 在開發微信相關的服務(如小程序,公眾號,微信開放平臺等)時,很多人都會接觸到幾個看起來相似但實際用途不同的額ID: AppiD, OpenID,UnionID. 搞清楚這三者的區別,是微信生態開發中的基本功,本文將從開發者視角觸發,深入淺出地解釋它們的關系,區別以及實際應用場景一.什么是…
閱讀更多...
最新文章

Copyright @ 2022~2023