Android drawable Essential Knowledge Summary _android

Source: Internet
Author: User
Tags dashed line

What is drawable

First Drawable is an abstract class that represents an image that can be drawn in canvas, often used as a view background, with various implementation classes that perform different functions. Second, drawable can be divided into these categories: pictures, images composed of colors. is generally defined in XML.

The inheritance system of drawable

Implementation class and label of Drawable

Drawable

Inside the wide-height gain

Getintrinsicheight, Getintrinsicwidth
-When the drawable is made up of pictures, the method returns the width and height of the picture.
-When drawable is composed of color, there is no concept of width, return-1

Various kinds of drawable and their usage

Bitmapdrawable

Used to display a picture, as the following example

<?xml version= "1.0" encoding= "Utf-8"?> <bitmap xmlns:android=
"http://schemas.android.com/apk/res/" Android "
 android:antialias=" true "
 android:dither=" true "
 android:filter=" true "
 android:gravity= "Top"
 android:src= "@mipmap/girl"
 android:tilemode= "repeat"/>

Common Properties

Android:antialias whether anti-aliasing is turned on
Android:dither whether to turn on the anti jitter
Android:filter whether the filter effect is turned on
Android:gravity used to position a picture
ANDROID:SRC Picture Resource ID
Android:tilemode tile mode, repeat, mirror, clamp three kinds

Colordrawable

Represents a monochrome area for rendering, wrapping a fixed color and drawing a monochrome area on the canvas.

Example:

<?xml version= "1.0" encoding= "Utf-8"?> <color xmlns:android=
"http://schemas.android.com/apk/res/" Android "android:color=" @color/coloraccent >
</color>

You can also use code to create

Colordrawable drawable = new colordrawable (int color); Pass in an integer value of a color

Ninepatchdrawable

That is, the 9-patch diagram, can be freely reduced according to the content of the high without losing true

Example:

<?xml version= "1.0" encoding= "Utf-8"?> <nine-patch xmlns:android=
"Http://schemas.android.com/apk/res" /android "
 android:dither=" true "
 android:filter=" true "
 android:src=" @color/coloraccent ">
</nine-patch>

Set Zoom area with Draw9patch

The 1, 2 direction in the figure is to draw the black line in the Draw9patch, and the black line length is the stretching range.
Figure 3, 4 direction black line length intersection represents the area where content can be populated

Shapedrawable

You can use color to construct a graphic, either a solid color or a shape with a gradient effect. The graph that can compose has rectangle, oval, ring, line

Example of a circle with a gradient effect:

<?xml version= "1.0" encoding= "Utf-8"?> <shape xmlns:android=
"http://schemas.android.com/apk/res/" Android "
 android:shape=" Oval ">
 <gradient
  android:angle=" android:centercolor= "
  @color Coloraccent "
  android:centerx=" 50% "android:centery=" 50% "android:endcolor=" "
  @color/colorprimary"
  android:gradientradius= "150DP"
  android:startcolor= "@color/colorprimarydark"
  android:type= "sweep "/>
 <size
  android:width=" 260DP "
  android:height=" 260DP "/>
</shape>

Note: 1, the Android:angle value must be 45 of multiples 2, oval is used to draw the ellipse, when the size of the width is equal to draw a circle

Ring Example:

<?xml version= "1.0" encoding= "Utf-8"?> <shape xmlns:android=
"http://schemas.android.com/apk/res/" Android "
 android:innerradius=" 100DP "
 android:shape=" Ring "
 android:thickness=" 10DP "
 android: Uselevel= "false" >

 <stroke
  android:width= "10DP"
  android:color= "@color/coloraccent"/>
</shape>

Note:
1, Android:uselevel set to False, otherwise can not display the ideal effect
2, Innerradius for the radius of the ring, innerradiusration for the internal radius of the ratio of the width of the ring, both to Innerradius mainly
3, thickness for the width of the ring, Thicknessratio for this width of the ratio of the width of the ring, with thickness mainly

Common Properties

-Android:shape The shape to be drawn, rectangle, oval, ring and line
-The stroke of the <stroke> shape, with the following properties
-width of android:width stroke
-Color of Android:color strokes
-Android:dashgap line width to draw dashed lines
-Android:dashwidth line segment spacing (to draw a dashed line, both cannot be 0)
-<solid> solid-color fill, android:color Specify shape color
-<gradient> gradient effect, with the solid can not be used together, with the following properties
-Android:angle gradient angle, must be a multiple of 45
-Android:startcolor Gradient's starting color
-Android:centercolor Gradient's middle color
-End color of Android:endcolor gradient
-Android:centerx Gradient Center-point horizontal axis
-Center point ordinate of Android:centery gradient
-Android:gradientradius Gradient radius
-Android:type gradient type, linear (linear), sweep (Peek), radial (radial)
-<corners> represents the angle of the four corners of the rectangle (rectangle), does not apply to other shapes, and has the following properties
-Android:topleftradius, Android:toprightradius, Android:bottomleftradius, Android:bottomrightradius are set in the upper-left corner, upper-right corner, Angle of lower left corner and lower right corner
-Android:radius sets the same angle for four corners, low priority, will be overwritten by the other four attributes
-<size> the width of the shape, corresponding to the Android:width, android:height
-shape defaults to no wide height, getintrinsicheight, getintrinsicwidth return-1
-the height can be set by size, but it is either stretched or reduced to view size as a view background
-<padding> set blank spacing for view that holds shape

Statelistdrawable

Can be viewed as a state selector, which selects the drawable display in the corresponding item through the view's different states

Example:

<?xml version= "1.0" encoding= "Utf-8"?> <selector xmlns:android=
"http://schemas.android.com/apk/res/" Android ">
 <item android:drawable=" "@color/colorprimarydark" android:state_pressed= "false" ></item >
 <item android:drawable= "@color/coloraccent" android:state_pressed= "true" ></item>
</ Selector>

Common State

android:state_pressed when you hold down a view, press the status
Android:state_checked When a view is selected, apply to a checkbox
Android:state_selected When a view is selected
Android:state_enabled when a view is in the available state
android:state_focused when View gets focus

Layerdeawable

Represents a hierarchical set of drawable, similar to the concept of layers in PS, where multiple drawable are placed on different layers to form a superposition effect

Example:

<?xml version= "1.0" encoding= "Utf-8"?> <layer-list xmlns:android=
"Http://schemas.android.com/apk/res" /android ">
 <item android:drawable=" @mipmap/night "/> <item android:drawable=
  " @mipmap Photo6 "
  android:gravity=" center "/>
</layer-list>

Precautions:

1, layer-list can contain more than one item, each item represents a drawable, and the added item will be overwritten with the item previously added
2, by default, layer-list all the drawable will zoom to view large size, through the installation android:gravity can adjust the effect of scaling
3, can set up and down the offset, android:top, Android:bottom, Android:left, Android:right

Levellistdrawable

Represents a Drawable collection in which each drawable in a collection has a level, and by setting different levels, the levellistdrawable can be switched to a different drawable. The rank range is between 0~10000, Android:maxlevel sets the maximum level, Android:minlevel sets the minimum levels
Example:

<?xml version= "1.0" encoding= "Utf-8"?> <level-list xmlns:android=
"Http://schemas.android.com/apk/res" /android ">
 <item
  android:drawable=" @mipmap/photo0 "
  android:maxlevel="
  android: Minlevel= "Ten"/>
 <item
  android:drawable= "@mipmap/photo1" "
  android:maxlevel="
  android: Minlevel= "/>"
</level-list>

You can toggle different drawable by setting the level, in the code

 Switch the background of ImageView to Photo1, 35 between 30~40
 iv.setimagelevel (km); 
 The background of the ImageView is switched to Photo0, 15 between the 10~20
 Iv.setimagelevel (15);

Transitiondrawable

Layerdeawable, used to implement a drawable fading effect
Example:

XML file definition

<?xml version= "1.0" encoding= "Utf-8"?> <transition xmlns:android=
"Http://schemas.android.com/apk/res" /android ">
 <item android:drawable=" @mipmap/night "/> <item android:drawable=
 " @mipmap/photo6 " >
</transition>

Set src for ImageView, in Java code

 iv= (ImageView) Findviewbyid (r.id.iv_transition);
 drawable = (transitiondrawable) iv.getdrawable ();
 Drawable.starttransition (1000); Realize fading Effect
 drawable.reversetransition (1000);

Insetdrawable

Embed other drawable, and you can keep a certain spacing around
Example:

<?xml version= "1.0" encoding= "Utf-8"?> <inset xmlns:android=
"http://schemas.android.com/apk/res/" Android "
 android:drawable=" @mipmap/photo6 "
 android:inset=" 20DP ">
</inset>

Scaledrawable

Scales a drawable to a certain scale according to rank, not visible when level is 0, no scaling when levels are 10000
Example:

<?xml version= "1.0" encoding= "Utf-8"?> <scale xmlns:android=
"http://schemas.android.com/apk/res/" Android "
 android:drawable=" @mipmap/night "
 android:scalegravity=" center "
 android:scaleheight=" 50% "
 android:scalewidth= "50%"/>

To display an effect, you must set a level greater than 0

 IV = (ImageView) Findviewbyid (R.id.iv_scale);
 Scaledrawable drawable= (scaledrawable) iv.getdrawable ();
 Drawable.setlevel (1);

-android:scaleheight= "Percentage", android:scalewidth= "percentage", set wide-height scaling to the original ratio (100%-percentage)
-The larger the level of the setting, the larger the image display

Clipdrawable

According to their rank (level) to the other drawable, cutting direction by android:cliporientation, android:gravity joint decision. Sets the level to crop, the level size from 0 to 10000,level to 0 o'clock completely does not display, is full display when 10000
XML definition

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

 <imageview
  android:id= "@+id/iv_clip"
  android:layout_width= "match_parent"
  android:layout_height= "Match_parent"
  android:src= "@drawable/drawable_clip"/>

To crop by setting the level

 ImageView IV = (ImageView) Findviewbyid (r.id.iv_clip);
 Clipdrawable drawable= (clipdrawable) iv.getdrawable ();
 Drawable.setlevel (5000); The larger the level you set, the smaller the clipping range

Property

Android:cliporientation, horizontal horizontal orientation, vertical vertical direction cutting
Android:gravity, with cutting direction

Custom drawable

Custom Circular drawable

Package com.yu.drawablelearing;
Import Android.graphics.Bitmap;
Import Android.graphics.BitmapShader;
Import Android.graphics.Canvas;
Import Android.graphics.ColorFilter;
Import Android.graphics.Paint;
Import Android.graphics.PixelFormat;
Import Android.graphics.Shader;

Import android.graphics.drawable.Drawable;
 public class Circledrawable extends drawable{private int radius;
 private int mwidth;
 private int mheight;
 Private Paint Mpaint;
 @Override public void Draw (Canvas Canvas) {canvas.drawcircle (mwidth/2,mheight/2,radius,mpaint);
  Public circledrawable (Bitmap Bitmap) {radius = Math.min (Bitmap.getwidth (), Bitmap.getheight ())/2;
  Mwidth = Bitmap.getwidth ();
  Mheight = Bitmap.getheight ();
  Bitmapshader Bitmapshader = new Bitmapshader (bitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
  Mpaint = new Paint ();
  Mpaint.setshader (Bitmapshader);

 Mpaint.setantialias (TRUE);
  @Override public void Setalpha (int alpha) {Mpaint.setalpha (alpha); Invalidateself ();
  @Override public void Setcolorfilter (Colorfilter colorfilter) {mpaint.setcolorfilter (colorfilter);
 Invalidateself ();
 @Override public int getopacity () {return pixelformat.translucent;
 @Override public int getintrinsicheight () {return mheight;
 @Override public int getintrinsicwidth () {return mwidth;

 }
}

Custom Rectangle with rounded corners drawable

Package com.yu.drawablelearing;
Import Android.graphics.Bitmap;
Import Android.graphics.BitmapShader;
Import Android.graphics.Canvas;
Import Android.graphics.ColorFilter;
Import Android.graphics.Paint;
Import Android.graphics.PixelFormat;
Import Android.graphics.RectF;
Import Android.graphics.Shader;

Import android.graphics.drawable.Drawable;
 /** * Created by Pecu on 2016/08/24.
 * * public class Roundrectangledrawable extends drawable {private RECTF RECTF;
 Private Paint Mpaint;
 Bitmap Mbitmap; @Override public void Draw (Canvas Canvas) {canvas.drawroundrect (RECTF, Mbitmap.getwidth ()/6,mbitmap.getheight ()/6, MP
 aint);
  Public roundrectangledrawable (Bitmap Bitmap) {mbitmap = Bitmap;
  Mpaint = new Paint ();
  Bitmapshader Bitmapshader = new Bitmapshader (bitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
  Mpaint.setantialias (TRUE);
 Mpaint.setshader (Bitmapshader);
  @Override public void Setalpha (int alpha) {Mpaint.setalpha (alpha);
 Invalidateself (); } @OvErride public void Setcolorfilter (Colorfilter colorfilter) {mpaint.setcolorfilter (colorfilter);

 Invalidateself (); @Override public void SetBounds (int. left, int. top, int right, int bottom) {super.setbounds (left, top, right, Botto
  m);
 RECTF = new RECTF (left, top, right, bottom);
 @Override public int getopacity () {return pixelformat.translucent;
 @Override public int getintrinsicwidth () {return mbitmap.getwidth ();
 @Override public int getintrinsicheight () {return mbitmap.getheight ();

 }

}

General steps for customizing drawable

1. Custom drawable class inherits from Drawable
2. Implementation of Getopacity,setcolorfilter,setalpha and other methods
3. Drawing in the OnDraw method
4. If the custom drawable has a fixed size, you need to implement the Getintrinsicwidth, Getintrinsicheight method

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.