Android Shape设置背景

news2024/11/22 7:13:49

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

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

开始使用。

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape=["rectangle" | "oval" | "line" | "ring"] >
    <corners
        android:radius="integer"
        android:topLeftRadius="integer"
        android:topRightRadius="integer"
        android:bottomLeftRadius="integer"
        android:bottomRightRadius="integer" />
    <gradient
        android: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"] />
    <padding
        android:left="integer"
        android:top="integer"
        android:right="integer"
        android:bottom="integer" />
    <size
        android:width="integer"
        android:height="integer" />
    <solid
        android:color="color" />
    <stroke
        android: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" />

    <!--圆角-->
    <corners
        android: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" />

    <!--圆角-->
    <corners
        android:radius="20dp"/>

    <!--描边-->
    <stroke
        android: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" />

    <gradient
        android: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" />

    <!--描边-->
    <stroke
        android:width="2dp"
        android:color="@color/purple_200" />

    <gradient
        android: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" />

    <!--描边-->
    <stroke
        android:width="2dp"
        android:color="@color/purple_200" />

    <gradient
        android: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"/>

    <!--直线-->
    <stroke
        android: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"/>

    <!--虚线-->
    <stroke
        android: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" />

	<!--渐变色-->
    <gradient
        android: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" />

	<!--渐变色-->
    <gradient
        android:angle="90"
        android:endColor="@color/teal_200"
        android:startColor="@color/my_red"/>
</shape>

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

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

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

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

相关文章

【STM32单片机】u8g2智能风扇设计

文章目录 一、功能简介二、软件设计三、实验现象联系作者 一、功能简介 本项目使用STM32F103C8T6单片机控制器&#xff0c;使用按键、IIC OLED模块、DS18B20温度传感器、直流电机、红外遥控等。 主要功能&#xff1a; 初始化后进入温度显示界面&#xff0c;系统初始状态为手动…

探索视听新纪元: ChatGPT的最新语音和图像功能全解析

&#x1f337;&#x1f341; 博主猫头虎&#xff08;&#x1f405;&#x1f43e;&#xff09;带您 Go to New World✨&#x1f341; &#x1f405;&#x1f43e;猫头虎建议程序员必备技术栈一览表&#x1f4d6;&#xff1a; &#x1f916; 人工智能 AI: &#x1f9e0; Machine …

【我的创作纪念日】使用pix2pixgan实现barts2020数据集的处理(完整版本)

使用pix2pixgan &#xff08;pytorch)实现T1 -> T2的基本代码 使用 https://github.com/eriklindernoren/PyTorch-GAN/ 这里面的pix2pixgan代码进行实现。 进去之后我们需要重新处理数据集&#xff0c;并且源代码里面先训练的生成器&#xff0c;后训练鉴别器。 一般情况下…

亚马逊要求的UL报告的产品标准是什么?如何区分

亚马逊为什么要求电子产品有UL检测报告&#xff1f; 首先&#xff0c;美国是一个对安全要求非常严格的国家&#xff0c;美国本土的所有电子产品生产企业早在很多年前就要求有相关安规检测。 其次&#xff0c;随着亚马逊在全球商业的战略地位不断提高&#xff0c;境外的电子设…

百度资源搜索平台出现:You do not have the proper credential to access this page.怎么办?

Forbidden site not allowed You do not have the proper credential to access this page. If you think this is a server error, please contact the webmaster. 如果你的百度资源平台&#xff0c;点进去出现这个提示&#xff0c;说明您的网站已经被百度清退了。 如果你的网…

队列的分类及用途

队列&#xff08;Queue&#xff09;是一种常见的数据结构&#xff0c;用于存储和管理数据元素。队列通常遵循先进先出&#xff08;FIFO&#xff0c;First-In-First-Out&#xff09;的原则&#xff0c;这意味着最早添加到队列的元素将首先被移除。队列有不同的类型和用途&#x…

VS code本地安装PlantUML

VS code本地安装PlantUML 需要条件vs code安装插件使用常见错误 需要条件 在VS Code上安装PlantUML扩展之前&#xff0c;请确保您具有以下先决条件: : Java与GraphViz(点击可直接跳转下载界面); 安装省略 vs code安装插件 vs code安装以下两个插件&#xff08;PlantUML,Grap…

易云维®智慧工厂数字化管理平台助推工业制造企业数字化转型新动能

近年来&#xff0c;我国正在积极推进工业制造企业数字化转型&#xff0c;工业制造企业数字化转型迎来了密集的利好政策&#xff0c;近期&#xff0c;国家工信部又出台系列政策&#xff0c;实施工业制造企业数字化促进工程&#xff0c;推动工业制造企业更快更好地拥抱数字经济。…

数字安全设备制造有哪几种方式?

数字安全设备制造是指制造用于保护数字信息系统和网络安全的专用设备。以下是几种常见的数字安全设备制造方式&#xff1a; 集成式安全设备制造&#xff1a;集成式安全设备制造是将多种安全功能集成到单一的硬件设备或软件平台中。这种制造方式可以大大降低设备的成本和复杂性&…

vue3 + vite3 addRoute 实现权限管理系统

vue3 vite3 addRoute 实现权限控制 1、前言2、静态路由3、动态路由4、在组建中使用路由5、注意事项 1、前言 在权限系统开发中&#xff0c;根据后端返回的菜单列表动态添加路由是非常常见的需求&#xff0c;它可以实现根据用户权限动态加载可访问的页面。本篇文章我们将重点介…

第二届全国高校计算机技能竞赛——Java赛道

第二届全国高校计算机技能竞赛——Java赛道 小赛跳高 签到题 import java.util.*; public class Main{public static void main(String []args) {Scanner sc new Scanner(System.in);double n sc.nextDouble();for(int i 0; i < 4; i) {n n * 0.9;}System.out.printf(&…

探索公共厕所的数字化治理,智慧公厕完善公共厕所智能化的治理体系

随着城市化进程的不断发展&#xff0c;公共厕所治理成为一个不容忽视的问题。如何通过数字化手段来提升公共厕所管理水平&#xff0c;成为了一个备受关注的话题。本文将以智慧公厕领先厂家广州中期科技有限公司&#xff0c;大量精品案例项目实景实图&#xff0c;探讨公共厕所数…

品牌线上假货怎么治理

随着品牌的发展&#xff0c;母婴、家电、百货等行业&#xff0c;链接量暴增&#xff0c;销售店铺也较多&#xff0c;线上仅通过图片销售的形式&#xff0c;也导致了假货链接地滋生&#xff0c;假货分两种情况&#xff0c;一种是只销售假货的店铺&#xff0c;一种是真假混卖的店…

用numpy生成18种特殊数组

文章目录 单值数组特殊矩阵范德蒙德矩阵数值范围坐标网格绘图代码 所有创建数组的函数中&#xff0c;都有一个可选参数dtype&#xff0c;表示创建的数组的数据类型。 指定维度empty, eye, identity, ones, zeros, full模仿维度empty_like, ones_like, zeros_like, full_like特…

【Linux】C语言实现对文件的加密算法

异或加密 解密方式是进行第二次加密后自动解密 #define BUF_SIZE (16384) //16k /************************************************************** 功能描述: 加密实现 输入参数: --------------------------------------------------------------- 修改作者: 修改日期…

【小尘送书-第五期】《巧用ChatGPT快速提高职场晋升力》用ChatGPT快速提升职场能力,全面促进自身职业发展

大家好&#xff0c;我是小尘&#xff0c;欢迎你的关注&#xff01;大家可以一起交流学习&#xff01;欢迎大家在CSDN后台私信我&#xff01;一起讨论学习&#xff0c;讨论如何找到满意的工作&#xff01; &#x1f468;‍&#x1f4bb;博主主页&#xff1a;小尘要自信 &#x1…

qq录屏快捷键大全,玩转录制就这么简单(干货)

“qq有录屏快捷键吗&#xff1f;有点好奇&#xff0c;现在用qq录制屏幕&#xff0c;总是得去点击屏幕录制才可以出来&#xff0c;太麻烦了&#xff0c;如果可以通过快捷键的方式打开&#xff0c;会轻松许多&#xff0c;想问问大家&#xff0c;知道qq录屏快捷键是多少吗&#xf…

#你我都是国家队#,与泸州老窖一起为中国荣耀干杯

执笔 | 姜 姜 编辑 | 古利特 代表亚洲最高水平的体育盛会已经开幕两天&#xff0c;国家队运动员们在赛场上挥洒汗水&#xff0c;国人的激情也随之升温。 为迎接这场体育盛会&#xff0c;9月13日&#xff0c;TEAM CHINA中国国家队官方微博携手泸州老窖发布了一条态度短片&am…

R语言用标准最小二乘OLS,广义相加模型GAM ,样条函数进行逻辑回归LOGISTIC分类...

原文链接&#xff1a;http://tecdat.cn/?p21379 本文我们对逻辑回归和样条曲线进行介绍&#xff08;点击文末“阅读原文”获取完整代码数据&#xff09;。 logistic回归基于以下假设&#xff1a;给定协变量x&#xff0c;Y具有伯努利分布&#xff0c; 目的是估计参数β。 回想一…

如何在Python中实现高效的数据处理与分析

在当今信息爆炸的时代&#xff0c;我们面对的数据量越来越大&#xff0c;如何高效地处理和分析数据成为了一种迫切的需求。Python作为一种强大的编程语言&#xff0c;提供了丰富的数据处理和分析库&#xff0c;帮助我们轻松应对这个挑战。本文将为您介绍如何在Python中实现高效…