Play with Android drawable

Drawable every day, but do you have a complete understanding of the Drawable family? Today we will come to the system to learn about the use of drawable.

1. Overview

Used drawable of the package know drawable there are many kinds, sometimes drawable is a picture, sometimes drawable is we through the color structure of some kind of graphics. The most common form of drawable is shapedrawable, and we may often need to draw a variety of shapes such as rectangles, circles, ellipses, etc. in our development. In general, Drawable does not have the concept of size (although the width and height of drawable can be obtained by Getintrinsicheight and getintrinsicwidth two methods, but these two methods are not always valid, Because if our drawable is a picture, then the size of drawable is the size of the picture, if our drawable itself is the color, then there is no concept of wide-height, because we are in the use of drawable, Most of the time it is used as the background of a control, when the drawable is stretched to the same size as the view, at which point the size of the drawable is actually the size of the control. Next, let's look at the inheritance of drawable:

In the drawable of these inheritance classes we often use the following mainly: Layerdrawable, shapedrawable, ninepatchdrawable, bitmapdrawable, Statelistdrawable, Levellistdrawable, Transitiondrawable, insetdrawable, Scaledrawable, clipdrawable, and so on, we will introduce each of these different drawable.

2.BitmapDrawable

Bitmapdrawable is one of the most most common drawable, when we construct a bitmap object, sometimes we use bitmapdrawable, then the structure of bitmapdrawable, In addition to the new bitmadrawable in the code, we can also use XML to construct a Bitmapdrawable object, creating an XML file in the project's drawable file, with the following code:

<?xml version= "1.0" encoding= "Utf-8"? ><bitmap xmlns:android= "Http://schemas.android.com/apk/res/android"        android:antialias= "true"        android:src= "@drawable/a2w"        android:dither= "true"        android:filter= " True "        android:gravity=" Top|left "        android:tilemode=" Mirror "    ></bitmap>

Here only the SRC attribute is required, this property refers to the picture to be displayed in this bitmapdrawable, the other properties see the word meaning is easy to understand, AntiAlias indicates whether anti-aliasing is turned on, this is often used when custom view create paint Dither indicates whether the jitter effect is turned on, the effect is that when the cell phone pixel configuration and picture pixel configuration is inconsistent, the system will automatically adjust the display effect, about the picture pixel problem see Android development bitmap two sampling article; filter indicates whether the filter effect is turned on, This property is also for a better display when the image is zoomed in or out, and the Gravity property indicates that when the size of the picture is smaller than the size of the control, the picture is displayed, Tilemode represents the tiling mode, and this option is available when our Windows desktop is set. This property has four kinds of values, namely disable, repeat, mirror, clamp four, by default is disable, is not to do any processing, when we used in the other than disable in addition to three kinds of values, the gravity attribute value is invalid. Let's take a look at the effects of these three kinds of values:

My original image is this:

My bitmapdrawable is this:

<?xml version= "1.0" encoding= "Utf-8"? ><bitmap xmlns:android= "Http://schemas.android.com/apk/res/android"        android:antialias= "true"        android:src= "@drawable/p2"        android:dither= "true"        android:filter= " True "        android:gravity=" Top|left "        android:tilemode=" repeat "    ></bitmap>

My view is this:

<?xml version= "1.0" encoding= "Utf-8"? ><relativelayout    xmlns:android= "http://schemas.android.com/apk /res/android "    xmlns:tools=" Http://schemas.android.com/tools "    android:layout_width=" Match_parent    " android:layout_height= "Match_parent"    tools:context= "org.mobiletrain.drawable.MainActivity" >    < View        android:layout_width= "400DP"        android:layout_height= "400DP"        android:background= "@drawable/ Mybitmap "/></relativelayout>

This is what the display looks like:

As you can see, when the size of the picture is smaller than the size of the control, the picture repeats in both horizontal and vertical directions. If I change the value of the Tilemode property to clamp, let's take a look at the display effect:

As you can see, when the picture is smaller than the size of the control, the color of the picture in the horizontal or vertical direction automatically extends until the control fills up. Finally, we look at the mirror property, in order to see the effect, I here to change the picture, we will look at the display effect:

You see a small plane in the horizontal and vertical direction in the form of reflection in constant repetition. This is the display of the mirror effect.

3.ShapeDrawable

Shapedrawable is also a very common drawable, we are in the development of a solid color background is generally drawn, because the direct use of the image will make the app to become larger after packaging, through the XML to draw a solid background is a good choice. I'm not going to say much about this here, so look at this article and see for yourself. The shape of Android development is detailed.

4.LayerDrawable

Layerdrawable represents a hierarchical drawable, how can this be understood? People look at my previous article to understand the blog about the ProgressBar of landscaping issues.

Layerdrawable can have more than n item, each item is a drawable, each drawable in accordance with the Code of the order of each other to display. First Write first draw, after writing after the drawing, the final display of the effect is an overlay of the display effect, we look at the following example:

<?xml version= "1.0" encoding= "Utf-8"? ><layer-list xmlns:android= "http://schemas.android.com/apk/res/ Android "><item>    <shape android:shape=" Rectangle ">        <solid android:color=" @color/ LineColor "/>    </shape></item>    <item android:bottom=" 8DP ">        <shape android: Shape= "Rectangle" >            <solid android:color= "@color/linecolor2"/>        </shape>    </item>    <item android:bottom= "1DP" android:left= "1DP" android:right= "1DP" >        <shape android:shape= " Rectangle ">            <solid android:color=" @color/etbg "/>        </shape>    </item></ Layer-list>

I take this drawable as the background of EditText, the code is as follows:

<?xml version= "1.0" encoding= "Utf-8"? ><linearlayout    android:orientation= "vertical"    xmlns: Android= "http://schemas.android.com/apk/res/android"    xmlns:tools= "Http://schemas.android.com/tools    " Android:layout_width= "Match_parent"    android:layout_height= "match_parent"    android:padding= "8DP    " tools:context= "Org.mobiletrain.drawable.MainActivity" >    <edittext        android:background= "@drawable/ Textview_background "        android:layout_width=" match_parent "        android:text=" Jiangnan little Rain "        android:layout_ height= "Wrap_content"/>    <edittext        android:text= "Jiangnan little Rain"        android:layout_margintop= "20DP"        android:layout_width= "match_parent"        android:layout_height= "Wrap_content"/></linearlayout>

The display effect is as follows (above is the background display effect, the following is the normal edittext display effect):

As you can see, the above edittext is a little different because I first drew a blue rectangle in the layerdrawable and then painted a green rectangle, but this green rectangle has a height of 8dp from the bottom, which guarantees that the input box has two upward-upturned blue borders, Finally, the entire background color, the entire background color is yellow, but the background color distance from the left and right three sides of the distance is 1DP, so that the other three lines can be displayed properly. OK, it's that simple, more cool usage. See the landscaping issues with ProgressBar.
5.LevelListDrawable
Levellistdrawable, as the name implies, is a hierarchical drawable, which is to switch drawable based on the different levels of the control, somewhat akin to updating drawable in selector based on the state of the control. The difference is that this is updated based on the level of the control. For example, here is a simple levellistdrawable file:

<?xml version= "1.0" encoding= "Utf-8"? ><level-list xmlns:android= "http://schemas.android.com/apk/res/ Android ">    <item        android:drawable=" @drawable/p2 "        android:maxlevel="        android:minlevel= " 0 "/>    <item        android:drawable=" @drawable/p1 "        android:minlevel=" one "        android:maxlevel=" 20 "/ ></level-list>

This levellistdrawable file indicates that when the level of the control is between 0~10, the picture P2 is displayed, and when the level of the control is between 11~20, the picture P1, let's look at my ImageView:

<imageview        android:layout_width= "200DP"        android:scaletype= "Centercrop"        android:id= "@+id/iv"        android:src= "@drawable/level_list_drawable"        android:layout_height= "200DP"/>

In ImageView the Levellistdrawable object as its src, and then when I click on the button to change the level of ImageView, this time the picture will change. Click the event code below:

public void Toggle (view view) {        if (flag) {            iv.setimagelevel (5);            Flag = false;        } else{            iv.setimagelevel ();            Flag = true;        }    }

The display results are as follows:

It is important to note that the level value range is 0~10000 and the default value is 0.

6.TransitonDrawable

Transitiondrawable is primarily the effect of fading between two drawable. Let's take a look at the transitiondrawable file:

<?xml version= "1.0" encoding= "Utf-8"? ><transition xmlns:android= "http://schemas.android.com/apk/res/ Android ">    <item android:drawable=" @drawable/p1 "/>    <item android:drawable=" @drawable/p2 "/> </transition>

Look again at the ImageView file:

<imageview        android:layout_width= "200DP"        android:scaletype= "Centercrop"        android:id= "@+id/iv"        android:src= "@drawable/transition_drawable"        android:layout_height= "200DP"/>

Click on the event as follows:

public void Toggle (view view) {        transitiondrawable drawable = (transitiondrawable) iv.getdrawable ();        Drawable.starttransition (+);    }

The display results are as follows:

7.InsetDrawable

Insetdrawable indicates that a drawable can be embedded in itself. Similar effects can be achieved using layerdrawable. Take a look at the code:

<?xml version= "1.0" encoding= "Utf-8"? ><inset xmlns:android= "Http://schemas.android.com/apk/res/android"       android:insetbottom= "20DP"       android:insetleft= "20DP"       android:insetright= "20DP"       android: insettop= "20DP" >    <shape android:shape= "Oval" >        <solid android:color= "@color/coloraccent"/>    </shape></inset>

The spacing between the center circle and the upper and lower left and right sides of the control is 20DP, of course, the place where the image is set can also be written as follows:

<?xml version= "1.0" encoding= "Utf-8"? ><inset xmlns:android= "Http://schemas.android.com/apk/res/android"       android:insetbottom= "20DP"       android:drawable= "@drawable/p1"       android:insetleft= "20DP"       android: insetright= "20DP"       android:insettop= "20DP" ></inset>

8.ClipDrawable

Indicates that the drawable is clipped according to a drawable level, with the following code:

<?xml version= "1.0" encoding= "Utf-8"? ><clip    android:drawable= "@drawable/p1"    android: cliporientation= "Horizontal"    android:gravity= "left"    xmlns:android= "http://schemas.android.com/apk/res/ Android "></clip>

Drawable represents the drawable image, Cliporientation represents the clipping direction, whether it is clipped horizontally or vertically, this property mates with the Gravity property, and the percentage of each trim is related to the value of the Level property. The value range for the Level property is 0~10000,0 for full cropping, 10000 for no clipping, 5000 for clipping, other values and so on.

Above.

Play with Android drawable