Android shape details, androidshape

Android shape details, androidshape
I. Overview images are often used in android development. Some simple images can be replaced by shape drawable resources, one advantage of using shape is that we can reduce the size of our apk. Because of the same effect, shape is more space-saving than the image. Well, let's not talk about it. Let's go to the topic below. 2. shape is an Important Role in android drawable resources. It has a wide coverage of drawable resources. It not only represents images, but also colors and shapes, because shape is simple and practical, next, let's take a look at the shape classification:

Rectangle:

Rectangle indicates the rectangle of the shape. It is the default shape type of the shape, that is, if we do notandroid:shapeWhen the attribute specifies its type, the default value is a rectangle. We can use it to draw a rectangle with rounded corners.

Oval:

Ovel, oval. It can be used to draw an ellipse, circle

Line:

Horizontal line. When using this shape, we need to specify the stroke element to specify its width. Otherwise, a null pointer exception will be reported when using this shape.

Ring:

Ring

Next we will use the various shapes mentioned above to draw images and create various simple shapes. 3. Use the shape below to see some simple images drawn using the shape, afterwards, I will explain the various attributes of the shape Based on the graph and some precautions:

Some of the above figures are drawn using shape. The first two rows are some simple shapes of the rectangle (rectangle ).

Let's take a look at the xml code of the graph implementation in the second line. The rest of the graph will not be pasted, or the article will be too long:

• First

<Shape xmlns: android = "http://schemas.android.com/apk/res/android"> <! -- Set the fixed fill color --> <solid android: color = "# f00"/> <size android: width = "60dp" android: height = "30dp"/> </shape>

• Second

<Shape xmlns: android = "http://schemas.android.com/apk/res/android" android: shape = "rectangle"> <size android: width = "60dp" android: height = "30dp"/> <! -- Set gradient fill color --> <gradient android: startColor = "# 00f" android: centerColor = "#0f0" android: endColor = "# f00"> </gradient> </shape>

• Third

<Shape xmlns: android = "http://schemas.android.com/apk/res/android"> <size android: width = "60dp" android: height = "30dp"/> <! -- Set stroke --> <stroke android: width = "2dp" android: color = "# f00"> </stroke> </shape>

• Fourth

<Shape xmlns: android = "http://schemas.android.com/apk/res/android"> <size android: width = "60dp" android: height = "30dp"/> <! -- Set stroke --> <stroke android: width = "2dp" android: color = "# f00" android: dashWidth = "5dp" android: dashGap = "5dp"> </stroke> </shape>

• Fifth

<Shape xmlns: android = "http://schemas.android.com/apk/res/android"> <size android: width = "60dp" android: height = "30dp"/> <! -- Set stroke --> <stroke android: width = "2dp" android: color = "# f00" android: dashWidth = "5dp" android: dashGap = "5dp"> </stroke> <corners android: radius = "15dp"/> </shape>

• Sixth

<Shape xmlns: android = "http://schemas.android.com/apk/res/android"> <! -- Set the fixed fill color --> <solid android: color = "# f00"/> <size android: width = "60dp" android: height = "30dp"/> <corners android: radius = "10dp"/> </shape>

• Seventh

<Shape xmlns: android = "http://schemas.android.com/apk/res/android" android: shape = "rectangle"> <size android: width = "60dp" android: height = "30dp"/> <! -- Set gradient fill color --> <gradient android: startColor = "# f00" android: centerColor = "#0f0" android: endColor = "# 00f" android: gradientRadius = "60" android: type = "radial"> </gradient> </shape>

• Eighth

<Shape xmlns: android = "http://schemas.android.com/apk/res/android"> <size android: width = "60dp" android: height = "30dp"/> <! -- Set stroke --> <stroke android: width = "2dp" android: color = "# f00"> </stroke> <corners android: radius = "15dp"/> </shape>

• Ninth

<Shape xmlns: android = "http://schemas.android.com/apk/res/android"> <size android: width = "60dp" android: height = "30dp"/> <! -- Set gradient fill color --> <gradient android: startColor = "# f00" android: centerColor = "#0f0" android: endColor = "# 00f" android: type = "sweep"> </gradient> </shape>

• Tenth

<Shape xmlns: android = "http://schemas.android.com/apk/res/android"> <size android: width = "60dp" android: height = "30dp"/> <! -- Set stroke --> <stroke android: width = "2dp" android: color = "# f00" android: dashWidth = "5dp" android: dashGap = "5dp"> </stroke> <corners android: radius = "15dp" android: topRightRadius = "0dp" android: bottomRightRadius = "0dp"/> </shape>

There are a lot of code above. You should take a closer look at the comments in the Code, some simple labels and attribute comments. Let's take a look at the use of tags with relatively complex points:

Stroke:

This label element is used to set the stroke. It has four attributes.

• Width: Set the stroke width.
• Color: Set the stroke color.
• DashWidth: Set the broken line width.
• DashGap: Set the gap width between broken line

Note:
DashWidth and dashGap must be used at the same time to take effect. If no one of them or any of them is set to 0, the stroke is solid, but the stroke is dotted. This label must be set when the shape is line. Otherwise, a null pointer exception is reported when the stroke is used.

Corners:

This label element is used to set the rounded corner. It has five attributes:

• Radius
• TopLeftRadius
• TopRightRadius
• BottomLeftRadius
• BottomRightRadius

Set all rounded corners, rounded corners in the upper left corner, rounded corners in the upper right corner, rounded corners in the lower left corner, and rounded corners in the lower right corner. If we want the shape of column 5th in the first row, we only need to set the radius value. If we want the effect of the fifth column in the second row, we can set the radius to 15dp, and then settopRightRadius=‘0dp’AndbottomRightRadius='0dp'You can control others based on your needs.

Gradient:

This label element is used to set the gradient fill color. It has nine attributes:

• StartColor: gradient start color. If the gradient type is radial gradient, the start color is in the middle.
• CenterColor: Intermediate gradient color
• EndColor: gradient end color
• UseLevel: boolean value ["true" | "false"] to use a LevelListDrawable object, set it to true. Set to true without gradient. False indicates gradient.
• Angle: gradient angle of Integer type
  (PS: When angle is 0, the gradient changes from left to right. Then it turns counter-clockwise. When angle is 90, it goes from bottom to top. Angle must be an integer multiple of 45)

• Type: ["linear" | "radial" | "sweep"] gradient type (values: linear, radial, and sweep)
  1. linear gradient, which is the default setting
  2. radial gradient
  3. sweep angle gradient

  If you have ps or Ai experience, you should be able to understand this attribute well.

• CenterX: relative position of the X-point coordinate of the integer gradient Center

• CenterY: the relative position of the Y coordinate of the integer gradient Center
• GradientRadius: gradient radius of an integer. this parameter is used only when android: type = "radial. Using android: type = "radial" alone has no effect.

Some of the above attributes are not very commonly used. When using this label, you should pay attention to the problem, that is, when using this labelgradientRadiusNotes for Attributes

The rectangle shape is basically the above. Someone may ask here why there is no square. Haha, this question can be asked, indicating that you have not noticed the size label, the rectangles above are set <size android:width="60dp" android:height="30dp"/>If you want a square, set the width and height to equal. The ovel shape is the same as that of the rectangle. cornersThe label does not work on the elliptical shape, because I want to get it from the big toe. I will say so much about the rectangular shape and the elliptical shape. Let's take a look at the ring and line shapes.

Ring:

Ring, ring, used to draw a ring. After reading the shape of the fourth row above, it feels a bit like ovel, not like it, the above 13 and 16 can be drawn in the same shape. We did not notice that the root label of the shape has many attributes, but we only use the shape attribute for the rectangle and the ellipse above, this is because
The following attributes are only available for android: shape = "ring:

• Android: innerRadius, radius of the inner ring.
• Android: innerRadiusRatio float type. The radius of the inner ring is expressed by the ring width ratio. For example, if android: innerRadiusRatio, the radius of the inner ring is equal to the width of the ring divided by 5, this value can be overwritten. The default value is 9. The innerRadiusRatio attribute is used for the value 20.
• Android: Dimensions, ring Thickness
• Android: thicknessRatio float type, the ring thickness is expressed by the ring width ratio. For example, if android: thicknessRatio = "2", the ring thickness is equal to the ring width divided by 2. This value can be overwritten by android: thickness. The default value is 3.

To draw a ring, we can determine the radius of the inner circle and the radius and center of the outer circle, or we know that the radius of the inner circle and the thickness and center point of the ring can also draw the ring, because the radius of the inner circle and the thickness can get the outer radius, but is the android official website asking me to set the incircle radius? innerRadiusAnd Thickness thicknessWe can draw a circle in the way of the height and size of the ring. When we draw a circle, we must mainly set the label height to be greater than 0, otherwise nothing will be seen, when the height is larger than the outer circle radius, note that it is the outer circle radius so that a complete ring can be displayed. Otherwise, it will be as shown in Figure 20, the above and below are incomplete phenomena. Have you noticed the pictures 17,18, 19? When we set the gradient color of the ring (the same as the fixed color) if we set the stroke, we will get 18 images. If we only give the stroke without filling, we will get 19 images, if we only fill the graph with no stroke, we will get the 16th or 17th graph. The fill can be gradient filling or fixed filling. So much about rings. Let's take a look at the Line shape.

Line:

Line, line? Yes, it is a line. When we use the line shape, we only need to set the stroke (must be set) and size height, when I drew the line shape in the above image, I found that if we only set the stroke, but did not set the size of the height or height value smaller than the stroke value, we will not see anything. The effect of setting the size height is clearly compared to the 21,22 figure. A simple demo will be posted later, and if we want to get the dotted line, then we set dashWidth and dashGap. Note that both must be set at the same time and cannot be set to 0; otherwise, it is solid, but even if we set dashWidth and dashGap, we still may not get the dotted line because. android has disabled the hardware acceleration function since Android, so it cannot be displayed. The solution is in AndroidManifest. set in xmlAndroid: hardwareAccelerated = "false", or in activityView. setLayerType (View. LAYER_TYPE_SOFTWARE, null) "Disable hardware acceleration. Labels solid and gradient have no effect on line shape.

Well, I believe you have a certain understanding of the shape image after reading it. This article is written here. Demo: http://download.csdn.net/detail/ydxlt/9073157

Copyright Disclaimer: This article is an original article by the blogger and cannot be reproduced without the permission of the blogger.