【Android】Material Design编写更好的UI

news2024/11/14 14:32:07

Toolbar

对于控件ActionBar我们非常熟悉，就是我们常见的标题栏，但ActionBar只能位于活动的顶部，因此我们更建议使用Toolbar。在新建一个项目的时候都是默认显示ActionBar，我们要使用Toolbar就需要先将标题栏改为不显示

先来看看界面各个部位的属性：

在这里插入图片描述

colorAccent：不只用来指定这样一个按钮的颜色，而是更多表达了一个强调的意思，例如一些控件的选中状态也会使用colorAccent的颜色

基本使用：

接下来就看看Toolbar的使用：

<androidx.appcompat.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="@color/black"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>

layout_height：这个属性我们非常熟悉了，但对于后面进行一下解释，?attr/actionBarSize 是一个主题属性引用，它引用了当前主题中定义的 ActionBar 的标准高度

android:theme：将 Toolbar 的主题设置为暗色主题

app:popupTheme：当我们为标题添加菜单按钮的时候按钮也会是暗色的主题，页面就会非常不和谐，因此将标题设置为淡色主题

接下来就看看主活动当中的设置：

Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
ActionBar actionBar = getSupportActionBar();
if (actionBar != null) {
    actionBar.setDisplayHomeAsUpEnabled(true); /*actionBar.setHomeAsUpIndicator(R.drawable.ic_launcher_foreground);*/
}

setDisplayHomeAsUpEnabled()：设置了 ActionBar 的 homeAsUp 属性为 true。homeAsUp 属性的作用是让 ActionBar 的左侧显示一个向上导航的按钮（通常是一个箭头图标），点击这个按钮可以触发向上导航的行为。调用这个方法并传入 true 会启用这个按钮。如果用户点击这个按钮，它会调用 onOptionsItemSelected 方法，并传入 android.R.id.home 作为 itemId 参数。你可以在这个方法中处理点击事件，比如导航回上一个 Activity。

setHomeAsUpIndicator()：就是为这个按钮设置图标，当我们不设置的时候就会使用默认的图标，运行程序，如下图所示：

在这里插入图片描述

尝试为左上角的导航按钮注册点击事件，使按下按钮但回到上一个活动：

@Override
public boolean onOptionsItemSelected(@NonNull MenuItem item) {
    //android.R.id.home 是 Android 框架中定义的一个资源 ID，它代表了 ActionBar 中的“向上”或“返回首页”按钮的点击事件的ID
    if (item.getItemId() == android.R.id.home) {
        finish();
        return true;
    }
    return super.onOptionsItemSelected(item);
}

添加菜单：

我们先设置一个目录：

<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <item
        android:id="@+id/home"
        android:icon="@drawable/ic_launcher_foreground"
        android:title="home"
        app:showAsAction="always"/>

    <item
        android:id="@+id/find"
        android:icon="@drawable/ic_launcher_foreground"
        android:title="find"
        app:showAsAction="ifRoom"/>

    <item
        android:id="@+id/my"
        android:icon="@drawable/ic_launcher_foreground"
        android:title="my"
        app:showAsAction="never"/>
</menu>

将目录加载在Toolbar上：

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    getMenuInflater().inflate(R.menu.menu_main, menu);
    return true;
}

此时运行程序：

在这里插入图片描述

在这里插入图片描述

为什么会出现这样的分布，就是我们在设置目录的时候设置的app:showAsAction属性，

app:showAsAction 属性可以设置的一些值及其含义：

  • always: 总是显示在 Toolbar 上。不论 Toolbar 上有多少其他菜单项，这个菜单项都会直接显示在 Toolbar 上
  • ifRoom: 如果 Toolbar 上有足够空间，就显示在 Toolbar 上。如果空间不足，它会被放置在溢出菜单（Overflow Menu）中
  • never: 从不直接显示在 Toolbar 上，总是位于溢出菜单中

滑动菜单

DrawerLayout

NavigationView

先给大家介绍如何将一个图片设置为圆形，首先需要添加依赖：

implementation("de.hdodenhof:circleimageview:3.1.0")
  1. 首先我们制定一个目录，将所有的子目录放在一个group（组）当中，为其设置属性为single：
<menu xmlns:android="http://schemas.android.com/apk/res/android">

    <group android:checkableBehavior="single">
        <item
            android:id="@+id/home1"
            android:icon="@drawable/ic_launcher_foreground"
            android:title="find"/>

        <item
            android:id="@+id/find1"
            android:icon="@drawable/ic_launcher_foreground"
            android:title="find"/>

        <item
            android:id="@+id/my1"
            android:icon="@drawable/ic_launcher_foreground"
            android:title="my"/>
    </group>

</menu>

android:checkableBehavior属性补充：

  1. None: 这是默认值。当设置为 None 时，视图可以独立地被选中或取消选中，不会影响其他具有相同 android:checkable 属性的视图。
  2. Single: 当设置为 Single 时，如果一个视图被选中，其他所有具有相同 android:checkable 属性的视图将自动取消选中。这个行为通常用于单选按钮（RadioButton）组，确保用户在一组选项中只能选择一个。
  3. All: 这个值实际上并不存在于 android:checkableBehavior 属性中。可能是你想要表达的是 Toggle 行为，当设置为 Toggle 时，视图会在被点击时在选中和未选中状态之间切换，这通常用于复选框（CheckBox）
  1. 我们为滑倒出来的布局设置一个头布局：
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:padding="10dp"
    android:layout_height="match_parent">

    <de.hdodenhof.circleimageview.CircleImageView
        android:id="@+id/iconimg"
        android:layout_width="70dp"
        android:layout_height="70dp"
        android:src="@drawable/draw1"
        android:layout_centerInParent="true"/>

    <TextView
        android:id="@+id/mailtext"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentStart="true"
        android:layout_alignParentBottom="true"
        android:layout_marginStart="10dp"
        android:layout_marginBottom="241dp"
        android:text="123456789@qq.com"
        android:textSize="15sp" />

    <TextView
        android:id="@+id/userText"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/iconimg"
        android:layout_alignParentStart="true"
        android:layout_marginStart="20dp"
        android:layout_marginTop="153dp"
        android:gravity="start"
        android:text="自然醒"
        android:textSize="15sp" />

</RelativeLayout>
  1. 修改活动中的布局，将之前的线性布局转换为：
<com.google.android.material.navigation.NavigationView
    android:id="@+id/nav_view"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:layout_gravity="start"
    app:headerLayout="@layout/nav_header"
    app:menu="@menu/nav_menu" />
  1. 此时我们就可以通过向右划动将布局显示出来，修改活动的代码：
NavigationView navigationView = (NavigationView) findViewById(R.id.nav_view);
//将一开始的选择默认设置为find1
navigationView.setCheckedItem(R.id.find1);
//注册选项的点击事件
navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
    @Override
    public boolean onNavigationItemSelected(@NonNull MenuItem menuItem) {
        drawrLayout.closeDrawers();
        return true;
    }
});

运行程序：

在这里插入图片描述

悬浮按钮和可交互提示

FloatingActionButton

这个控件可以轻松的实现悬浮按钮的效果，使用与Button一样

<com.google.android.material.floatingactionbutton.FloatingActionButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom|end"
    android:layout_margin="30dp"
    android:src="@drawable/draw11"
    //设置悬浮的高度                                                         android:elevation="8dp"/>

在这里插入图片描述

SnackBar

在前面我们经常使用Toast来提示用户，但并没有让用户有选择的权力。这个控件就可以让用户可以根据提示进行选择：

FloatingActionButton floatingActionButton = (FloatingActionButton) findViewById(R.id.fab);
floatingActionButton.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        Snackbar.make(v, "data delete", Snackbar.LENGTH_SHORT)
                .setAction("Undo", new View.OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        Toast.makeText(DrawrLayout.this, "data restored", Toast.LENGTH_SHORT).show();
                    }
                }).show();
    }
});

此时运行程序：

在这里插入图片描述

按下悬浮按钮就会出现提示，无论你是否按下UNDO按钮到时间都会消失，当按下UNDO按钮就会根据我们的代码出现Toast提示。

CoordinatorLayout

相当于一个增强版的Framelayout,可以监听页面的子控件，然后做出合理响应。例如在上面的示例当中，当悬浮窗位于页面的右下角，按下悬浮按钮，提示弹窗弹出的时候就会遮住一部分按钮，看起来体验非常不好，当布局设置为CoordinatorLayout，按下悬浮按钮，提示弹出的时候按钮也会相应的向上移动。

卡片式布局

实际上MaterialCardView也属于FrameLayout，只是额外提供了阴影和圆角等效果。让内容显示在一张卡片当中，拥有圆角和投影

CardView

  1. 先设置RecyclerView子布局：
<com.google.android.material.card.MaterialCardView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_margin="5dp"
    app:cardCornerRadius="4dp">

    <LinearLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <ImageView
            android:id="@+id/FruitImage"
            android:layout_width="match_parent"
            android:layout_height="100dp"
            android:scaleType="centerCrop"/>

        <TextView
            android:id="@+id/FruitText"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:layout_margin="5dp"
            android:textSize="16sp"/>

    </LinearLayout>

</com.google.android.material.card.MaterialCardView>
  1. 与RecyclerView的制作一样，运行程序：

在这里插入图片描述

文章到这里就结束了！

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

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

相关文章

在Ubuntu上使用apt工具安装RabbitMQ

在Ubuntu上使用apt工具安装RabbitMQ

创建安装脚本 cd home/ madir scripts cd scripts 创建脚本前&#xff0c;需要确认Linux版本。不同的版本对应着不同的运行脚本。 lsb_release -a 查看Linux版本 可以看到&#xff0c;我的Ubuntu版本是22.04。 在这里找到对应的脚本复制。 创建脚本文件&#xff1a; ca…
阅读更多...
详解树状数组（C/C++）

详解树状数组（C/C++）

树状数组&#xff08;Binary Indexed Tree&#xff0c;简称BIT或Fenwick Tree&#xff09;是一种用于高效处理数据序列的算法数据结构。它能够支持两个主要操作&#xff1a;单点更新和区间求和&#xff0c;这两个操作的时间复杂度都能达到O(log n)&#xff0c;其中 n 是数据序列…
阅读更多...
STM32基础篇：SPI片上外设

STM32基础篇：SPI片上外设

SPI外设简介 STM32芯片内部集成了SPI片上外设&#xff0c;可由硬件自动执行时钟生成、数据收发等功能&#xff0c;减轻CPU负担。对于STM32F103C8T6&#xff0c;其SPI资源有SPI1、SPI2。 一些参数配置&#xff1a; 8位/16位数据帧高位先行/低位先行时钟频率&#xff1a;PCLK/…
阅读更多...
vue3本地运行错误集

vue3本地运行错误集

1、解决报错ValidationError: Progress Plugin Invalid Options问题 ValidationError: Progress Plugin Invalid Optionsoptions should NOT have additional propertiesoptions should NOT have additional propertiesoptions should NOT have additional propertiesoptions …
阅读更多...
SMART PLC 脉冲输出指令PLS应用

SMART PLC 脉冲输出指令PLS应用

200SMART PLC如何实现可调频率可调占空比PWM输出 200smart_PLC如何实现可调频率可调占空比PWM输出_200smart pwm-CSDN博客文章浏览阅读6.4k次，点赞2次，收藏7次。本文介绍了如何在SMART PLC中通过修改原向导接口，实现可调频率和占空比的PWM输出。详细阐述了脉冲周期、占空比…
阅读更多...
DMA简述与使用实例

DMA简述与使用实例

之后要学&#xff1a;SPI / IICDMA 学习的这位up主的视频&#xff1a;全网最清楚的DMA讲解&#xff0c;三种搬运模式三个例子讲清楚&#xff08;STM32教程基于HAL库和CUBEIDE&#xff09;_哔哩哔哩_bilibili 目录 01-基本信息 1-概述 2-方向 3-模式 正常模式 轮询模式 …
阅读更多...
学习日志8.30--防火墙NAT

学习日志8.30--防火墙NAT

目录 一、实验环境配置 二、配置防火墙静态NAT一对一 三、配置防火墙静态NAT多对多 四、配置防火墙NAT端口转换NAPT 五、防火墙smart-nat、easyip 六、防火墙三元组NAT 在学习过基于路由器的NAT网络地址转换&#xff0c;现在学习基于防火墙NAT的网络地址转换&#xff0c;…
阅读更多...
python-读写Excel：xlwings库操作

python-读写Excel：xlwings库操作

几种操作Excel的python库对比 安装：pip install xlwings 目录 APP实例化对象 工作薄对象 创建工作薄 打开工作薄 工作薄属性 工作表对象 新增工作表 复制表 获取工作表对象 工作表属性 删除和清除表数据及表格式 工作表行高列宽(自动调整) 单元格对象 获取单元…
阅读更多...
【hot100篇-python刷题记录】【旋转图像】

【hot100篇-python刷题记录】【旋转图像】

R7-矩阵篇 印象题&#xff1a; 思路&#xff1a; 先转置&#xff0c;转置完我们按照列的中间进行对称交换就可以了。 class Solution:def rotate(self, matrix: List[List[int]]) -> None:"""Do not return anything, modify matrix in-place instead.&qu…
阅读更多...
【微机原理】指令JZ和JNZ的区别

【微机原理】指令JZ和JNZ的区别

&#x1f31f; 嗨&#xff0c;我是命运之光&#xff01; &#x1f30d; 2024&#xff0c;每日百字&#xff0c;记录时光&#xff0c;感谢有你一路同行。 &#x1f680; 携手启航&#xff0c;探索未知&#xff0c;激发潜能&#xff0c;每一步都意义非凡。 JZ&#xff08;Jump …
阅读更多...
祝贺严建兵教授任华中农业大学校长

祝贺严建兵教授任华中农业大学校长

公众号&#xff1a;生信漫谈&#xff0c;获取最新科研信息&#xff01; 祝贺严建兵教授任华中农业大学校长https://mp.weixin.qq.com/s?__bizMzkwNjQyNTUwMw&mid2247487040&idx1&sn6800055c9944754be11dc77a30ee1906&chksmc0e9ebb0f79e62a64634d5cd057578ca5…
阅读更多...
Java 入门指南：Java 并发编程 —— AQS、AQLS、AOS 锁与同步器的框架

Java 入门指南：Java 并发编程 —— AQS、AQLS、AOS 锁与同步器的框架

AQS AQS 是 AbstractQueuedSynchronizer 的缩写&#xff0c;即 抽象队列同步器&#xff0c;是 Java.util.concurrent 中的一个基础工具类&#xff0c;用于实现同步器&#xff08;Synchronizer&#xff09;的开发。 AQS 提供了一种实现锁和同步器的框架&#xff0c;使用 AQS 能…
阅读更多...
Mysql高级篇（上）

Mysql高级篇（上）

Mysql高级篇&#xff08;上&#xff09; Mysql架构介绍(一)1、Linux环境下的MySQL的安装与使用2、MySQL请求到响应字符集变化&#xff08;了解&#xff09;3、MySQL8 的主要目录结构4、数据库和文件系统关系&#xff08;1&#xff09;默认数据库&#xff08;2&#xff09;数据库…
阅读更多...
C语言程序设计之基础易错题锦集6

C语言程序设计之基础易错题锦集6

C语言程序设计之基础易错题锦集6 问题 6_0解析 6_0 问题 6_0 将形参 s 所指字符串中字母字符顺序前移&#xff0c;其他字符顺序后移&#xff0c;处理后将新字符串的首地址作为函数值返回。 例如&#xff1a;输入 &#xff1a;“asd123fgh456df”, 输出&#xff1a;“a…
阅读更多...
React基础面试题

React基础面试题

React 面试题 以下是面试官最有可能问到的 50 个 React 面试题和答案。为方便你学习&#xff0c;我对它们进行了分类&#xff1a; 基本知识React 组件React ReduxReact 路由 基本知识 1. 区分Real DOM和Virtual DOM Real DOMVirtual DOM1. 更新缓慢。1. 更新更快。2. 可以…
阅读更多...
简化理解：Tomcat 和 Servlet 规范

简化理解：Tomcat 和 Servlet 规范

有时候&#xff0c;我们会把复杂的技术概念弄得很复杂&#xff0c;其实这些东西可以用更简单的语言来理解。我们来看看 Tomcat 和 Servlet 规范到底是怎么回事。 1. 什么是 Servlet 规范&#xff1f; 简单来说&#xff0c;Sun 公司&#xff08;现在是 Oracle&#xff09;定了…
阅读更多...
YOLOv9改进策略【模型轻量化】| MoblieNetV3：基于搜索技术和新颖架构设计的轻量型网络模型

YOLOv9改进策略【模型轻量化】| MoblieNetV3：基于搜索技术和新颖架构设计的轻量型网络模型

一、本文介绍 本文记录的是基于MobileNet V3的YOLOv9目标检测轻量化改进方法研究。MobileNet V3的模型结构是通过网络搜索得来的&#xff0c;其中的基础模块结合了MobileNet V1的深度可分离卷积、MobileNet V2的线性瓶颈和倒置残差结构以及MnasNet中基于挤压和激励的轻量级注意…
阅读更多...
注意力机制（Attention mechanism）（上篇）

注意力机制（Attention mechanism）（上篇）

在图像识别的时候&#xff0c;假设输入的图像大小都是一样的。但如果问题变得复杂&#xff0c;如图1所 示&#xff0c;输入是一组向量&#xff0c;并且输入的向量的数量是会改变的&#xff0c;即每次模型输入的序列长度都不一 样&#xff0c;这个时候应该要怎么处理呢&#xff…
阅读更多...
随笔十、音频扩展模块测试

随笔十、音频扩展模块测试

本项测试简单&#xff0c;对购买的音频扩展模块进行录音放音测试 按照使用说明&#xff0c;连接音频小板&#xff0c;一个喇叭一个麦克风&#xff0c;4根线&#xff0c;buildroot系统镜像 录音测试 rootRK356X:/# arecord -c 1 -r 44100 -f S16_LE /tmp/record.wav Recording …
阅读更多...
Java-多线程入门

Java-多线程入门

多线程是指在软件或硬件上实现多个线程并发执行的技术。为了更好地理解多线程&#xff0c;首先需要了解几个基本概念&#xff1a; 了解概念 1.程序 程序是为完成特定任务、用某种语言编写的一组指令的集合。它是一个静态的概念&#xff0c;通常存储在磁盘或其他非易失性存储器…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023