Android Shape设置背景

设置背景时,经常这样 android:background=“@drawable/xxx” 。如果是纯色图片,可以考虑用 shape 替代。

shape 相比图片,减少资源占用,缩减APK体积。

开始使用。

<?xml version="1.0" encoding="utf-8"?>
<shapexmlns:android="http://schemas.android.com/apk/res/android"android:shape=["rectangle" | "oval" | "line" | "ring"] ><cornersandroid:radius="integer"android:topLeftRadius="integer"android:topRightRadius="integer"android:bottomLeftRadius="integer"android:bottomRightRadius="integer" /><gradientandroid:angle="integer"android:centerX="integer"android:centerY="integer"android:centerColor="integer"android:endColor="color"android:gradientRadius="integer"android:startColor="color"android:type=["linear" | "radial" | "sweep"]android:useLevel=["true" | "false"] /><paddingandroid:left="integer"android:top="integer"android:right="integer"android:bottom="integer" /><sizeandroid:width="integer"android:height="integer" /><solidandroid:color="color" /><strokeandroid:width="integer"android:color="color"android:dashWidth="integer"android:dashGap="integer" />
</shape>

概览

使用 shape ,可以实现 矩形、椭圆、直线、圆环。

  • corners :设置圆角,android:radius 设置统一的圆角。也可以单独设置四个角的圆角。
  • gradient :渐变,有线性渐变(默认)、放射渐变(类似中心往外扩散的效果)、扫描式渐变(转一圈的效果)。
  • padding :内边距。和 View 的 padding 使用一样。可以不设置,由 View 来决定。
  • size :大小。设置宽高,和 View 的 padding 使用一样。可以不设置,由 View 来决定。
  • solid :填充颜色。
  • stroke :描边。可以设置边界的颜色,设置边界边缘为虚线。

使用方法:

  • 1.在 res/drawable/ 目录创建 shape_demo.xml 。
  • 2.在布局文件中 android:background=“@drawable/shape_demo”

矩形

默认直角矩形

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"android:shape="rectangle"><!--矩形--><!--填充颜色--><solid android:color="@color/purple_200" />
</shape>

圆角

用 corners 设置圆角,圆角的幅度由 android:radius 控制。

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"android:shape="rectangle"><!--矩形--><!--填充颜色--><solid android:color="@color/purple_200" /><!--圆角--><cornersandroid:radius="10dp"/>
</shape>

描边

用 stroke 描边,默认边缘时曲线,添加了 android:dashWidth 、android:dashGap 就是虚线。

  • android:width 指定宽度,
  • android:color 是边缘颜色,
  • android:dashWidth 是虚线线段的宽度,
  • android:dashGap 是虚线之间的间隔
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"android:shape="rectangle"><!--矩形--><!--填充颜色--><solid android:color="@color/purple_200" /><!--圆角--><cornersandroid:radius="20dp"/><!--描边--><strokeandroid:width="2dp"android:color="@color/my_red"android:dashWidth="10dp"android:dashGap="2dp" />
</shape>

渐变色

用 gradient 设置渐变色,

  • android:type :渐变色类型,线性渐变(默认)、放射渐变(类似中心往外扩散的效果)、扫描式渐变(转一圈的效果)。
  • android:angle :渐变开始角度。线性渐变下有效。
    Angle of the gradient, used only with linear gradient. Must be a multiple of 45 in the range [0, 315].
  • android:startColor :渐变开始的颜色
  • android:centerColor :渐变中间的颜色
  • android:endColor :渐变结束的颜色
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"android:shape="rectangle"><!--矩形--><!--圆角--><corners android:radius="20dp" /><gradientandroid:centerColor="@android:color/holo_orange_dark"android:endColor="@color/my_red"android:startColor="@android:color/holo_green_dark" /></shape>

几种矩形效果对比,
在这里插入图片描述

学会了矩形,其他的也就会了。

椭圆

线性渐变,

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"android:shape="oval"><!--椭圆--><!--填充颜色--><solid android:color="@color/teal_200" /><!--描边--><strokeandroid:width="2dp"android:color="@color/purple_200" /><gradientandroid:endColor="@color/teal_200"android:startColor="@color/my_red"android:type="linear" /></shape>

放射渐变,在 线性渐变 基础上把 android:type 改为 radial ,同时设置 android:gradientRadius ,它决定内圆的大小。

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"android:shape="oval"><!--椭圆--><!--填充颜色--><solid android:color="@color/teal_200" /><!--描边--><strokeandroid:width="2dp"android:color="@color/purple_200" /><gradientandroid:gradientRadius="50dp"android:endColor="@color/teal_200"android:startColor="@color/my_red"android:type="radial" />
</shape>

扫描式渐变,在 线性渐变 基础上把 android:type 改为 sweep 。

linear 、radial 、sweep ,三种渐变色的对比,
在这里插入图片描述

直线/虚线

直线

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"android:shape="line"><!--线--><size android:width="100dp" android:height="2dp"/><!--直线--><strokeandroid:width="2dp"android:color="@color/my_red"/></shape>

虚线,虚线就是直线加上描边效果。

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"android:shape="line"><!--线--><size android:width="100dp" android:height="2dp"/><!--虚线--><strokeandroid:width="2dp"android:color="@color/teal_200"android:dashWidth="2dp"android:dashGap="2dp" /></shape>

对比,
在这里插入图片描述

圆环

android:shape=“ring” ,

  • android:innerRadius :内圆半径,直接设置 dp 值。
  • android:thickness :圆环厚度,直接设置 dp 值。
  • android:useLevel :设为 false ,否则不显示。
  • android:innerRadiusRatio :内圆半径,圆环宽度占比的形式,如 设为 4 ,意思是 内圆半径 = 圆环宽度 / 4 。
  • android:thicknessRatio :圆环厚度,圆环宽度占比的形式,如 设为 4 ,意思是 内圆半径 = 圆环宽度 / 4 。

本例 View 限定宽高都为 100 dp ,这两种写法,圆环大小是一样的。
写法1 ,

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"android:shape="ring"android:innerRadius="25dp"android:thickness="25dp"android:useLevel="false"><!--颜色--><solid android:color="@color/purple_200"/>
</shape>

写法2 ,

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"android:innerRadiusRatio="4"android:shape="ring"android:thicknessRatio="4"android:useLevel="false"><!--颜色--><solid android:color="@color/my_red" /><!--渐变色--><gradientandroid:angle="0"android:endColor="@color/teal_200"android:startColor="@color/my_red"/>
</shape>

写法 2 , gradient 中设置 android:angle=“90” ,看下和 0 的对比

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"android:innerRadiusRatio="4"android:shape="ring"android:thicknessRatio="4"android:useLevel="false"><!--颜色--><solid android:color="@color/my_red" /><!--渐变色--><gradientandroid:angle="90"android:endColor="@color/teal_200"android:startColor="@color/my_red"/>
</shape>

三种效果对比,
在这里插入图片描述

  • android:angle 为 0 是中间的效果,左边是开始渐变的颜色,右边是结束渐变的颜色。
  • android:angle 为 90 是右边的效果,下面是开始渐变的颜色,上面是结束渐变的颜色。

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

智慧安防视频监控技术+AI智能分析算法助力美好乡村建设

上期我们聊到AI智能视频监控技术如何助力美好乡村建设&#xff1f;的相关方案&#xff0c;收到了很多粉丝的讨论与关注&#xff0c;视频监控只是乡村建设极其基础的一环&#xff0c;基于视频监控平台的AI智能算法&#xff0c;将人工智能融合到安防监控之中&#xff0c;才能让乡…

【Linux】详解线程第三篇——线程同步和生产消费者模型

线程同步和生消模型 前言正式开始再次用黄牛抢票来讲解线程同步的思想通过条件变量来实现线程同步条件变量接口介绍初始化和销毁pthread_cond_waitsignal和broadcast 生产消费者模型三种关系用基本工程师思维再次理解基于生产消费者模型的阻塞队列版本一版本二多生多消 利用RAI…

第79步 时间序列建模实战:支持向量机回归建模

基于WIN10的64位系统演示 一、写在前面 这一期&#xff0c;我们介绍支持向量机&#xff08;SVM&#xff09;回归。 同样&#xff0c;这里使用这个数据&#xff1a; 《PLoS One》2015年一篇题目为《Comparison of Two Hybrid Models for Forecasting the Incidence of Hemor…

【图像处理】SIFT角点特征提取原理

一、说明 提起在OpenCV中的特征点提取&#xff0c;可以列出Harris&#xff0c;可以使用SIFT算法或SURF算法来检测图像中的角特征点。本篇围绕sift的特征点提取&#xff0c;只是管中窥豹&#xff0c;而更多的特征点算法有&#xff1a; Harris & Stephens / Shi–Tomasi 角点…

C进阶--数据的存储

⚙ 1. 数据类型介绍 1.1基本内置类型 ⭕ 整形&#xff1a; char(char又叫短整型)unsigned charsigned charshortunsigned short[int]signed short [int]intunsigned intsigned intlongunsigned long [int]signed long [int] ⭕ 浮点数&#xff1a; float&#xff08;单精度浮…

Idea引入thymeleaf失败解决方法

报错 Whitelabel Error Page This application has no explicit mapping for /error, so you are seeing this as a fallback.Fri Sep 29 09:42:00 CST 2023 There was an unexpected error (typeNot Found, status404). 原因&#xff1a;html没有使用thymeleaf 首先要引入…

java mongodb 并表 group 查询 Bson

对mongodb的使用中&#xff0c;需要将发生额表occr期初表open表&#xff0c;进行union的并表操作后&#xff0c;再进行group&#xff0c;sum&#xff0c;排序&#xff0c;分页操作。 查询了一番后&#xff0c;mongodb4.4版本后&#xff0c;新增了一个管道符&#xff0c;$union…

使用Vue、ElementUI实现登录注册,配置axios全局设置,解决CORS跨域问题

目录 引言 什么是ElementUI&#xff1f; 步骤1&#xff1a;创建Vue组件用于用户登录和注册 1. 基于SPA项目完成登录注册 在SPA项目中添加elementui依赖 在main.js中添加elementui模块 创建用户登录注册组件 配置路由 修改项目端口并启动项目 静态页面展示图 步骤2&#x…

【文献】TOF标定 Time-of-Flight Sensor Calibration for a Color and Depth Camera Pair

文章目录 Article info.Introduction处理TOF误差Take home messagesResourcesIDEAS Article info. Time-of-Flight Sensor Calibration for a Color and Depth Camera Pair IEEE TRANSACTIONS ON PATTERN ANALYSIS AND MACHINE INTELLIGENCE, VOL. 37, NO. 7, JULY 2015 Intr…

FreeRTOS入门教程(空闲任务和钩子函数及任务调度算法)

文章目录 前言一、空闲任务概念二、钩子函数概念三、任务调度算法四、任务调度算法实验1.实验代码2.是否抢占3.时间片是否轮转4.空闲任务让步 总结 前言 本篇文章将带大家学习一下什么是空闲任务以及钩子函数&#xff0c;以及学习FreeRTOS中的任务调度算法&#xff0c;了解在F…

京东大型API网关实践之路

概述 1、背景 京东作为电商平台&#xff0c;近几年用户、业务持续增长&#xff0c;访问量持续上升&#xff0c;随着这些业务的发展&#xff0c;API网关应运而生。 API网关&#xff0c;就是为了解放客户端与服务端而存在的。对于客户端&#xff0c;使开放给客户端的接口标准统…

docker系列(9) - docker-compose

文章目录 9. compose编排9.1 介绍9.2 安装9.3 compose常用命令9.4 实战Springboot部署9.4.1 准备组件配置文件9.4.1.1 redis的配置文件9.4.1.2 MySQL的配置文件9.4.1.3 SpringBoot打包文件 9.4.2 准备docker-compose.yml9.4.3 启动服务9.4.4 测试验证 9.5 实战ElasticsearchKib…

华为智能高校出口安全解决方案(2)

本文承接&#xff1a; https://qiuhualin.blog.csdn.net/article/details/131475315?spm1001.2014.3001.5502 重点讲解华为智能高校出口安全解决方案的基础网络安全&业务部署与优化的部署流程。 华为智能高校出口安全解决方案&#xff08;2&#xff09; 课程地址基础网络…

正在等待操作系统重新启动。 请重新启动计算机以安装autocad 2024。

正在等待操作系统重新启动。 请重新启动计算机以安装autocad 2024。 这是刚启动Autodesk 2024产品就弹出的弹窗&#xff0c;重启之后启动还是有这个 一直阻止安装程序运行 出现问题的原因是安装包存在问题 使用正确的安装包即可解决这个问题 需要的朋友查看图片或者评伦取…

手动实现Transformer

Transformer和BERT可谓是LLM的基础模型&#xff0c;彻底搞懂极其必要。Transformer最初设想是作为文本翻译模型使用的&#xff0c;而BERT模型构建使用了Transformer的部分组件&#xff0c;如果理解了Transformer&#xff0c;则能很轻松地理解BERT。 一.Transformer模型架构 1…

Qt扩展-QCustomPlot 简介及配置

QCustomPlot 简介及配置 一、概述二、安装教程三、帮助文档的集成 一、概述 QCustomPlot是一个用于绘图和数据可视化的Qt 控件。它没有进一步的依赖关系&#xff0c;并且有良好的文档记录。这个绘图库专注于制作好看的、发布质量的2D绘图、图形和图表&#xff0c;以及为实时可…

洗衣行业在线预约小程序系统源码搭建 支持直播功能+在线预约下单+上门取件

目前&#xff0c;人们对生活品质的追求不断提高&#xff0c;但生活节奏却也不断加快。对品质的追求遇到了忙碌的生活节奏&#xff0c;人们更渴望以最简单、便捷的方式达到追求品质的目的。同时&#xff0c;由于线上支付的普及&#xff0c;大家更希望足不出户就可以解决自己生活…

DevSecOps 将会嵌入 DevOps

通常人们在一个项目行将结束时才会考虑到安全&#xff0c;这么做会导致很多问题&#xff1b;将安全融入到DevOps的工作流中已产生了积极结果。 DevSecOps&#xff1a;安全正当时 一直以来&#xff0c;开发人员在构建软件时认为功能需求优先于安全。虽然安全编码实践起着重要作…

react.js在visual code 下的hello World

想学习reacr.js &#xff0c;就开始做一个hello world。 我的环境是visual code &#xff0c;所以我找这个环境下的例子。参照&#xff1a; https://code.visualstudio.com/docs/nodejs/reactjs-tutorial 要学习react.js &#xff0c;还得先安装node.js&#xff0c;我在visual …

电脑技巧:推荐一款桌面增强工具AquaSnap

目录 一、软件介绍 二、功能介绍 2.1 窗口边缘停靠 2.2、 窗口平铺 2.3、 窗口对齐 2.4 窗口自动拉伸 2.5、同时移动多个窗口 2.6 、支持窗口置顶 2.7、 鼠标快捷方式 2.8、 键盘快捷键 三、软件特色 四、软件获取 一、软件介绍 AquaSnap(界面增强软件)是一款功能…