【Android】UI拓展之滑动菜单、悬浮按钮、CoordinatorLayout布局等

news2024/11/14 3:58:29

文章目录

  • 一、滑动菜单
    • 1. 添加依赖
    • 2. 侧滑菜单内容
      • 2.1 headerLayout样式
      • 2.2 menu样式
    • 3. 主界面添加
    • 4. 关联actionbar与滑动菜单
  • 二、悬浮按钮
    • FloatingActionButton
  • 三、可交互提示
    • Snackbar
  • 四、能协调子视图的布局
    • CoordinatorLayout
  • 五、卡片式布局
    • CardView

一、滑动菜单

DrawerLayout 是一个特殊的布局容器，用于在屏幕的边缘创建一个可以滑动的菜单。它可以在屏幕的左边或右边滑出，并覆盖其内容。它通常用来实现抽屉式导航菜单。

NavigationView 是 DrawerLayout 内的一个视图，提供了侧滑菜单的实现。它用于显示应用的导航菜单，通常包含一个菜单列表或多个菜单项。

1. 添加依赖

  implementation("com.google.android.material:material:1.9.0")

2. 侧滑菜单内容

主要包含headerLayout和menu两部分

image-20240827221813415

2.1 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="200dp"
    android:gravity="bottom"
    android:orientation="vertical"
    android:padding="16dp">

    <ImageView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_marginTop="8dp"
        android:src="@drawable/userphoto1" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="用户名"
        android:textSize="30sp" />
</LinearLayout>

2.2 menu样式

和正常构建菜单方法一致

方法：

  1. 在res中新建菜单文件夹

image-20240827204813799

选择menuimage-20240827204903049

  1. 在新建的该文件夹中新建菜单文件

image-20240827204959576

  1. 具体菜单内容

    定义了侧滑菜单的内容，包含多个菜单项：

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    tools:showIn="nav_view">
    <group android:checkableBehavior="single">
        <item
            android:id="@+id/nav_collect"
            android:icon="@drawable/baseline_collections_24"
            android:title="收藏" />
        <item
            android:id="@+id/nav_photo"
            android:icon="@drawable/baseline_insert_photo_24"
            android:title="相册" />
        <item
            android:id="@+id/nav_about"
            android:icon="@drawable/baseline_bookmarks_24"
            android:title="关于"/>
    </group>
</menu>

3. 主界面添加

<?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:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <androidx.coordinatorlayout.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <com.google.android.material.appbar.AppBarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <androidx.appcompat.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:background="#252525"
                app:navigationIcon="@drawable/baseline_subject_24"
                app:title="抽屉菜单"
                app:titleTextColor="@color/white" />
        </com.google.android.material.appbar.AppBarLayout>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:text="主页"
            android:textSize="30dp" />

    </androidx.coordinatorlayout.widget.CoordinatorLayout>

    <com.google.android.material.navigation.NavigationView
        android:id="@+id/nav_view"
        android:layout_width="220dp"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:fitsSystemWindows="true"
        app:headerLayout="@layout/drawer_header"
        app:menu="@menu/nav_menu" />

</androidx.drawerlayout.widget.DrawerLayout>

这个布局文件是一个包含侧滑菜单（Drawer）的Android布局。以下是对各个部分的解析：

  1. DrawerLayout:
    • 根布局是一个DrawerLayout，它是一个常用于实现抽屉导航的布局容器。这个容器允许用户从屏幕的一侧滑出一个菜单。
  2. CoordinatorLayout:
    • DrawerLayout的第一个子布局是CoordinatorLayout。它通常用于协调多个子视图之间的交互，特别是当涉及到AppBarLayout和FloatingActionButton这样的子视图时。
  3. AppBarLayout:
    • CoordinatorLayout的第一个子视图是AppBarLayout，这是专门为Material Design应用程序的顶部栏（例如Toolbar）而设计的布局。
    • Toolbar: AppBarLayout内包含一个Toolbar，用于显示应用的顶部操作栏。Toolbar具有一个导航图标（左上角的汉堡图标，通常用于打开抽屉菜单）和一个标题。
  4. NavigationView:
    • DrawerLayout的第二个子视图是NavigationView，这是一个常用于实现抽屉菜单内容的视图。
    • NavigationView还引用了一个头部布局文件（drawer_header）和一个菜单文件（nav_menu），用于定义侧滑菜单的内容和项。

4. 关联actionbar与滑动菜单

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // 1. 获取 Toolbar、NavigationView 和 DrawerLayout 的引用
        Toolbar toolbar = findViewById(R.id.toolbar);
        NavigationView navigationView = findViewById(R.id.nav_view);
        DrawerLayout drawerLayout = findViewById(R.id.drawer_layout);

        // 2. 创建 ActionBarDrawerToggle 对象
        // 这个对象用于同步 DrawerLayout 和 Toolbar 的状态
        ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(
            this, // 当前 Activity
            drawerLayout, // DrawerLayout 对象
            toolbar, // Toolbar 对象
            R.string.open, // Drawer 打开的描述
            R.string.close // Drawer 关闭的描述
        );//需要在values的string中添加

        // 3. 同步状态
        toggle.syncState();

        // 4. 为 DrawerLayout 添加 DrawerListener
        // 这个监听器用于处理 Drawer 的打开和关闭事件
        drawerLayout.addDrawerListener(toggle);

        // 5. 设置 NavigationView 的菜单项点击事件监听器
        navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                // 当点击菜单项时，关闭 Drawer
                drawerLayout.closeDrawer(GravityCompat.START);
                // 显示点击了哪个菜单项的 Toast 提示
                Toast.makeText(MainActivity.this, "您点击了 " + item.getTitle(), Toast.LENGTH_SHORT).show();
                return true;
            }
        });
    }
}

二、悬浮按钮

FloatingActionButton

app:elevation 属性用于设置控件的阴影效果，即控件与其父布局的相对高度。通过调整 elevation 的值，可以改变控件的阴影强度，从而增强其视觉层次感。

app:backgroundTint 属性用于设置 FloatingActionButton 或其他 Material Components 控件的背景色

  <com.google.android.material.floatingactionbutton.FloatingActionButton
            android:id="@+id/fab"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom|end"
            android:layout_margin="30dp"
            android:elevation="8dp"
            android:src="@drawable/baseline_check_24"
            app:backgroundTint="#008000" />

image-20240827224809369

可添加点击事件

protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        FloatingActionButton fab = findViewById(R.id.fab);
        fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(MainActivity.this, "点击了悬浮按钮", Toast.LENGTH_SHORT).show();
            }
        });
    }

三、可交互提示

Toast，AlertDialog都属于可交互提示

Snackbar

在刚才的悬浮按钮做修改，点击按钮后提示照片删除

1724771636992

fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Snackbar.make(v, "删除了该照片", Snackbar.LENGTH_LONG).setAction("撤回", new View.OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        Toast.makeText(MainActivity.this, "照片已恢复", Toast.LENGTH_SHORT).show();
                    }
                }).show();
            }
        });

Snackbar.make()方法创建了一个Snackbar对象，调用该对象的setAction方法，设置一个可点击的动作按钮

。

  • make
public static Snackbar make(@NonNull View view, @NonNull CharSequence text, @IntDef({ LENGTH_SHORT, LENGTH_LONG }) int duration)
  • view: Snackbar 将依附的视图。通常是一个 View，例如 CoordinatorLayout 或 RelativeLayout。Snackbar 会在这个视图上显示。
  • text: 要显示在 Snackbar 上的文本内容。
  • duration: Snackbar 显示的持续时间，可以是 Snackbar.LENGTH_SHORT（短时间）或 Snackbar.LENGTH_LONG（长时间）。
  • setAction
public Snackbar setAction(CharSequence text, View.OnClickListener listener)
  • text: 要显示在 Snackbar 上的文本内容。
  • listener: 点击按钮时要调用的 OnClickListener。

四、能协调子视图的布局

CoordinatorLayout

CoordinatorLayout 是 Android 提供的一个高级布局容器，它扩展了 FrameLayout 的功能，并提供了与其子视图（如 AppBarLayout、FloatingActionButton、Snackbar 等）之间的协调和交互的能力。CoordinatorLayout 的主要作用

  1. 实现复杂的交互效果，比如滚动联动、浮动操作按钮的显示/隐藏等。

  2. 支持 Material Design 动画和过渡：它与 FloatingActionButton 等视图搭配，可以实现平滑的动画和过渡效果。

比如这里使用了CoordinatorLayout，浮动按钮会自动向上协调

未使用：

image-20240828004010335

使用：

image-20240830205646946

<androidx.coordinatorlayout.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">
</androidx.coordinatorlayout.widget.CoordinatorLayout>

五、卡片式布局

CardView

CardView 是 Android 中一个常用的控件，用于在界面上显示卡片样式的布局。它提供了一个带阴影和圆角效果的容器，使得内容更加美观。CardView 可以包含任何布局，并且通常与 RecyclerView 一起使用，以显示一系列卡片式的项。

在你的布局文件中定义 CardView

<androidx.cardview.widget.CardView
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="16dp"
    app:cardCornerRadius="8dp"
    app:cardElevation="4dp">

    <!-- CardView 内部的布局，可以是任何布局 -->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:padding="16dp">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Card Title"
            android:textSize="18sp"
            android:textColor="@android:color/black"/>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="This is a simple description of the card."
            android:textSize="14sp"
            android:textColor="@android:color/darker_gray"/>

    </LinearLayout>

</androidx.cardview.widget.CardView>
  • app:cardCornerRadius: 设置卡片的圆角半径。
  • app:cardElevation: 设置卡片的阴影高度。

在 Java 代码中对 CardView 进行操作，例如更改背景颜色、调整圆角等：

CardView cardView = findViewById(R.id.cardView);
cardView.setCardBackgroundColor(Color.RED); // 设置卡片背景颜色
cardView.setRadius(12f); // 设置圆角半径
cardView.setCardElevation(6f); // 设置阴影高度

参考：

  1. 《第一行代码》

感谢您的阅读
如有错误烦请指正

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2090403.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

微信小程序服务器费用一年多少？微信小程序开发

微信小程序服务器费用一年多少？微信小程序开发

在互联网时代&#xff0c;微信小程序已成为众多企业和个人拓展业务、提升服务品质的有力工具。然而对于许多准备涉足小程序领域的朋友来说【开发一个小程序大概需要多少钱】以及【微信小程序服务器费用一年需要多少】是首要关注的问题&#xff0c;今天飞飞将和你们分享小程序服…
阅读更多...
【LoRa】SetLoRaSymbNumTimeout寄存器

【LoRa】SetLoRaSymbNumTimeout寄存器

目录 1 前言2 实验验证疑问2.1 SetRx的timeout模式和SetLoRaSymbNumTimeout2.1.1 实验12.1.2 实验22.1.3 结论 2.2 SetRx的single与continuous模式和SetLoRaSymbNumTimeout2.2.1 实验12.2.2 实验22.2.3 实验3 3 小结 1 前言 本章节介绍LoRa芯片的寄存器SetLoRaSymbNumTimeout&…
阅读更多...
服务器部署前后端分离项目vue+springboot

服务器部署前后端分离项目vue+springboot

步骤 1-安装java&#xff0c;mysql&#xff0c;nginx环境 服务器先安装宝塔 yum install -y wget && wget -O install.sh https://download.bt.cn/install/install_lts.sh && bash install.sh ed8484bec安装后输入bt 14查看内网链接打开宝塔页面 java&…
阅读更多...
uniapp icons图标不显示的问题解决

uniapp icons图标不显示的问题解决

如图所示 在uniapp开发中 突然发现icons组件不显示图标了 &#xff0c;而且没什么报错 这是为什么 其实这最大的原因就是你上面的代码在取值上没有做好null的判断 导致参数取值报错 因此影响了页面正常的渲染 导致下面的图标都不显示
阅读更多...
vsCode多文件标签栏换行显示

vsCode多文件标签栏换行显示

1.文件——首选项——点‘设置’ 2.输入 wrap tabs 并勾选Workbench › Editor: Wrap Tabs
阅读更多...
安装MySQL，navicat以及Django配置遇到的一些问题

安装MySQL，navicat以及Django配置遇到的一些问题

MySQL安装问题 安装MySQL按照了此文章&#xff1a; MySQL数据库下载及安装教程&#xff08;最最新版&#xff09;_mysql下载安装-CSDN博客https://blog.csdn.net/weixin_39289696/article/details/128850498首先是遇到了starting the server红色叉号显示 按照上面文章的介绍…
阅读更多...
《机器学习》【项目】 爬虫爬取数据、数据分词、贝叶斯算法、判断分类 ＜完整实战详解＞ （全篇完结）

《机器学习》【项目】 爬虫爬取数据、数据分词、贝叶斯算法、判断分类 ＜完整实战详解＞ （全篇完结）

目录 一、回顾爬虫 1、什么是爬虫 2、实操爬虫 1&#xff09;寻找标签位置 2&#xff09;爬取苏某某购产品好评数据 运行代码&#xff1a; 3&#xff09;爬取差评内容 二、数据分词 1、将获取到的好评和差评数据进行初步分词 1&#xff09;初步分词 2&#xff09;内…
阅读更多...
华为云征文｜1分钟熟悉Flexus X实例基础操作

华为云征文｜1分钟熟悉Flexus X实例基础操作

前言 随着云计算技术的普及&#xff0c;越来越多的企业和个人开始将业务迁移到云端。华为云作为国内领先的云服务提供商&#xff0c;推出了高性能、高可用性的Flexus云服务器X&#xff0c;以满足不同用户的需求。本文将详细介绍如何购买Flexus云服务器X以及初次使用时的基本操…
阅读更多...
物联网平台组件2： 平台校验规则

物联网平台组件2： 平台校验规则

加载不通的规则引擎配置文件&#xff0c;使用DynamicExpresso校验采集数据&#xff0c;得出是否告警 rules.json {"Rules": [{"Description": "温度超过阈值警报","Condition": "temperature > 30","Action":…
阅读更多...
2024 Xiangtan University Summer Camp-Div.2 个人题解 （待补完）

2024 Xiangtan University Summer Camp-Div.2 个人题解 （待补完）

前言&#xff1a; 教练突然发在群里的一个比赛&#xff0c;想到自己好像也没什么事干&#xff0c;就参加了个div2&#xff08;太菜了&#xff09;&#xff0c;我看着好像没啥人发这玩意的题解&#xff0c;cf上比赛结束了也看不了别人代码&#xff0c;就将自己的写出题的代码分享…
阅读更多...
鸿蒙Next 单元测试框架——hypium

鸿蒙Next 单元测试框架——hypium

一 框架概述 单元测试框架(hypium)是HarmonyOS上的测试框架&#xff0c;提供测试用例编写、执行、结果显示能力&#xff0c;用于测试系统或应用接口。 表1 单元测试框架功能特性 二 安装使用 目前hypium以npm包的形式发布, 因此需要在Deveco Studio 工程级package.json内配…
阅读更多...
Javascript集合引用类型（一）

Javascript集合引用类型（一）

思维导图 Javascript集合引用类型(一)思维导图 对象 数组与定型数组 Map、WeakMap、Set以及WeakSet类型 1. Object 创建的对象的两种方式&#xff1a;new 操作符和对象字面量 使用对象字面量的更多&#xff0c;因为代码量少&#xff1b; 2. Array Array构造函数,es6新增…
阅读更多...
android studio avd设置中文输入法和时间

android studio avd设置中文输入法和时间

设置语言 打开avd 找到设置 找到语言 找到系统语言 把中文移动到第一个就是默认语言了 如果想删除英文可以点击三个点有个移除 随便找个输入框&#xff0c;默认就是中文了 设置时间 点击设置->系统->日期和时间 关掉自动设置 选择一下时区为上海即可
阅读更多...
【Datawhale X 李宏毅苹果书 AI夏令营】深度学习自适应学习率(AdaGrad/RMSProp/Adam)及其调度

【Datawhale X 李宏毅苹果书 AI夏令营】深度学习自适应学习率(AdaGrad/RMSProp/Adam)及其调度

1、自适应学习率 理论上&#xff1a;在训练一个网络&#xff0c;训练到现在参数在临界点附近&#xff0c;再根据特征值的正负号判断该 临界点是鞍点还是局部最小值实际上&#xff1a;①在训练的时候&#xff0c;要走到鞍点或局部最小值非常困难&#xff1b;②多数还未走到临界…
阅读更多...
第十周：机器学习笔记

第十周：机器学习笔记

第十周机器学习周报 摘要Abstract机器学习——self-attention&#xff08;注意力机制&#xff09;1. 为什么要用self-attention2. self-attention 工作原理2.1 求α的两种方式2.2 attention-score&#xff08;关联程度&#xff09; Pytorch学习1. 损失函数代码实战1.1 L1loss&a…
阅读更多...
EmguCV学习笔记 VB.Net 8.4 pyrMeanShiftFiltering

EmguCV学习笔记 VB.Net 8.4 pyrMeanShiftFiltering

版权声明&#xff1a;本文为博主原创文章&#xff0c;转载请在显著位置标明本文出处以及作者网名&#xff0c;未经作者允许不得用于商业目的。 EmguCV是一个基于OpenCV的开源免费的跨平台计算机视觉库,它向C#和VB.NET开发者提供了OpenCV库的大部分功能。 教程VB.net版本请访问…
阅读更多...
如何构建大型超市数据处理系统？Java SpringBoot搭配MySQL，实现高效数据管理！

如何构建大型超市数据处理系统？Java SpringBoot搭配MySQL，实现高效数据管理！

&#x1f34a;作者&#xff1a;计算机毕设匠心工作室 &#x1f34a;简介&#xff1a;毕业后就一直专业从事计算机软件程序开发&#xff0c;至今也有8年工作经验。擅长Java、Python、微信小程序、安卓、大数据、PHP、.NET|C#、Golang等。 擅长&#xff1a;按照需求定制化开发项目…
阅读更多...
深入了解Pod（一）

深入了解Pod（一）

一、pod的配置文件 Pod配置文件的属性说明 属性名称 取值类型 是否必须 取值说明 version String √ 版本号 &#xff0c;例如V1 kind String √ Pod metadata Object √ 元数据 metadata.name String √ Pod名称 metadata.namespace String √…
阅读更多...
分销渠道|中小企业可以有推广计划吗？

分销渠道|中小企业可以有推广计划吗？

大家好&#xff0c;我是林叔&#xff0c;专注于分享SaaS企业渠道分销的实战经验。今天&#xff0c;我们来聊聊一个常被中小企业主忽视但极具潜力的营销策略——推广计划。很多人可能觉得推广计划是大企业的专利&#xff0c;但实际上&#xff0c;对于中小企业而言&#xff0c;它…
阅读更多...
pycharm怎样关联anaconda虚拟环境.conda executable not found

pycharm怎样关联anaconda虚拟环境.conda executable not found

刚下载的pycharm和anaconda怎样进行关联。 打开pycharm时&#xff0c;点击右侧的conda环境时&#xff0c;出现anaconda.conda executable not found&#xff0c;说明你的anaconda和pycharm没有进行关联。 第一步&#xff1a;重启电脑 第二步&#xff1a;点击圆圈中的文件夹按…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023