shape-自绘制简单图形
shape 可以绘制简单的图形,颜色等。它主要就是应用于selector 的一些状态。
本文内容参考自http://www.cnblogs.com/cyanfei/archive/2012/07/27/2612023.html
自己验证了下,学习记录
它主要有以下几个部分,分别是
填充(solid):设置填充的颜色
间隔(padding):设置四个方向上的间隔
大小(size):设置大小
圆角(corners):设置图形圆角,默认是正方形的
渐变(gradient):当设置填充颜色后,无渐变效果。angle的值必须是45的倍数(包括0),仅在type="linear"有效,不然会报错。android:useLevel 这个属性不知道有什么用。
接下来针对上面的内容,自己写下demo进行验证学习。
1.验证corners 效果
代码
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<corners
android:radius="20dp"
android:topLeftRadius="12dp"
android:bottomLeftRadius="18dp"
android:topRightRadius="24dp"
android:bottomRightRadius="30dp"/>
<solid
android:color="#ff0000"
/> </shape>
效果
可以发现,当五个关于圆角半径的属性全部设置的时候,这时候radius 不起作用。
然后我们少了个属性试下
<corners
android:bottomLeftRadius="18dp"
android:bottomRightRadius="30dp"
android:radius="20dp" />
效果
我们可以得出结论
android:Radius="20dp" 设置四个角的半径
android:topLeftRadius="20dp" 设置左上角的半径
android:topRightRadius="20dp" 设置右上角的半径
android:bottomLeftRadius="20dp" 设置右下角的半径
android:bottomRightRadius="20dp" 设置左下角的半径
radius是设置的四个角圆弧半径,一但这个角单独进行了设定,优先选择单角数值
另外,填充色solid必须有,否则看不到
2.我们给上面的图形加个边框stroke
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" > <corners
android:bottomLeftRadius="18dp"
android:bottomRightRadius="30dp"
android:radius="20dp"
android:topLeftRadius="12dp"
android:topRightRadius="24dp" /> <stroke
android:dashGap="3dp"
android:dashWidth="10dp"
android:width="10dp"
android:color="#0000ff" /> <solid android:color="#ff0000" /> </shape>
看下效果
然后我们更改属性
<stroke
android:dashGap="10dp"
android:dashWidth="3dp"
android:width="20dp"
android:color="#0000ff" />
结果
如果dash属性有一个值为0,或不加这个属性
结果就是
结论
描边(stroke):dashWidth和dashGap属性,只要其中一个设置为0dp,则边框为实线边框
android:width="20dp" 设置边边的宽度
android:color="@android:color/black" 设置边边的颜色
android:dashWidth="2dp" 设置虚线的宽度
android:dashGap="20dp" 设置虚线的间隔宽度
而且加的边宽度并不是从原来的图形最外圈算起,而是里外各占一半
3.我们增加个渐变效果 gradient
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" > <corners
android:bottomLeftRadius="18dp"
android:bottomRightRadius="30dp"
android:radius="20dp"
android:topLeftRadius="12dp"
android:topRightRadius="24dp" /> <stroke
android:dashGap="8dp"
android:dashWidth="4dp"
android:width="20dp"
android:color="#0000ff" />
<gradient
android:startColor="#00ff00"
android:centerColor="#ffff00"
android:endColor="#00ffff"
android:useLevel="true"
android:angle="30"
android:type="linear"
android:gradientRadius="30"
/> <solid android:color="#ff0000" /> </shape>
运行上述代码报错
原因
angle = "30" 不是45倍数
修改以后
原因
里面有solid填充属性,导致渐变效果无效
去掉填充item项。然后我们研究 angle
angle的值必须是45的倍数(包括0),仅在type="linear"有效
看下面angle不同取值时候的效果
0 45 90 135
180 225 270 315
从上面的结果看,似乎没什么规律啊
导致以上原因是我们对属性android:useLevel="true" 进行了设定
如果我们把这个值设为false,就会发现它的线性规律是
例如,当我们设置useLevel = "false", angle = 225
其中,决定中间色位置的属性是
android:centerX="50%"
android:centerY="50%"
对于其他属性
看如下实例
<gradient
android:angle="225"
android:centerColor="#00ff00"
android:endColor="#0000ff"
android:centerX="50%"
android:centerY="50%"
android:startColor="#ff0000"
android:type="radial"
android:gradientRadius="40"
android:useLevel="false" />
结果
修改其中的属性,如下
<gradient
android:angle="225"
android:centerColor="#00ff00"
android:endColor="#0000ff"
android:centerX="100%"
android:centerY="50%"
android:startColor="#ff0000"
android:type="radial"
android:gradientRadius="200"
android:useLevel="false" />
结果
我们可以得出结论
android:centerX="100%"
android:centerY="50%"
这两个属性是渐变的起点
radial 这个是径向渐变
我们在看下
<gradient
android:angle="225"
android:centerColor="#00ff00"
android:endColor="#0000ff"
android:centerX="50%"
android:centerY="50%"
android:gradientRadius="200"
android:startColor="#ff0000"
android:type="sweep"
android:useLevel="false" />
结果
我们可以发现,这时候的
android:gradientRadius="200"
已经不起作用了,但是
android:centerX="50%"
android:centerY="50%"
作用还是一样的
4.我们尝试更改下shape的大小size
上面我们的大小没有设置,都是自适应控件大小的,现在我们修改如下
测试控件
<ImageButton
android:id="@+id/bt"
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_centerInParent="true"
android:background="#000000"
android:src="@drawable/shape_test"
android:text="current_line"
android:textColor="#ff0000" />
size大小设置
<size
android:height="100dp"
android:width="100dp" />
结果
我们继续更改
<size
android:height="300dp"
android:width="300dp" />
当我们把控件设置为自适应的时候
也就是说,这个属性相当于你做了一张图片,设置了这张图片的大小。
5.我们现在看下padding的性质
看对比
<padding android:left="100dp"
android:top="20dp"
android:bottom="20dp"
android:right="20dp"
/> <size
android:height="100dp"
android:width="100dp" />
结果
但我们去掉padding的时候
其实是没有什么区别的。网上有人说
padding单独使用是没有效果的,必须是shape作为一个item的时候,使用才有效果。具体等以后用到再做调查吧
shape-自绘制简单图形的更多相关文章
- 学习笔记:HTML5 Canvas绘制简单图形
HTML5 Canvas绘制简单图形 1.添加Canvas标签,添加id供js操作. <canvas id="mycanvas" height="700" ...
- Java入门:绘制简单图形
在上一节,我们学习了如何使用swing和awt工具创建一个空的窗口,本节学习如何绘制简单图形. 基本绘图介绍 Java中绘制基本图形,可以使用Java类库中的Graphics类,此类位于java.aw ...
- CSS绘制简单图形
究竟该用字体图标.图片图标.还是CSS画一个图标?我也不知道.各有千秋吧.本文将介绍如何用css绘制简单的图形,所有测试在chrome58.0完成,如果你不能得到正确结果请到caniuse查一查看看是 ...
- Windows控制台下绘制简单图形
最近接触到一个很有意思的问题,如何在Windows控制台下画图,翻遍了C的头文件也没找到画图的函数,好吧,那就用Windows提供的API函数吧,看来想移植是没戏了.先画一个简单的图,类似心电图那种吧 ...
- 在高德地图上用svg.js绘制简单图形
这段时间做的一个项目,需要在地图上绘制简单的图形.在学习高德地图JS API的过程中,发现高德地图提供的点.线等API并不能满足我的需求,还好它开放了自定义图层CustomLayer,官方说自定义图层 ...
- 利用 turtle库绘制简单图形
turtle库是python的基础绘图库,这个库被介绍为一个最常用的用来介绍编程知识的方法库,其主要是用于程序设计入门,是标准库之一,利用turtle可以制作很多复杂的绘图. turtle名称含义为“ ...
- Quartz 2D绘制简单图形
在Quartz 2D中,绘图是通过图形上下文进行绘制的,以下绘制几个简单的图形 首先先创建一个QuartzView.swift文件继承自UIView,然后实现drawRect方法: import UI ...
- Golang 绘图基础 -绘制简单图形
前一节讲的是 绘图到不同输出源,请看地址: http://www.cnblogs.com/ghj1976/p/3440856.html 上一节的例子效果是通过设置每一个点的的RGBA属性来实现的,这是 ...
- Python turtle库绘制简单图形
一.简介 Python中的turtle库是一个直观有趣的图形绘制函数库.turtle库绘制图形有一个基本框架:一个小海龟在坐标系中爬行,其爬行轨迹形成了绘制图形. 二.简单的图形列举 1.绘制4个不同 ...
随机推荐
- 一天一个算法:求Sn=a+aa+aaa+…+aa…a之和
/* 求Sn=a+aa+aaa+…+aa…a之值,其中a是一个数字. 例如:2+22+222+…+22222(此时n=5),n由键盘输入.*/ void Function3() { int a,n,s ...
- POJ 3671 DP or 乱搞
思路: 1.DP f[i][j]:前i个数 最后一个数是j的最小花费 f[i][j]=min(f[i][j],f[i-1][k]+(a[i]!=j));1<=k<=j 这种做法比较有普遍性 ...
- iOS ReactiveCocoa 最全常用API整理(可做为手册查询)
本文适合有一定RAC基础的童鞋做不时的查询,所以本文不做详细解释. 一.常见类 1.RACSiganl 信号类. RACEmptySignal :空信号,用来实现 RACSignal 的 +empty ...
- hostid---打印当前主机的十六进制数字标识
hostid命令用于打印当前主机的十六进制数字标识.是主机的唯一标识,是被用来限时软件的使用权限,不可改变. hostid命令查找到的值是取hostname对应的ip地址.然后把ip地址转换成hex, ...
- uwsgi erro
Installing collected packages: uwsgi Running setup.py install for uwsgi: started Running setup.py in ...
- caioj 1082 动态规划入门(非常规DP6:火车票)
f[i]表示从起点到第i个车站的最小费用 f[i] = min(f[j] + dist(i, j)), j < i 动规中设置起点为0,其他为正无穷 (貌似不用开long long也可以) #i ...
- caioj 1075 动态规划入门(中链式2:能量项链)(中链式dp总结)
我又总结了一种动归模型-- 这道题和上一道题很类似,都是给一个序列,然后相邻的元素可以合并 然后合并后的元素可以再次合并 那么就可以用这两道题类似的方法解决 简单来说就是枚举区间,然后枚举断点 加上断 ...
- 【转】黄聪:HtmlAgilityPack教程案例
[转]黄聪:HtmlAgilityPack教程案例 HtmlAgilityPack中的HtmlNode类与XmlNode类差不多,提供的功能也大同小异.下面来看看该类提供功能. 一.静态属性 publ ...
- 洛谷——P3368 【模板】树状数组 2
https://www.luogu.org/problem/show?pid=3368 题目描述 如题,已知一个数列,你需要进行下面两种操作: 1.将某区间每一个数数加上x 2.求出某一个数的和 输入 ...
- gluPerspective和gluLookAt的关系
参考文章 GL学习笔记(2) - 终于搞明白gluPerspective和gluLookAt的关系了(zz) gluPerspective的具体含义 解密--神秘的gluPerspective 函数原 ...