Android: gradient 使用

news2025/4/21 19:01:37

在 Android 中使用 gradient(渐变) 通常是通过 drawable 文件来设置背景。下面是可以直接用的几种用法汇总,包括线性渐变、径向渐变、扫描渐变(sweep)等:


1. Linear Gradient(线性渐变)

<!-- res/drawable/bg_gradient_linear.xml -->
<gradient xmlns:android="http://schemas.android.com/apk/res/android"
    android:type="linear"
    android:startColor="#FF512F"
    android:endColor="#DD2476"
    android:angle="45" />

🔹 angle 取值范围:0~360,表示渐变方向(0 为从上往下,90 为从左往右)。


2. Radial Gradient(径向渐变)

<!-- res/drawable/bg_gradient_radial.xml -->
<gradient xmlns:android="http://schemas.android.com/apk/res/android"
    android:type="radial"
    android:centerX="0.5"
    android:centerY="0.5"
    android:gradientRadius="200"
    android:startColor="#FF512F"
    android:endColor="#DD2476" />

🔹 centerX/Y: 百分比(0.5 表示中心)
🔹 gradientRadius: 渐变半径,单位为 px


3. Sweep Gradient(扫描渐变)

<!-- res/drawable/bg_gradient_sweep.xml -->
<gradient xmlns:android="http://schemas.android.com/apk/res/android"
    android:type="sweep"
    android:centerX="0.5"
    android:centerY="0.5"
    android:startColor="#FF512F"
    android:endColor="#DD2476" />

4. 多色渐变

<gradient xmlns:android="http://schemas.android.com/apk/res/android"
    android:type="linear"
    android:startColor="#FF512F"
    android:centerColor="#F09819"
    android:endColor="#DD2476"
    android:angle="90" />

5. 设置背景到 View

android:background="@drawable/bg_gradient_linear"

6. 代码中创建 GradientDrawable

val gradient = GradientDrawable(
    GradientDrawable.Orientation.LEFT_RIGHT,
    intArrayOf(Color.RED, Color.BLUE)
)
gradient.cornerRadius = 20f
yourView.background = gradient

7. 圆角 + 渐变(常用)

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <corners android:radius="16dp"/>
    <gradient
        android:type="linear"
        android:startColor="#FF512F"
        android:endColor="#DD2476"
        android:angle="90"/>
</shape>

android:angle 方向图解

在 Android 的 gradient 中使用 android:angle 属性时,它控制渐变的方向。它的单位是角度,**以“从左到右顺时针旋转”**为标准。


android:angle 方向图解(基于 type="linear"

angle渐变方向说明(startColorendColor
0从左 ➜ 右左边是 startColor,右边是 endColor
45从左下 ➜ 右上斜向上渐变
90从下 ➜ 上下边是 startColor,上边是 endColor
135从右下 ➜ 左上斜向上渐变
180从右 ➜ 左右边是 startColor,左边是 endColor
225从右上 ➜ 左下斜向下渐变
270从上 ➜ 下上边是 startColor,下边是 endColor
315从左上 ➜ 右下斜向下渐变

✅ 举例说明:

<gradient
    android:startColor="#FF0000"
    android:endColor="#0000FF"
    android:angle="90"/>

上面是 从下往上 渐变(即底部是红色,顶部是蓝色),不是从左到右!这也是 Android 和 CSS 的一个差异点,容易混淆。


❗注意:

  • angle 必须是 45 的整数倍,否则会被忽略或默认处理。
  • angle 的值是 顺时针旋转角度,从 0 度(从左 ➜ 右)开始

0:从左到右
45:从左下到右上
90:从下到上
135:从右下到左上
180:从右到左
225:从右上到左下
270:从上到下
315:从左上到右下

图示参考:

          ↑
    270°  ↑  90°
← 180° ←     → 0° →
         ↓

🌟 注意:这个角度是 Android 中 定义渐变方向用的逻辑值不是数学角度的坐标方向


✅ 示例一:从左到右渐变

<gradient
    android:type="linear"
    android:startColor="#FF0000"
    android:endColor="#0000FF"
    android:angle="90"/>

🔸 颜色从左(红) → 右(蓝) 渐变。


✅ 示例二:从上到下渐变

<gradient
    android:type="linear"
    android:startColor="#00FF00"
    android:endColor="#000000"
    android:angle="0"/>

🔸 颜色从上(绿) → 下(黑) 渐变。


⚠️ 注意事项:

  1. angle 只能是 45 的倍数(如 0、45、90、135…),否则 Android 会忽略。
  2. 默认 angle0,也就是 从上到下
  3. android:type="linear" 时,angle 才生效。
  4. 对于 radialsweep 类型,angle 不起作用。

radialsweep的区别


🔵 radial(放射状渐变)

✅ 特点:

  • 中心向外发散。
  • 渐变是圆形扩散的效果。
  • 类似水波或聚光灯、光晕。

✅ 用法示例:

<gradient
    android:type="radial"
    android:startColor="#FF0000"
    android:endColor="#0000FF"
    android:centerX="0.5"
    android:centerY="0.5"
    android:gradientRadius="200"/>

✅ 参数说明:

  • centerX / centerY:中心点位置(0~1,表示百分比)。
  • gradientRadius:渐变的半径(必须设置)。
  • angle 无效!

✅ 视觉示意:

  渐变像个圆圈扩散出去:

     R G B
     ↓↓↓
   ●●●●●●●●
   ●●◎◎◎●●
   ●●◎◎◎●●
   ●●◎◎◎●●
   ●●●●●●●●

🟣 sweep(扫描/扫描状渐变)

✅ 特点:

  • 从中心点绕一圈旋转(360°)改变颜色。
  • 类似时钟的指针旋转、雷达扫描。

✅ 用法示例:

<gradient
    android:type="sweep"
    android:startColor="#FF0000"
    android:endColor="#0000FF"
    android:centerX="0.5"
    android:centerY="0.5"/>

✅ 参数说明:

  • centerX / centerY:设置渐变中心。
  • 不支持 angle方向是固定的:从 0° 顺时针到 360°。

✅ 视觉示意:

   色彩从中间绕一圈:

      红 → 橙 → 黄
      ↑       ↓
     紫 ← 蓝 ← 绿

🔄 总结对比表:

类型视觉效果可设置角度中心点常用场景
linear直线方向渐变✅ 支持按钮、背景、边框线
radial中心向外扩散❌ 不支持光晕、聚光灯、圆形按钮
sweep中心旋转渐变❌ 不支持表盘、雷达、加载动画

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

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

相关文章

【教程】PyTorch多机多卡分布式训练的参数说明 | 附通用启动脚本

转载请注明出处&#xff1a;小锋学长生活大爆炸[xfxuezhagn.cn] 如果本文帮助到了你&#xff0c;欢迎[点赞、收藏、关注]哦~ 目录 torchrun 一、什么是 torchrun 二、torchrun 的核心参数讲解 三、torchrun 会自动设置的环境变量 四、torchrun 启动过程举例 机器 A&#…

Neo4j初解

Neo4j 是目前应用非常广泛的一款高性能的 NoSQL 图数据库&#xff0c;其设计和实现专门用于存储、查询和遍历由节点&#xff08;实体&#xff09;、关系&#xff08;边&#xff09;以及属性&#xff08;键值对&#xff09;构成的图形数据模型。它的核心优势在于能够以一种自然且…

音视频小白系统入门课-2

本系列笔记为博主学习李超老师课程的课堂笔记&#xff0c;仅供参阅 课程传送门&#xff1a;音视频小白系统入门课 音视频基础ffmpeg原理 往期课程笔记传送门&#xff1a; 音视频小白系统入门笔记-0音视频小白系统入门笔记-1 课程实践代码仓库&#xff1a;传送门 音视频编解…

Linux:安装 CentOS 7(完整教程)

文章目录 一、简介二、安装 CentOS 72.1 虚拟机配置2.2 安装CentOS 7 三、结语 一、简介 CentOS&#xff08;Community ENTerprise Operating System&#xff09;是一个基于 Linux 的发行版之一&#xff0c;旨在提供一个免费的、企业级的计算平台&#xff0c;因其稳定性、安全…

MATLAB 控制系统设计与仿真 - 34

多变量系统知识回顾 - MIMO system 这一章对深入理解多变量系统以及鲁棒分析至关重要 首先&#xff0c;对于如下系统&#xff1a; 当G(s)为单输入&#xff0c;单输出系统时&#xff1a; 如果&#xff1a; 则&#xff1a; 所以 因此&#xff0c;对于SISO&#xff0c;系统的增…

【网络】通过Samba实现Window挂在Linux服务器路径

有时候我们去进行内网部署时&#xff0c;会遇到客户或者甲方爸爸说&#xff0c;需要将Linux中的某个路径共享出去到Window上&#xff0c;挂载出比如Z:\这种盘符。通过打开Z盘&#xff0c;来查看服务器的指定目录下的数据。 步骤1&#xff1a; 在Linux中安装samba yum install…

架构思维:缓存层场景实战_读缓存(下)

文章目录 Pre业务场景缓存存储数据的时机与常见问题解决方案1. 缓存读取与存储逻辑2. 高并发下的缓存问题及解决方案3. 缓存预热&#xff08;减少冷启动问题&#xff09; 缓存更新策略&#xff08;双写问题&#xff09;1. 先更新缓存&#xff0c;再更新数据库&#xff08;不推荐…

uniapp微信小程序实现sse

微信小程序实现sse 注&#xff1a;因为微信小程序不支持sse请求&#xff0c;因为后台给的是分包的流&#xff0c;所以我们就使用接受流的方式&#xff0c;一直接受&#xff0c;然后把接受的数据拿取使用。这里还是使用uniapp的原生请求。 上代码 //注意&#xff1a;一定要下…

新能源汽车能量流测试的传感器融合技术应用指南

第一部分&#xff1a;核心原理模块化拆解 模块1&#xff1a;多源传感器物理层融合 关键技术&#xff1a; 高精度同步采集架构 采用PXIe-8840控制器同步定时模块&#xff08;NI PXIe-6674T&#xff09;&#xff0c;实现CAN/LIN/模拟量信号的μs级同步光纤电压传感器&#xff0…

人工智能与网络安全:AI如何预防、检测和应对网络攻击?

引言&#xff1a;网络安全新战场&#xff0c;AI成关键角色 在数字化浪潮不断推进的今天&#xff0c;网络安全问题已经成为每一家企业、每一个组织无法回避的“隐形战场”。无论是电商平台、金融机构&#xff0c;还是政府机关、制造企业&#xff0c;都可能面临数据泄露、勒索病毒…

链表知识回顾

类型&#xff1a;单链表&#xff0c;双链表、循环链表 存储&#xff1a;在内存中不是连续存储 删除操作&#xff1a;即让c的指针指向e即可&#xff0c;无需释放d&#xff0c;因为java中又内存回收机制 添加节点&#xff1a; 链表的构造函数 public class ListNode {// 结点…

FPGA学习(五)——DDS信号发生器设计

FPGA学习(五)——DDS信号发生器设计 目录 FPGA学习(五)——DDS信号发生器设计一、FPGA开发中常用IP核——ROM/RAM/FIFO1、ROM简介2、ROM文件的设置&#xff08;1&#xff09;直接编辑法&#xff08;2&#xff09;用C语言等软件生成初始化文件 3、ROM IP核配置调用 二、DDS信号发…

OpenCv高阶(六)——图像的透视变换

目录 一、透视变换的定义与作用 二、透视变换的过程 三、OpenCV 中的透视变换函数 1. cv2.getPerspectiveTransform(src, dst) 2. cv2.warpPerspective(src, H, dsize, dstNone, flagscv2.INTER_LINEAR, borderModecv2.BORDER_CONSTANT, borderValue0) 四、文档扫描校正&a…

性能比拼: Go vs Bun

本内容是对知名性能评测博主 Anton Putra Go (Golang) vs. Bun: Performance (Latency - Throughput - Saturation - Availability) 内容的翻译与整理, 有适当删减, 相关指标和结论以原作为准 我对 Bun 在之前的基准测试中的出色表现感到惊讶&#xff0c;因此我决定将它与 Go …

定制化 Docsify 文档框架实战分享

&#x1f31f; 定制化 Docsify 文档框架实战分享 在构建前端文档平台时&#xff0c;我们希望拥有更友好的用户界面、便捷的搜索、清晰的目录导航以及实用的代码复制功能。借助 Docsify&#xff0c;我实现了以下几个方面的定制优化&#xff0c;分享给大家 &#x1f64c;。 &…

鸿蒙ArkUI之布局实战,线性布局(Column,Row)、弹性布局(Flex)、层叠布局(Stack),详细用法

本文聚焦于ArkUI的布局实战&#xff0c;三种十分重要的布局&#xff0c;线性布局、弹性布局、层叠布局&#xff0c;在实际开发过程中这几种布局方法都十分常见&#xff0c;下面直接上手 线性布局 垂直布局&#xff08;Column&#xff09; 官方文档&#xff1a; Column-行列…

测试基础笔记第七天

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 一、cat命令二、ls -al命令三、>重定向符号四、>>追加重定向符号五、less/more命令六、grep命令七、|管道符八、clear命令九、head命令十、tail命令十一、…

[Windows] Adobe Camera Raw 17.2 win/Mac版本

[Windows] Adobe Camera Raw 链接&#xff1a;https://pan.xunlei.com/s/VOOIAXoyaZcKAkf_NdP-qw_6A1?pwdpd5k# Adobe Camera Raw&#xff0c;支持Photoshop&#xff0c;lightroom等Adobe系列软件&#xff0c;对相片无损格式进行编辑调色。 支持PS LR 2022 2023 2024 2025版…

开源模型应用落地-Podcastfy-从文本到声音的智能跃迁-Gradio(一)

一、前言 在当今信息呈现方式越来越多样化的背景下&#xff0c;如何将文字、图片甚至视频高效转化为可听的音频体验&#xff0c;已经成为内容创作者、教育者和研究者们共同关注的重要话题。Podcastfy是一款基于Python的开源工具&#xff0c;它专注于将多种形式的内容智能转换成…

Python 深度学习实战 第11章 自然语言处理(NLP)实例

Python 深度学习实战 第11章 自然语言处理(NLP)实例 内容概要 第11章深入探讨了自然语言处理&#xff08;NLP&#xff09;的深度学习应用&#xff0c;涵盖了从文本预处理到序列到序列学习的多种技术。本章通过IMDB电影评论情感分类和英西翻译任务&#xff0c;详细介绍了如何使…