This article shares the detailed usage of the Drawable method in Android for your reference. The specific content is as follows
1. BitmapDrawable related methods:
Created in the drawable directory, the example is as follows:
<bitmap xmlns:andro android:antialias="true" android:dither="true" android:filter="true" android:gravity="center" android:mipMap="false" android:src="@drawable/ic_launcher" android:tileMode="disabled" />
The specific explanation of each attribute is as follows:
<?xml version="1.0" encoding="utf-8"?> <bitmap xmlns:andro <!-- Picture anti-aliasing effect,Turn on it smoothens the picture,It can also reduce the image resolution to a certain extent(Negligible amplitude) --> android:antialias="true" <!-- Whether to turn on the jitter effect,Turn on this option to dye high-quality pictures and display them better on low-quality screens. --> android:dither="true" <!-- Whether to enable filtering,Turn on to maintain a good display effect --> android:filter="true" <!-- Gravity control picture,Can control the image position,Can also be passed“|”To use in combination: top Images on top,Don't change the image size bottom Put the picture at the bottom,No change in size left Put the picture on the left,No change in size right Put the picture on the right,No change in size center_vertical Make the picture vertically centered,No change in size fill_vertical The picture fills the entire container vertically center_horizontal The picture is centered horizontally,Don't change the image size fill_horizontal The picture is full of horizontal direction center Center in the middle of the picture fill Pictures filled with containers,This is the default value clip_vertical Additional Options,Indicates vertical cutting,Less used clip_horizontal Additional Options,It is horizontal cutting,Less used --> android:gravity="center" <!-- Texture Mapping,Once forfalse --> android:mipMap="false" <!-- Image data source --> android:src="@drawable/ic_launcher" <!-- There are several values as follows,The corresponding method is as follows: disabled Default Mode,Close the tiling repeat Flat laying horizontally and vertically in orders mirror A mirror projection effect in horizontal and vertical directions clamp All around pixels diffuse to surrounding areas --> android:tileMode="disabled" />
The above layout method is only for the convenience of viewing and cannot be copied directly into the code.
2. ShapeDrawable, solid color, gradient color drawable
Basic example code:
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:andro android:shape="rectangle"> <corners android:bottomLeftRadius="1px" android:bottomRightRadius="1px" android:radius="2px" android:topLeftRadius="1px" android:topRightRadius="1px" /> <gradient android:angle="5" android:centerColor="#ff789434" android:centerX="x" android:centerY="y" android:endColor="#34234324" android:gradientRadius="55dp" android:startColor="#ff783247" android:type="linear" android:useLevel="true" /> <padding android:bottom="5dp" android:left="5dp" android:right="5dp" android:top="5dp" /> <size android:width="70dp" android:height="70dp" /> <solid android:color="#fffff333" /> <stroke android:width="30dp" android:color="#33333333" android:dashGap="4dp" android:dashWidth="4dp" /> </shape>
Detailed description of each label:
<shape>Represents the image shape
Represents the shape of the figure, with four options: rectangle, oval, line, and ring. The default is rectangle. When using line and ring, you need to use the stroke attribute to specify the width and color of the line, otherwise the display effect will be abnormal.
When setting ring, there are five special properties, corresponding to the following:
android:innerRadius—When the inner radius and innerRadiusRatio exist at the same time, innerRadius shall prevail.
android:thickness—the thickness of the ring, and the outer radius minus the inner radius
android:innerRAdiusRatio—The inner radius accounts for the width ratio of the entire drawable, default is 9
android:thicknessRadio——The thickness ratio of our entire Drawable is 3, and the calculation method is thickness = width/n
android:useLevel - False should be used generally unless it is used as LevelListDrawable
<corners> (Four corner angles, suitable for rectangles)
The angle of the four corners of the shape. It only uses the rectangle, the angle value is the degree of rounded corners, which is expressed in px. Among them, radius is used to set angles for the four angles, and the priority is relatively low. topLeftRadius, topRightRadius, bottomLeftRadius, bottomRightRadius respectively represent the angles of the upper left, upper right, lower left and lower right corners.
<gradient> (color gradient)
It represents gradient fill, which is mutually exclusive to the label, and contains several attribute values as follows:
android:angle—Gradar angle, default is zero, and the value must be multiples of 45.
android:centerX——the horizontal axis of the gradient center point
android:centerY—the vertical coordinate of the gradient center point
android:startColor—Gradial start color
android:centerColor—the middle color of gradient
android:endColor—the end color of gradient
android:gradientRadius——Gradient Radius
android:useLevel—usually false, only if android:type="radial"
android:type - the type of gradient, there are three types: linear (linear), radial (radial gradient), and sweep (scan line gradient), and default is linear gradient
<solid> (Solid color fill)
Through android:color, you can specify the color of the fill in the shape
<stroke> (stroke attribute)
Contains the following commonly used tags:
android:width—the width of the stroke, the larger the shape edge will look thicker
android:color - the color of the stroke
android:dashWidth—the width of the segment that makes up the dotted line
android:dashGap——The interval between the segments that make up the dotted line. The larger the interval, the larger the gap.
<padding>Inner margin
It can be understood as an inner margin. When used, it is similar to adding margins directly in the view. It contains four attributes: android:top, android:bottom, android:left and android:right, respectively representing the upper, lower, left and inner margins.
<size>
There are two attributes android:width and android:height, which indicate the width and height of the view, which are similar to the width and height of the image itself, and will be stretched according to the situation in the view.
3. LayerDrawable hierarchical Drawable, similar to layer
A collection of multiple drawables is similar to the concept of layers. By placing different drawables on different layers, it achieves an overlay effect. Its syntax rules are as follows:
<?xml version="1.0" encoding="utf-8"?> <layer-list xmlns:andro > <item android: android:bottom="1dp" android:drawable="@drawable/ic_launcher" android:left="1dp" android:right="1dp" android:top="1dp"> </item> </layer-list>
A layer-list can contain multiple items, each item represents a drawable. Up, down, left and right are attributes representing the up, down, left and right offset of Drawable relative to view, and the unit is pixels. You can directly refer to a drawable resource through drawable. You can also customize the drawable directly under the item tag.
By default, all drawables in layer-list will be scaled to the size of the view. The layer-list has a hierarchical concept, and the drawable below will override the drawable above. Through reasonable layering, some special superposition effects can be achieved.
4. StateListDrawable (selector)
The selector tag, the corresponding tag is <selector>, which is also a drawable collection, which is often used to change the color according to the current state.
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:andro <!-- Will it change with the change of state,Default isfalse,It means it will change with --> android:constantSize="true" <!-- Whether to turn on shaking,Turn on to get better display on low-resolution phones,Recommended astrue --> android:dither="true" <!-- Whether the inner margin changes with the state,Recommended astrue --> android:variablePadding="true"> <item <!-- Correspondingdrawable --> android:drawable="@drawable/ic_launcher" <!-- Press status,for examplebuttonPressed but not released --> android:state_pressed="true" <!-- expressViewAlready gained focus --> android:state_focused="true" <!-- Whether the cursor is hovering,4.0Future features --> android:state_hovered="true" <!-- express用户选择了view --> android:state_selected="true" <!-- express组件是否能被选中,likeRadioButton --> android:state_checkable="true" <!-- express用户选中了view,Generally used to select buttons --> android:state_checked="true" <!-- expressviewCurrently available --> android:state_enabled="true" <!-- expressviewIn active state --> android:state_activated="true" <!-- Is the application in the foreground? --> android:state_window_focused="true"> </item> </selector>
Note: If there are multiple items, the program will automatically match from top to bottom, and the first match will be applied. (Not by best match) If an item does not have any state description, then it will be matched by any state. Therefore, the default item should be placed in the last one, otherwise the following options will have no effect.
5. LevelListDrawable (switch different drawables at different levels)
LevelListDrawable corresponds to the <level-list> tag and is used to represent a drawable collection. Each drawable in the set has a level. According to different levels, LevelListDrawable will be switched to the corresponding Drawable. The specific details are as follows:
<?xml version="1.0" encoding="utf-8"?> <level-list xmlns:andro > <item <!-- Correspondingdrawable --> android:drawable = "@drawable/ic_lunch" <!-- Maximum level --> android:maxLevel = "2" <!-- Minimum level --> android:minLevel = "1"> <!-- 在最大和Minimum level之间of等级会对应此itemIn-houseDrawable,When it worksviewBackground time,Can be passed DrawableofsetLevel方法来设置不同of等级,从而切换具体ofdrawable。还Can be passedImageViewof setImageLevelMethod to switch,The level range is0arrive10000,0It's the default value --> </item> </level-list>
6. TransitionDrawable (can realize fading in and out)
The corresponding one is the <transition> tag, which is used to achieve the effect of fading between two drawables. The specific usage method is as follows
<?xml version="1.0" encoding="utf-8"?> <transition xmlns:andro > <item <!-- Correspondingdrawable --> android:drawable = "@drawable/ic_lunch" <!-- Correspondingid --> android:id = "@+id/item1" <!-- drawableThe offset around --> android:top = "1dp" android:right = "1dp" android:bottom = "1dp" android:left = "1dp"> </item> </transition>
How to use:
Define gradients
<?xml version="1.0" encoding="utf-8"?> <transition xmlns:andro> <item android:drawable="@drawable/drawable1" /> <item android:drawable="@drawable/drawable" /> </transition>
Add gradient to background
<TextView android:id = "@+id/button" andoird:layout_height = "wrap_content" android:layout_width = "wrap_content" android:background = "@drawable/transition_drawable" />
Control in code
TextView textView = (TextView)findViewById(); TransitionDrawable drawable = (TransitionDrawable)(); (1000);
7. InsetDrawable (Inline a Drawable)
You can embed Drawable into your own interior and leave a gap around it. It is generally used in views that want your background to be smaller than your actual area.
<?xml version="1.0" encoding="utf-8"?> <inset xmlns:andro <!-- CorrespondingDrawable,It can also be written directly inside --> android:drawable="@drawable/ic_launcher" <!-- DrawableMargins away from the surrounding --> android:insetBottom="2dp" android:insetLeft="2dp" android:insetRight="2dp" android:insetTop="2dp" > <!-- 内部用来放置CorrespondingDrawable,You can also quote it directly above --> </inset>
8. ScaleDrawable (scaling class, can be reduced)
The corresponding code is as follows:
<?xml version="1.0" encoding="utf-8"?> <scale xmlns:andro <!-- CorrespondingDrawable --> android:drawable="@drawable/ic_launcher" <!-- Display location --> android:scaleGravity="center" <!-- Corresponding缩放比例 --> android:scaleHeight="50%" android:scaleWidth="50%" > </scale>
When using it, you must set the Drawable level, otherwise it cannot be used. The code for setting the level is as follows:
View testScale = findViewById(.test_scale); scaleDrawable testScaleDrawable = (ScaleDrawable)(); (1);//The range is 1~10000, as long as it is not zero
9. ClipDrawable (clipping Drawable according to different settings)
Another Drawable can be cut according to the current level. The specific code is as follows:
<?xml version="1.0" encoding="utf-8"?> <clip xmlns:andro <!-- Cropping direction,Horizontal or vertical --> android:clipOrientation="horizontal" android:drawable="@+id/icon" <!-- andclipOrientationUse in conjunction,See the instructions below for details--> android:gravity="top" > </clip>
top - Place to top, if vertically crop, start from the bottom to crop
bottom - Put it to the bottom, if it is vertically cut, then start cutting from the top
left - put it on the left, if it is horizontal cropping, then start from the right (this is the default)
right - put it on the right. If it is horizontal cropping, then start cutting from the left.
center_vertical—When vertically centered, vertically cut, up and down at the same time when cutting vertically
fill_vertical—Fill in vertical direction. If it is vertical cropping, the clipping behavior will only occur when the clipDrawable level is 0 (not visible at this time, it is completely cropped).
(The horizontal direction also has properties similar to vertical, corresponding to center_horizontal and fill_horizontal, and the usage is similar to the above two)
center—center center, reduce up and down at the same time when vertical cropping, reduce left and right at the same time when horizontal cropping
fill - fills the entire drawable, valid when the clipDrawable level is zero
clip_vertical—additional option, vertical cut table
clip_horizontal—additional option, vertical cut table
When using it, you need to set the level in the code as follows
ImageViwe testClip = (ImageView)findViewById(.test_clip); ClipDrawable testClipDrawable = (ClipDrawable)(); //The level is from 0 to 10000, the level 0 means complete cropping, and the level 10000 means no cropping(5000);
The above is all about this article, I hope it will be helpful to everyone's learning.