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的时候,使用才有效果。具体等以后用到再做调查吧

				
时间: 2024-10-11 12:54:27

shape-自绘制简单图形的相关文章

学习笔记:HTML5 Canvas绘制简单图形

HTML5 Canvas绘制简单图形 1.添加Canvas标签,添加id供js操作. <canvas id="mycanvas" height="700" width="1024" style="border:1px solid #aaa;text-align:center;"> 你的浏览器不支持Canvas,请更新浏览器再试!!! </canvas> 在canvas标签之间应该做浏览器是否支持的检测,

Java入门:绘制简单图形

在上一节,我们学习了如何使用swing和awt工具创建一个空的窗口,本节学习如何绘制简单图形. 基本绘图介绍 Java中绘制基本图形,可以使用Java类库中的Graphics类,此类位于java.awt包中.在我们自己的java程序文件中,要使用Graphics类就需要使用import java.awt.Graphics语句将Graphics类导入进来. Graphics类提供基本的几何图形绘制方法,主要有:画线段.画矩形.画圆.画带颜色的图形.画椭圆.画圆弧.画多边形等.本项目仅用到画直线的功

鼠标绘制简单图形

功能: 1.绘制的图形包括直线.椭圆和矩形,通过菜单对绘制的图形切换 2.在视图中使用鼠标动态的绘制图形 分析: 当窗口尺寸发生变化时,引起窗口重绘,会发送WM_PAINT消息,这时首先会擦除窗口的背景,然后再进行重绘操作,这样就把窗口中先前绘制的图形擦除掉了:可以将绘制图形的三要素(起点.终点.绘制类型)保存下来,在窗口重绘调用程序视图类窗口的OnDraw函数中再将图形根据保存的三要素重新输出: 1.数据 在视图中添加两个点坐标 CPoint m_ptOrigin;  //起点坐标 CPoin

利用 turtle库绘制简单图形

turtle库是python的基础绘图库,这个库被介绍为一个最常用的用来介绍编程知识的方法库,其主要是用于程序设计入门,是标准库之一,利用turtle可以制作很多复杂的绘图. turtle名称含义为“海龟”,我们想象一只海龟,位于显示器上窗体的正中心,在画布上游走,它游走的轨迹就形成了绘制的图形.海龟的运动是由程序控制的,它可以变换颜色,改变大小(宽度)等. 绘图坐标体系 turtle.setup(width,height,startx,starty) 使用turtle的setup函数,可以在屏

Quartz 2D绘制简单图形

在Quartz 2D中,绘图是通过图形上下文进行绘制的,以下绘制几个简单的图形 首先先创建一个QuartzView.swift文件继承自UIView,然后实现drawRect方法: import UIKit class QuartzView: UIView { // Only override drawRect: if you perform custom drawing. // An empty implementation adversely affects performance duri

用CSS绘制简单图形

这里有篇文章, https://css-tricks.com/examples/ShapesOfCSS/  ,介绍了如何用只用1个元素和CSS规则绘制各种常见的图形: 从简单的矩形.三角形到复杂的月亮.放大镜甚至是太极图.  这种绘图方式主要用到了两类技巧: 一是使用伪元素, 二是设置图形的边框.特别是边框的使用,非常巧妙.从这些例子中可以发现:当元素的宽.高设置为0时,浏览器仍然会渲染元素的边框(即便box-sizing设置为了border-box,这时实际的宽/高会是边框的厚度之和),巧妙设

Python turtle库绘制简单图形

一.简介 Python中的turtle库是一个直观有趣的图形绘制函数库.turtle库绘制图形有一个基本框架:一个小海龟在坐标系中爬行,其爬行轨迹形成了绘制图形. 二.简单的图形列举 1.绘制4个不同半径的同切圆 代码: import turtleturtle.pensize(4)turtle.circle(10)turtle.circle(40)turtle.circle(80)turtle.circle(120)turtle.done() 结果: 2.六角形的绘制,利用turtle库绘制一个

绘制简单图形

1.三角形 - (void)drawRect:(CGRect)rect {    // Drawing code//    1.获得图形上下文    CGContextRef ctx = UIGraphicsGetCurrentContext();//    2.拼接图形    CGContextMoveToPoint(ctx, 10,10);    CGContextAddLineToPoint(ctx, 100, 100);    CGContextAddLineToPoint(ctx, 1

Windows控制台下绘制简单图形

示例代码将在注册表位置:HKEY_CURRENT_USER\Software\  读写键值 bool LicenseManage::OpenRegKey(HKEY& hRetKey) { if (ERROR_SUCCESS == RegOpenKey(HKEY_CURRENT_USER,"Software", &hRetKey)) { return true; } return false; } bool LicenseManage::CreateRegKey(stri