iis服务器助手广告
返回顶部
首页 > 资讯 > 移动开发 >AndroidDrawerLayout布局与NavigationView导航菜单应用
  • 453
分享到

AndroidDrawerLayout布局与NavigationView导航菜单应用

AndroidDrawerLayout布局AndroidNavigationView导航菜单 2023-01-06 12:01:39 453人浏览 八月长安
摘要

目录DrawerLayoutNavigationViewAndroid:src与app:srcCompatfitsSystemwindows 现在 Android Studio 已经

现在 Android Studio 已经直接提供左滑菜单功能,只需要在创建新项目时选择 Navigation Drawer Activity 就可以直接创建一个有左滑菜单功能的 APP。

DrawerLayout

DrawerLayout 是 support-v4 Library 包中实现了侧滑菜单效果的控件,可以说 drawerLayout 是因为第三方控件如 MenuDrawer 等的出现之后,Google 借鉴而出现的产物。DrawerLayout 分为侧边菜单和主内容区两个部分,侧边菜单可以根据手势展开与隐藏(drawerLayout 自身特性),主内容区可以随着菜单的点击而变化。

1. 抽屉式导航栏是显示应用主导航菜单的界面面板。当用户触摸应用栏中的抽屉式导航栏图标或从屏幕的左边缘滑动手指时,就会显示抽屉式导航栏;

2. 抽屉式导航栏图标会显示在使用 DrawerLayout 的所有顶级目的地上。顶级目的地是应用的根级目的地。它们不会在应用栏中显示向上按钮。

3. 要添加抽屉式导航栏,请先声明 DrawerLayout 为根视图。在 DrawerLayout 内,为主界面内容以及包含抽屉式导航栏内容的其他视图添加布局。

4. 例如,以下布局使用含有两个子视图的 DrawerLayout: 包含主要内容的 NavHostFragment 和适用于抽屉式导航栏内容的 NavigationView。

<?xml version="1.0" encoding="utf-8"?>
<!-- Use DrawerLayout as root container for activity -->
<android.support.v4.widget.DrawerLayout
    xmlns:android="Http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">
    <fragment
        android:name="androidx.navigation.fragment.NavHostFragment"
        android:id="@+id/nav_host_fragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:defaultNavHost="true"
        app:navGraph="@navigation/mobile_navigation" />
    <android.support.design.widget.NavigationView
        android:id="@+id/nav_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:fitsSystemWindows="true" />
</android.support.v4.widget.DrawerLayout>

android:name 指定 NavHost 的实现类,这里是 NavHostFragment;

app:defaaultNavHost="true" 拦截系统返回键,当用户按下返回键时,系统会将正在展示的 Fragment 返回。

app:navGraph 关联导航图;mobile_navigation.xml 是放在 res --> navigation 文件加里,是一个包含导航目的地(fragment)的菜单;

mobile_navigation.xml 具体内容

<?xml version="1.0" encoding="utf-8"?>
<navigation 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/mobile_navigation"
    app:startDestination="@+id/nav_home">
    <fragment
        android:id="@+id/nav_home"
        android:name="com.example.leftnavigationbar.ui.home.HomeFragment"
        android:label="@string/menu_home"
        tools:layout="@layout/fragment_home" />
    <fragment
        android:id="@+id/nav_gallery"
        android:name="com.example.leftnavigationbar.ui.gallery.GalleryFragment"
        android:label="@string/menu_gallery"
        tools:layout="@layout/fragment_gallery" />
    <fragment
        android:id="@+id/nav_slideshow"
        android:name="com.example.leftnavigationbar.ui.slideshow.SlideshowFragment"
        android:label="@string/menu_slideshow"
        tools:layout="@layout/fragment_slideshow" />
</navigation>

android:id 必填项,后面 fragment跳转的时候要用到;

android:name Fragment 的全路径;

android:label 要跳转的 Fragment 在菜单里的名字

tools:layout Fragment 的布局;

NavigationView

NavigationView 表示应用程序的标准导航菜单,菜单内容可以由菜单资源文件填充。NavigationView 通常放在 DrawerLayout 中,可以实现侧滑效果的 UI 。DrawerLayout 布局可以有3个子布局,第一个布局必须是主界面而且不可以不写,其他2个布局就是左、右两个侧滑布局,左右两个侧滑布局可以只写其中一个。

android:laoyout_gravity 值为 start 则是从左侧滑出,值为 end 则是从右侧滑出;

android:layout_gravity="start"
android:layout_gravity="end"

app:headerLayout 给 NavigationView 设置头文件;

app:headerLayout="@layout/nav_header_main"

nav_header_man.xml 是包含头部布局样式的布局文件。

app:menu NavigationView 是通过菜单形式在布局中放置元素的,值为自己创建的菜单文件;

app:menu="@menu/activity_main_drawer"

在 src 下新建一个 menu 文件夹,activity_main_drawer.xml 是放在 menu 下的菜单布局文 件。里面是 Home / Gallery / Slideshow 等 item。可以设置每个 item 的 title、icon等。

app:itemIconTint 设置菜单图标的颜色;

app:itemTextColor 设置菜单文字的颜色;

app:itemBackground 设置菜单背景的颜色;

android:src与app:srcCompat

二者几乎没有区别,都是加载图片资源。

app:srcCompat将矢量可绘制对象集成到应用程序中。矢量可绘制对象允许您用XML中定义的单个矢量图形替换多个png资产。从Android支持库23.3.0开始,支持向量可绘制对象只能通过加载app:srcCompat。

app:srcCompat设置一个可绘制对象作为此ImageView的内容,它将以其原始大小显示。

fitsSystemWindows

android:fitsSystemWindows="true" 实现沉浸式状态栏效果。

android 手机顶部用于显示各种通知和状态信息的这个栏叫做状态栏。通常情况下,我们应用程序的内容都是显示在状态栏下方的,但是为了更好的视觉效果,我们希望将应用程序顶部的背景颜色延申到状态栏的背后,这种效果就称之为沉浸式状态栏。

把android:fitsSystemWindows 属性设置为 true 为打开沉浸式状态栏效果,false 为关闭沉浸式状态栏效果。同时需要在逻辑代码里把状态栏的背景改成透明色,才能看到效果。加上如下代码:

getWindow().setStatusBarColor(Color.TRANSPARENT);

注意:android:fitsSystemWindows="true" 顶级布局必须是 CoordinatorLayout,否则也看不到效果。

到此这篇关于Android DrawerLayout布局与NavigationView导航菜单应用的文章就介绍到这了,更多相关Android DrawerLayout与NavigationView内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: AndroidDrawerLayout布局与NavigationView导航菜单应用

本文链接: https://www.lsjlt.com/news/176984.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • AndroidDrawerLayout布局与NavigationView导航菜单应用
    目录DrawerLayoutNavigationViewandroid:src与app:srcCompatfitsSystemWindows 现在 Android Studio 已经...
    99+
    2023-01-06
    Android DrawerLayout布局 Android NavigationView导航菜单
  • html中如何使用UL列表布局导航菜单
    这篇文章给大家分享的是有关html中如何使用UL列表布局导航菜单的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。使用UL列表布局导航菜单通常网站都会有导航菜单,你可以用这样的方式定义:<div id...
    99+
    2023-06-27
  • 如何使用HTML和CSS创建一个响应式导航菜单布局
    导航菜单是网站设计中非常重要的一个元素,它能够帮助用户快速浏览并导航到网站的不同部分。随着移动设备的普及,响应式设计也成为了必要的要素之一,因为在不同大小的屏幕上,导航菜单的布局和样式需要调整以适应不同设备。在本文中,我将向您展示如何使用H...
    99+
    2023-10-21
    CSS html 响应式导航菜单
  • css3与html5实现响应式导航菜单效果
    本篇内容介绍了“css3与html5实现响应式导航菜单效果”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!此...
    99+
    2024-04-02
  • CSS布局技巧:实现圆形导航菜单的最佳实践
    在现代网页设计中,导航菜单是一个很重要的元素。为了提升用户体验和视觉吸引力,许多设计师选择使用圆形导航菜单。本文将介绍如何使用CSS实现圆形导航菜单的最佳实践,并提供具体的代码示例。使用HTML创建导航菜单的基本结构首先,我们需要使用HTM...
    99+
    2023-10-21
    最佳实践 CSS布局 圆形导航
  • 利用CSS实现响应式导航菜单
    利用CSS实现响应式导航菜单随着移动设备的普及,越来越多的网站需要适应不同尺寸的屏幕来提供更好的用户体验。在移动设备上,由于屏幕空间有限,传统的水平导航菜单可能会在小屏幕上显示不全或导致用户需要不断滑动屏幕来查看完整的菜单项。因此,响应式导...
    99+
    2023-11-21
    响应式 导航 CSS
  • 如何使用HTML和CSS实现一个水平滚动导航菜单布局
    如何使用HTML和CSS实现一个水平滚动导航菜单布局在网页设计中,导航菜单是一个非常重要的元素,它可以方便用户浏览和导航网站的内容。而水平滚动导航菜单是一种常见的导航菜单布局,可以在有限的水平空间内显示更多的菜单项,给用户更多的选项。本文将...
    99+
    2023-10-24
    CSS html 实现
  • 如何使用HTML和CSS实现一个具有固定导航菜单的布局
    如何使用 HTML 和 CSS 实现一个具有固定导航菜单的布局在现代网页设计中,固定导航菜单是常见的布局之一。它可以使导航菜单始终保持在页面顶部或侧边,使用户可以方便地浏览网页内容。本文将介绍如何使用 HTML 和 CSS 实现一个具有固定...
    99+
    2023-10-26
    CSS html 标签 结构 元素
  • 如何使用CSS3制作响应式导航菜单
    这篇文章主要介绍“如何使用CSS3制作响应式导航菜单”,在日常操作中,相信很多人在如何使用CSS3制作响应式导航菜单问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”如何使用CS...
    99+
    2024-04-02
  • 如何使用jquery实现HTML5响应式导航菜单
    这篇文章将为大家详细讲解有关如何使用jquery实现HTML5响应式导航菜单,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。通过jquery+...
    99+
    2024-04-02
  • CSS中如何实现自适应导航菜单
    小编给大家分享一下CSS中如何实现自适应导航菜单,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!html <nav class="nav">...
    99+
    2024-04-02
  • Vue使用element-ui实现菜单导航
    本文实例为大家分享了Vue使用element-ui实现菜单导航的具体代码,供大家参考,具体内容如下 效果图 目录截图 安装vue-router 和 element-ui vue-...
    99+
    2024-04-02
  • vue.js使用Element-ui实现导航菜单
    本文实例为大家分享了vue.js使用Element-ui中实现导航菜单的具体代码,供大家参考,具体内容如下 写这个的原因是因为当时写这个功能时候element只有效果,但是功能没有实...
    99+
    2024-04-02
  • 用jquery和css3实现的响应式二级导航菜单
    本篇内容介绍了“用jquery和css3实现的响应式二级导航菜单”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所...
    99+
    2024-04-02
  • CSS Positions布局与网页导航的优化技巧
    在网页设计与开发中,布局和导航是两个非常重要的方面。合理的布局可以使网页看起来整洁、美观,而优化的导航则可以提高用户的体验和效率。在这篇文章中,我们将介绍CSS Positions布局和网页导航的一些优化技巧,并提供具体的代码示例。一、CS...
    99+
    2023-10-21
    布局 CSS Positions 网页导航
  • 如何用CSS实现三级导航菜单
    这篇文章主要讲解了“如何用CSS实现三级导航菜单”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“如何用CSS实现三级导航菜单”吧!这是一款CSS导航菜单,三级...
    99+
    2024-04-02
  • 怎么用css实现橙色导航菜单
    本篇内容介绍了“怎么用css实现橙色导航菜单”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!这是一款橙色风格...
    99+
    2024-04-02
  • 制作响应式导航菜单:CSS属性的实用技巧
    在现代网页设计中,响应式设计已经变得十分重要,因为它能够使网站在不同大小的屏幕上都能够正确地显示。在响应式设计中,导航菜单是至关重要的一个部分。本文将介绍制作响应式导航菜单的CSS属性的实用技巧,并提供具体的代码示例,希望对你的网站设计有所...
    99+
    2023-11-18
    响应式 导航 CSS属性
  • 怎么用CSS+XHTML实现二级导航菜单
    这篇文章主要讲解了“怎么用CSS+XHTML实现二级导航菜单”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“怎么用CSS+XHTML实现二级导航菜单”吧!这是...
    99+
    2024-04-02
  • 纯CSS实现响应式导航菜单的实现步骤
    步骤1:HTML结构首先,我们需要设置导航菜单的HTML结构。以下是一个简单的示例:3426a61349107fbcb0f79bdfbaa6f3c8 0e0f44151592e0d322915dad88a0a373<li class...
    99+
    2023-10-21
    导航菜单 响应式 CSS
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作