[Android] Android advanced UI development series (2)-android rendering tutorial

Tutorial Index

1. Android drag and drop tutorial
2. Android plotting (drawables) Tutorial
3. Android styles and themes tutorial
4. Live wallpaper tutorial
5. Homescreen widgets tutorial
6. Custom views for Android (M m views) Tutorial
7. Android supports support for different screen sizes (support different screensize) Tutorial
8. Android animation (animations) Tutorial
9. Android touch tutorial

Android plotting tutorial

1. Introduction to drawables

A drawable resource is a general concept. For the moment, I will call it a general drawing. It can be used as a graph. The simplest case is the bitmap file, which can be encapsulated by the bitmapdrawable class in Android. Bitmaps files are usually stored in the Res/drawable-** directory. When you create an android project, several drawable directories are created by default, drawable-hdpi | drawable-ldpi | drawable-mdpi | drawable-xhdpi. You can provide files of different sizes for different Android devices. If you provide only one file for an Android system of different sizes, the file may display different effects on devices with different resolutions.

Android supports both XML drawables and 9-patch graphics files. XML drawables are used to describe shapes (color, border, gradient), State, and transitions. 9-The patch graphic file is used to expand the entire image. For example, if a file acts as the background image of the button, the background image will also become larger when the button becomes large, then the image will naturally become blurred, and 9-patch can define a region for the image to specify the region where the image grows.

2. Get drawables

In the XML file, obtain drawables directly by @ drawable/filename. Note that filename does not contain the extension. You can also obtain drawables in Java code. The vast majority of views accept a resource ID as the output parameter. The following example shows how to use a drawables as the background image of imageview.

Imageview = (imageview) findviewbyid (R. Id. Image );
Imageview. setimageresource (R. drawable. Hello );

3. xml drawables

3.1 shape drawables

The shape drawables XML file can be used to define a geometric object. You can define the color (colors), border (borders), and gradient effect (gradients) of this geometric object ), and apply the object effect to views. The advantage of using shape drawables XML is that they can automatically adjust the size of mobile phones of different sizes.

Below I will define a shape drawable -- myshape. xml

<? XML version = "1.0" encoding = "UTF-8"?>
<Shape
Xmlns: Android = "http://schemas.android.com/apk/res/android"
Android: Shape = "rectangle">
<Stroke
Android: width = "2dp"
Android: color = "# ffffffff"/>
<Gradient
Android: endcolor = "# ddbbbbbb"
Android: startcolor = "# dd777777"
Android: angle = "90"/>
<Corners
Android: bottomrightradius = "7dp"
Android: bottomleftradius = "7dp"
Android: topleftradius = "7dp"
Android: toprightradius = "7dp"/>
</Shape>

Then we apply the drawable defined above to your layout. Note the 5th lines of code in the following example.

1 <? XML version = "1.0" encoding = "UTF-8"?>
2 <linearlayout xmlns: Android = "http://schemas.android.com/apk/res/android"
3 Android: layout_width = "match_parent"
4 Android: layout_height = "match_parent"
5 Android: Background = "@ drawable/myshape"
6 Android: Orientation = "vertical">
7
8 <edittext
9 Android: Id = "@ + ID/edittext1"
10 Android: layout_width = "match_parent"
11 Android: layout_height = "wrap_content"
12>
13 </edittext>
14
15 <radiogroup
16 Android: Id = "@ + ID/radiogroup1"
17 Android: layout_width = "match_parent"
18 Android: layout_height = "wrap_content">
19
20 <radiobutton
21 Android: Id = "@ + ID/radio0"
22 Android: layout_width = "wrap_content"
23 Android: layout_height = "wrap_content"
24 Android: checked = "true"
25 Android: text = "@ string/Celsius">
26 </radiobutton>
27
28 <radiobutton
29 Android: Id = "@ + ID/radio1"
30 Android: layout_width = "wrap_content"
31 Android: layout_height = "wrap_content"
32 Android: text = "@ string/Fahrenheit">
33 </radiobutton>
34 </radiogroup>
35
36 <button
37 Android: Id = "@ + ID/button1"
38 Android: layout_width = "wrap_content"
39 Android: layout_height = "wrap_content"
40 Android: text = "@ string/calc"
41 Android: onclick = "myclickhandler">
42 </button>
43
44 </linearlayout>

3.2 state drawables

State drawables can be used to specify different States. Different drawable values can be assigned to different views for different states. The most common example is to display different drawable values based on different buttons.

<? XML version = "1.0" encoding = "UTF-8"?>
<Selector xmlns: Android = "http://schemas.android.com/apk/res/android">

<Item Android: drawable = "@ drawable/button_pressed"
Android: state_pressed = "true"/>
<Item Android: drawable = "@ drawable/button_checked"
Android: state_checked = "true"/>
<Item Android: drawable = "@ drawable/button_default"/>

</Selector>

3.3 transition drawables

Transition drawables can be used to convert images in code. <? XML version = "1.0" encoding = "UTF-8"?>
<Transition xmlns: Android = "http://schemas.android.com/apk/res/android">
<Item Android: drawable = "@ drawable/first_image"/>
<Item Android: drawable = "@ drawable/second_image"/>
</Transition>

 

Final imageview image = (imageview) findviewbyid (R. Id. Image );
Final togglebutton button = (togglebutton) findviewbyid (R. Id. Button );
Button. setonclicklistener (New onclicklistener (){
@ Override
Public void onclick (final view v ){
Transitiondrawable drawable = (transitiondrawable) image. getdrawable ();
If (button. ischecked ()){
Drawable. starttransition (500 );
} Else {
Drawable. reversetransition (500 );
}
}
});

4. 9-patch drawables

9 patch drawables is an image resource with an extra 1 px outer border. You can define an area on the top and left of the 9-patch image. When the image resource is too small for the view, these areas will be scaled. You can also define an area on the right and below of the image. If you can add text information to a view, the text information will be placed in these areas, such as button.

In the Android-SDK/tool installation directory, you can find the draw9patch program, which allows you to easily draw 9 patch drawables.