Play to the Android drawable use _android

Source: Internet
Author: User

Drawable every day, but do you have a complete understanding of the Drawable family? Today we are going to study the use of drawable system.

1. Overview
Use the drawable of the cheese know drawable There are many kinds, sometimes drawable is a picture, sometimes drawable is the color we constructed out of some kind of graphics. The most common form of drawable is shapedrawable, and we may often need to draw a rectangle, circle, ellipse, etc. in our development. Generally speaking, the concept of drawable is not large (although it is possible to get the width and height of the drawable through the Getintrinsicheight and getintrinsicwidth two methods, but these two methods are not always valid. Because if our drawable is a picture, then the size of the drawable is the size of the picture, if our drawable itself is color, then there is no concept of the wide-high, because we use the drawable, Most of the time it is used as a background of a control, when the drawable will be stretched to the same size as the view, when the size of the drawable is actually the size of the control. Next, let's look at the inheritance relationship of drawable:

Among these inherited classes in drawable are the following: Layerdrawable, Shapedrawable, ninepatchdrawable, bitmapdrawable, Statelistdrawable, Levellistdrawable, Transitiondrawable, insetdrawable, Scaledrawable, clipdrawable, and so on, we will introduce 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 bitmapdrawable construct, In addition to the new bitmadrawable in the code, we can also use XML to construct a Bitmapdrawable object that creates a new XML file in the project's drawable file, 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 bitmapdrawable to display the picture, other properties to see the meaning of the word is easy to understand, AntiAlias indicates whether to open anti-aliasing, this is a custom view creation paint often used Dither indicates whether the jitter effect, the function is the cell phone pixel configuration and picture pixel configuration is inconsistent, the system will automatically adjust the display effect, about picture pixel problem see Android development of the bitmap two sampling articles; filter indicates whether the filter effect is turned on. This property is also for the image to be magnified or reduced when there is a better display effect; 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 tile mode, and this option is available on our Windows computer desktop settings. This property has four values, namely, disable, repeat, mirror, clamp four, by default, disable, or no processing, when we use the other three values except disable, the Gravity property value is invalidated. Let's take a look at the effects of these three types of values:
My original artwork is this:

My bitmapdrawable is like 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 effect is like:


As you can see, when the size of a 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 at the end of the horizontal or vertical direction will automatically extend until the control fills up. Finally, we look at the mirror property, in order to facilitate the see effect, I will change the picture here, we look at the display effect:


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

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 picture will make the app after the package becomes larger, through the XML to draw a solid color background is a good choice. About this I will not say more here, we look at this article to understand themselves. Android Development's shape is detailed.

4.LayerDrawable
layerdrawable represents a hierarchical drawable, how to understand this? Everyone look at my previous article to understand the blog about the beautification of the ProgressBar problem.
Layerdrawable can have n multiple item, each item is a drawable, each drawable in accordance with the order of the code to show each other. First Write first draw, after writing after the draw, the final display effect is a superposition 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 the EditText, the code is as follows:

<?xml version= "1.0" encoding= "Utf-8"?> <linearlayout "android:orientation=" 
 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, below is the normal edittext display effect):


As you can see, the above edittext is a bit different because I first drew a blue rectangle in the layerdrawable and then drew a green rectangle, but the green rectangle is 8DP above the bottom, which ensures that the input box has two blue borders that rise upwards. Finally, the entire background color is painted, the entire background color is yellow, but the back color distance from the next three sides of the distance is 1DP, this ensures that the other three lines can be displayed normally. OK, that's the simple, more cool usage. See the landscaping issues about ProgressBar.

5.LevelListDrawable
levellistdrawable, as the name implies is a level drawable, it is based on the control of different levels to switch drawable, a bit similar to the selector in accordance with the State of the control to update the drawable. 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" /> 

This levellistdrawable file means that when the level of the control is between 0~10, the picture P2 is displayed and the picture is displayed when the level of the control is between 11~20 and P1, let's take a 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 as follows:

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

The display effect is as follows:


Here you need to note that the level of the range is 0~10000, the default value is 0.

6.TransitonDrawable
transitiondrawable is mainly to achieve the effect of fading between two drawable. Let's 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 at the ImageView file again:

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

Click the event as follows:

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

The display effect is as follows:


7.InsetDrawable
insetdrawable says you can embed a drawable into yourself. 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 space between the center's circle and the top and bottom sides of the control is 20DP, but 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 trimmed according to a drawable level, as follows:

<?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 indicates the orientation of the clipping, whether it is trimmed horizontally or vertically, and this property is only effective with the gravity attribute, 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 total trim, 5000 for trim, and so on.

Original link: http://blog.csdn.net/u012702547/article/details/51594131

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.