Android之shape属性详解

有时候 ,为了满足一些需求,我们要用到 shape 去定义 一些背景,shape 的用法 跟图片一样 ,可以给View设置 Android:background=”@drawable/shape”, 定义的shape 文件,放在 res/shape 目录下

通常我们可以用shape 做 button 的背景选择器,也可以做切换tab 时,底部的下划线。

先看我们用shape 都可以做什么

shape下面 一共有6个子节点, 常用的 就只有 四个,padding 和size 一般用不到。

  • corners ———-圆角
  • gradient ———-渐变
  • padding ———-内容离边界距离
  • size ————大小 
  • solid  ———-填充颜色
  • stroke ———-描边
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" ><!-- 圆角 --><corners
        android:radius="9dp"android:topLeftRadius="2dp"android:topRightRadius="2dp"android:bottomLeftRadius="2dp"android:bottomRightRadius="2dp"/><!-- 设置圆角半径 --><!-- 渐变 --><gradient
        android:startColor="@android:color/white"android:centerColor="@android:color/black"android:endColor="@android:color/black"android:useLevel="true"android:angle="45"android:type="radial"android:centerX="0"android:centerY="0"android:gradientRadius="90"/><!-- 间隔 --><padding
        android:left="2dp"android:top="2dp"android:right="2dp"android:bottom="2dp"/><!-- 各方向的间隔 --><!-- 大小 --><size
        android:width="50dp"android:height="50dp"/><!-- 宽度和高度 --><!-- 填充 --><solid
        android:color="@android:color/white"/><!-- 填充的颜色 --><!-- 描边 --><stroke
        android:width="2dp"android:color="@android:color/black"android:dashWidth="1dp"android:dashGap="2dp"/>
</shape>

shape 做虚线

拿shape 做虚线,shape 设置为line , stroke 是描边属性,
其中 dashGap dashWidth 两个属性彼此一起存在才生效。

dashGap :两段之间的空隙宽度、
dashWidth :一段线的宽度

<shape xmlns:android="http://schemas.android.com/apk/res/android"android:shape="line" ><stroke
        android:dashGap="3dp"android:dashWidth="8dp"android:width="1dp"android:color="#009999" />
</shape>

效果如下

shape做渐变实线

gradient 表示渐变
angle 渐变角度,45的倍数。
startColor endColor centerColor 起 止 中 的颜色

<shape xmlns:android="http://schemas.android.com/apk/res/android" ><gradient
        android:type="linear"android:angle="0"android:endColor="#F028A2"android:startColor="#2A99F3" />
</shape>

效果如下

shape 做view背景选择器

这里注意 ,item 的 state_pressed=true 是选择状态,按下,另一个不设置 就是 正常状态。
solid :是填充颜色
corners:设置 四个角的弧度

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android"><item android:state_pressed="true"  ><shape xmlns:android="http://schemas.android.com/apk/res/android"android:shape="rectangle"><!--填充色  --><solid android:color="#ffffff" />  <!-- 描边 -->  <!-- dashGap:- 与- 虚线之间的间隔  dashWidth: 实线的宽度width: color:--><!--       <stroke              android:dashGap="10dp"android:dashWidth="5dp"android:width="1dip"android:color="#d3d3d3"/> --><!-- 圆角 -->  <corners
                android:topRightRadius="10dp"     android:bottomLeftRadius="10dp"   android:topLeftRadius="10dp"    android:bottomRightRadius="10dp"    /></shape></item><item ><!--shape:oval 椭圆     rectangle:方形    line:线性--><shape xmlns:android="http://schemas.android.com/apk/res/android"android:shape="rectangle"><gradient  android:startColor="#55B4FE"  android:endColor="#3d8FFB" android:type="linear"/><!-- 描边 -->  <!--       <stroke android:dashGap="10dp"android:dashWidth="5dp"android:width="1dip"android:color="#d3d3d3"/> --><!-- 圆角  上下左右四个角 弧度-->  <corners
                android:topRightRadius="10dp"     android:bottomLeftRadius="10dp"   android:topLeftRadius="10dp"    android:bottomRightRadius="10dp"    />   </shape></item></selector>

效果如下

shape 做矩形

android:shape=”rectangle”选为矩形

<?xml version="1.0" encoding="utf-8"?>
<shape  xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle"><!-- 渐变 --><gradient
        android:type="linear"android:startColor="@android:color/holo_blue_bright"android:centerColor="@android:color/holo_green_dark"android:endColor="@android:color/holo_red_light"android:useLevel="true"android:angle="45"/><!-- 填充 -->
<!--     <solidandroid:color="@android:color/white"/>填充的颜色 --><!-- 描边 --><stroke
        android:width="2dp"android:color="@android:color/black"/></shape>

效果如下

shape 作描边矩形 和 椭圆

shape 作描边矩形 和 椭圆
这里注意shape
android:shape=”oval” 椭圆

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle"><!-- 填充 --><solid
        android:color="@android:color/holo_blue_bright"/><!-- 填充的颜色 --><!-- 描边 --><stroke
        android:width="2dp"android:color="@android:color/black"android:dashWidth="1dp"android:dashGap="2dp"/><corners android:topLeftRadius="20dp"            
android:topRightRadius="20dp"           
android:bottomLeftRadius="20dp"     
android:bottomRightRadius="20dp" android:radius="50dp"/>
</shape>
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval"><!-- 填充 --><solid        android:color="@android:color/holo_orange_light"/><!-- 填充的颜色 --><!-- 描边 --><stroke
        android:width="2dp"android:color="@android:color/black"/></shape>

效果如下

代码

ShapeDemo代码

参考链接

*Android shape属性整理 - Because if I don’t write it down, I’ll forget it - 博客频道 - CSDN.NET

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

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

相关文章

S3C6410移植u-boot-2010.3(2)基本的启动信息修改

1、启动模块修改 进入/cpu/arm1176/目录&#xff0c;修改start.S文件 首先找到需要修改的CONFIG_NAND_SPL汇编原码&#xff0c;修改如下&#xff1a; #ifndef CONFIG_NAND_SPL /** flush v4 I/D caches*/ mov r0, #0 mcr p15, 0, r0, c7, c7, 0 /* flush v3/v4 cache */ mcr p1…

[修订版]”大脑“爆发背后是50年互联网架构重大变革

前言&#xff1a;面对即将到来的2019年&#xff0c;互联网诞生50年将是诸多纪念活动中重要的一个&#xff0c;经过50年的发展&#xff0c;互联网究竟发生什么重要的变化&#xff0c;通过这篇文章试图进行一次总结&#xff0c;也提前向互联网50年致敬。作者&#xff1a;刘锋 互…

智慧城市建设:科技创业的下一个浪潮

来源&#xff1a;资本实验室随着全球城市化进程的加速&#xff0c;越来越多的人涌进城市&#xff0c;这为城市建设带来了一系列的挑战&#xff1a;一方面&#xff0c;城市需要面对大量的越来越老化的基础设施&#xff1b;另一方面&#xff0c;需要为新涌入的城市居民提供新的&a…

Android之ViewDragHelper

在自定义ViewGroup中&#xff0c;很多效果都包含用户手指去拖动其内部的某个View(eg:侧滑菜单等)&#xff0c;针对具体的需要去写好onInterceptTouchEvent和onTouchEvent这两个方法是一件很不容易的事&#xff0c;需要自己去处理&#xff1a;多手指的处理、加速度检测等等。 好…

DARPA人工智能技术研究情况一览

来源&#xff1a;一体化指挥调度国家工程实验室、高端装备发展研究中心摘要&#xff1a;20世纪60年代初&#xff0c;DARPA&#xff08;当时为ARPA&#xff09;开始介入自主技术研究&#xff0c;并很快成为该领域的主要研究机构。DARPA意识到&#xff0c;人工智能可以满足大量的…

深入“肠-脑”神经高速通道,揭开“第六感觉”面纱

来源&#xff1a;中国生物技术网直觉是什么&#xff1f;通常被描述为超感官的第六感觉&#xff0c;它在英文里直译就是肠道感觉。肠道作为“第二大脑”的事实已经家喻户晓了。如果你曾在重要的演讲前感到心慌恶心&#xff0c;或者在一顿大餐后感到头昏眼花&#xff0c;那就是肠…

Andoird自定义ViewGroup实现竖向引导界面

一般进入APP都有欢迎界面&#xff0c;基本都是水平滚动的&#xff0c;今天和大家分享一个垂直滚动的例子。 先来看看效果把&#xff1a; 首先是布局文件&#xff1a; <com.example.verticallinearlayout.VerticalLinearLayout xmlns:android"http://schemas.android.…

科技|全球首款飞行汽车开始量产!下月开始预售,2023年后或可实现一键打“飞车”...

来源&#xff1a; 世界科技创新论坛飞机与汽车结合的产物真的要来了。在2018全球未来出行大会上&#xff0c;吉利副总裁杨学良透露&#xff0c;由吉利控股的全资子公司、全球首家飞行汽车公司美国太力飞行汽车公司推出的“全球首款量产飞行汽车”——Transition&#xff0c;将于…

Android手势锁实现

最终效果如下 整体思路 a、自定义了一个RelativeLayout(GestureLockViewGroup)在里面会根据传入的每行的个数&#xff0c;生成多个GestureLockView&#xff08;就是上面一个个小圈圈&#xff09;&#xff0c;然后会自动进行布局&#xff0c;里面的宽度&#xff0c;间距&#x…

智能连接:5G与人工智能、物联网等技术的超级融合

来源&#xff1a;资本实验室随着新技术的成熟&#xff0c;新型的、先进的应用将来自5G、人工智能&#xff08;AI&#xff09;和物联网&#xff08;IoT&#xff09;的融合。这种融合将创造出一个智能连接的世界&#xff0c;对所有个人、行业、社会和经济产生积极影响。从现在到2…

一个绚丽的loading动效分析与实现!

最终效果如下 从效果上看&#xff0c;我们需要考虑以下几个问题&#xff1a; 1.叶子的随机产生&#xff1b; 2.叶子随着一条正余弦曲线移动&#xff1b; 3.叶子在移动的时候旋转&#xff0c;旋转方向随机&#xff0c;正时针或逆时针&#xff1b; 4.叶子遇到进度条&#xff…

20岁的谷歌,和它“最成功”的大败笔

来源&#xff1a;大数据文摘编译&#xff1a;张驰、JIN、涂世文、钱天培谷歌20岁了&#xff01;20年中&#xff0c;谷歌打造了无数或成功或流产的产品&#xff0c;其中&#xff0c;这一名为“谷歌光纤”计划的失败或许是它最“成功”的“大败笔”。2010年&#xff0c;谷歌宣布了…

自定义viewgroup实现ArcMenu

最终效果如下 实现思路 通过效果图&#xff0c;会有几个问题&#xff1a; a、动画效果如何实现 可以看出动画是从顶点外外发射的&#xff0c;可能有人说&#xff0c;那还不简单&#xff0c;默认元素都在定点位置&#xff0c;然后TraslateAnimation就好了&#xff1b;这样忽略…

也谈谈Atiyah关于黎曼猜想的证明

来源&#xff1a;潇轩社作者&#xff1a;叶扬波 著名数学家&#xff0c;美国爱荷华大学教授。作为数论学家&#xff0c;他在中国大陆出版有《迹公式与模形式》等专著。以下是他谈Atiyah关于黎曼猜想的证明的文章&#xff0c;观点专业而且独到&#xff0c;转载此文&#xff0c;…

大型Javascript应用架构的模式(译文)

附上翻译好的word文件 http://files.cnblogs.com/lizhug/Patterns_For_Large-Scale_JavaScript_Application_Architecture.zip 作者&#xff1a;Addy Osmani 技术评审&#xff1a;Andree Hansson 翻译&#xff1a;李珠刚 珠刚参上 今天我们将要探讨一系列用于大型Javascri…

Animation Property Animation 使用

本篇主要讲Animation 和 Property Animation的使用&#xff0c;最后会讲QQ管家桌面火箭作为例子&#xff1a; 在Android中开发动效有两套框架可以使用&#xff0c;分别为 Animation 和 Property Animation&#xff1b; 相对来说&#xff0c;Animator比Animation要强大太多&…

华为云力推“普惠AI”,EI智能体正在落地行业

来源&#xff1a;北京物联网智能技术应用协会云计算和人工智能是什么关系&#xff1f;一般认为&#xff0c;云计算是人工智能的基础之一。而华为云则认为&#xff0c;要推动人工智能的落地&#xff0c;拥有“算法、算力和数据”还是不足够的&#xff0c;还需要“行业智慧”&…

Android中mesure过程详解

我们在编写layout的xml文件时会碰到layout_width和layout_height两个属性&#xff0c;对于这两个属性我们有三种选择&#xff1a;赋值成具体的数值&#xff0c;match_parent或者wrap_content&#xff0c;而measure过程就是用来处理match_parent或者wrap_content&#xff0c;假如…

黑科技揭秘 | 阿里云“天空物联网”连接范围如何达到700平方公里

来源&#xff1a;阿里云还记得前不久在2018杭州云栖大会上&#xff0c;由飞在天上的飞艇、地下基站共同搭建的阿里云“天空物联网”吗&#xff1f;它实现从地面40000米高空到地下20米的覆盖&#xff0c;并持续为大会服务。体现了持续加码的阿里巴巴物联网战略。在飞艇背后&…

JAVA-用栈机制实现单词逆序排列

就是IO那一段还没学到。 之前的PUCH,POP,STRING和CHAR的关系搞得懂了。 学到一个定位STRING当中CHAR的转换函数。 char String.charAt(x) 1 import java.io.*;2 3 4 class stackString5 {6 private int maxSize;7 private char[] stackX;8 private int top;9 …