shape-self-Drawing simple graphics

Shape can draw simple shapes, colors, and so on. It is mainly used in some states of selector.

The content of this article is referenced from http://www.cnblogs.com/cyanfei/archive/2012/07/27/2612023.html

Self-validating the next, learning record

It mainly has the following parts, namely

Fill (solid): Sets the color of the fill

interval (padding): sets the interval in four directions

size: Set Size

Fillet (corners): Sets the shape fillet, which is square by default

gradient (gradient): when the fill color is set, there is no gradient effect. The value of the angle must be a multiple of 45 (including 0), only valid in type= "linear", or it will be an error. Android:uselevel This attribute does not know what is the use.

Next, for the above content, write your own demo to verify learning.

1. Verifying the corners effect

Code

<?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 >

Effect

It can be found that RADIUS does not work when the five properties of the fillet radius are all set.

And then we're missing a property to try.

< Corners         Android:bottomleftradius = "18DP"         android:bottomrightradius= "30DP"        android:radius= "20DP"/ >

Effect

We can come to the conclusion

android:radius= "20DP" sets the radius of Four Corners

android:topleftradius= "20DP" sets the radius of the upper-left corner
Android:toprightradius= "20DP" set the radius of the upper-right corner
android:bottomleftradius= "20DP" setting the radius of the lower right corner
Android:bottomrightradius= "20DP" set the radius of the lower left corner

Radius is a set of four corner arc radii, but this angle is set individually, giving preference to single-angle values

In addition, the fill color solid must have, otherwise cannot see

2. We'll add a border to the above graphic stroke

<?XML version= "1.0" encoding= "Utf-8"?><Shapexmlns:android= "Http://schemas.android.com/apk/res/android" >    <CornersAndroid:bottomleftradius= "18DP"Android:bottomrightradius= "30DP"Android:radius= "20DP"Android:topleftradius= "12DP"Android:toprightradius= "24DP" />    <StrokeAndroid:dashgap= "3DP"Android:dashwidth= "10DP"Android:width= "10DP"Android:color= "#0000ff" />    <SolidAndroid:color= "#ff0000" /></Shape>

Look at the effect

Then we change the properties

< Stroke         Android:dashgap = "10DP"         android:dashwidth= "3DP"        android:width= "20DP"         Android:color= "#0000ff"/>

Results

If the dash attribute has a value of 0, or does not add this property

The result is

Conclusion

Stroke: Dashwidth and Dashgap properties, as long as one is set to 0DP, the border is a solid border

Android:width= "20DP" sets the width of the edge
Android:color= "@android: Color/black" Sets the color of edges
Android:dashwidth= "2DP" to set the width of the dashed line
android:dashgap= "20DP" sets the interval width of the dashed line

And the added edge width is not from the original shape of the outer ring, but in the inside of the half

3. We add a gradient effect gradient

<?XML version= "1.0" encoding= "Utf-8"?><Shapexmlns:android= "Http://schemas.android.com/apk/res/android" >    <CornersAndroid:bottomleftradius= "18DP"Android:bottomrightradius= "30DP"Android:radius= "20DP"Android:topleftradius= "12DP"Android:toprightradius= "24DP" />    <StrokeAndroid:dashgap= "8DP"Android:dashwidth= "4DP"Android:width= "20DP"Android:color= "#0000ff" />    <GradientAndroid:startcolor= "#00ff00"Android:centercolor= "#ffff00"Android:endcolor= "#00ffff"Android:uselevel= "true"Android:angle= "+"Android:type= "Linear"Android:gradientradius= "+"        />    <SolidAndroid:color= "#ff0000" /></Shape>

Run the above code error

Reason

Angle = "30" is not 45 times times the number

After modification

Reason

Solid fill attribute inside, resulting in invalid gradient effect

Remove the fill item. Then we study angle.

The value of angle must be a multiple of 45 (including 0), only valid in type= "linear"

Look at the effect of different values when angle

                     0                                                       45                                               90                                                  135

180 225 270 315

From the above results, there seems to be no regularity.

This is caused by the fact that we set the attribute android:uselevel= "true"

If we set this value to False, we will find that its linear law is

For example, when we set uselevel = "false", Angle = 225

Where the attribute that determines the position of the middle color is

Android:centerx= "50%" android:centery= "50%"  

For other properties

See the example below

<GradientAndroid:angle= "225"Android:centercolor= "#00ff00"Android:endcolor= "#0000ff"Android:centerx= "50%"Android:centery= "50%"Android:startcolor= "#ff0000"Android:type= "Radial"Android:gradientradius= "Max"Android:uselevel= "false" />

Results

Modify the properties, as follows

<GradientAndroid:angle= "225"Android:centercolor= "#00ff00"Android:endcolor= "#0000ff"Android:centerx= "100%"Android:centery= "50%"Android:startcolor= "#ff0000"Android:type= "Radial"Android:gradientradius= "$"Android:uselevel= "false" />

Results

We can come to the conclusion

android:centerx= "100%"
android:centery= "50%"

These two properties are the starting point of the gradient

Radial this is a radial gradient.

We're looking at it.

<GradientAndroid:angle= "225"Android:centercolor= "#00ff00"Android:endcolor= "#0000ff"Android:centerx= "50%"Android:centery= "50%"Android:gradientradius= "$"Android:startcolor= "#ff0000"Android:type= "Sweep"Android:uselevel= "false" />

Results

We can find that the

Android:gradientradius= "$"

It's not working anymore, but

Android:centerx= "50%" android:centery= "50%"  

It works the same way.

4. We try to change the size of the next shape

Above our size is not set, are adaptive control size, now we modify the following

Test controls

<ImageButtonAndroid: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 setting

< size         Android:height = "100DP"         android:width= "100DP"/>

Results

We continue to change

< size         Android:height = "300DP"         android:width= "300DP"/>

When we set the control to adaptive

In other words, this property is equivalent to making a picture that sets the size of the image.

5. We now look at the nature of the padding

Look at the contrast

< padding                  Android:left = "100DP"         android:top= "20DP"        android:bottom= "20DP"        android: Right= "20DP"        />    <size        android: Height= "100DP"        android:width= "100DP"/>

Results

But when we get rid of padding,

In fact, there is no difference. Someone on the internet said

Padding use alone is ineffective and must be a shape as an item when it is used. Let's do the investigation later.

shape-self-Drawing simple graphics