8.1.3 A Summary of 13 Drawables in Android Part 3
Classification Android Basic Tutorial
Introduction to This Section:
>
In this section, we will learn the remaining four types of Drawables, which are: LayerDrawable, TransitionDrawable, LevelListDrawable, and StateListDrawable. As always, here is the mind map of the 13 Drawables:
1.LayerDrawable
>
A layered graphic object, containing an array of Drawables, and then drawing them in the order corresponding to the array. The Drawable with the highest index value will be drawn on the top layer! Although these Drawables may have overlapping or intersecting areas, they are located on different layers, so they do not affect each other, using <**layer-list**>
as the root node!
Related attributes are as follows :
>
-drawable :Reference to the bitmap resource, if empty, there must be a child node of the Drawable type
-left :The left margin of the layer relative to the container
-right :The right margin of the layer relative to the container
-top :The top margin of the layer relative to the container
-bottom :The bottom margin of the layer relative to the container
-id :The id of the layer
Usage example :
Running effect picture :
Code implementation :
Very simple, combined with the shapeDrawable and ClipDrawable learned before:
layerList_one.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="@android:id/background">
<shape android:shape="rectangle">
<solid android:color="#C2C2C1" />
<corners android:radius="50dp" />
</shape>
</item>
<item android:id="@android:id/progress">
<clip>
<shape android:shape="rectangle">
<solid android:color="#BCDA73" />
<corners android:radius="50dp" />
</shape>
</clip>
</item>
</layer-list>
Then add a Seekbar in the layout file, the content is as follows:
<SeekBar
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:indeterminateDrawable="@android:drawable/progress_indeterminate_horizontal"
android:indeterminateOnly="false"
android:maxHeight="10dp"
android:minHeight="5dp"
android:progressDrawable="@drawable/layerlist_one"
android:thumb="@drawable/shape_slider" />
Damn, that's it? Yes, it's just this little bit of stuff ~ said it's a layered graphic object, we can also make a stacked image effect:
Running effect picture :
Implementation code :
Stacked image layerlist_two.xml :
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<bitmap
android:gravity="center"
android:src="@mipmap/ic_bg_ciwei" />
</item>
<item
android:left="25dp"
android:top="25dp">
<bitmap
android:gravity="center"
android:src="@mipmap/ic_bg_ciwei" />
</item>
<item
android:left="50dp"
android:top="50dp">
<bitmap
android:gravity="center"
android:src="@mipmap/ic_bg_ciwei" />
</item>
</layer-list>
Then add an ImageView in activity_main.xml, the content is as follows:
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/layerlist_two"/>
2.TransitionDrawable
>
A subclass of LayerDrawable, TransitionDrawable only manages two layers of Drawables! Two! Two!
And provides an animation of transparency changes, which can control the animation effect of one layer of Drawable transitioning to another layer of Drawable.
The root node is <**transition**>
, remember there are only two Items, more is useless, the attributes are similar to LayerDrawable,
We need to call the startTransition method to start the transition animation between the two layers;
You can also call the reverseTransition() method to play it in reverse:
Usage example :
Running effect picture :
**Implementation The final MainActivity code is written as follows:
public class MainActivity extends AppCompatActivity {
private ImageView img_show;
private LevelListDrawable ld;
private Handler handler = new Handler() {
public void handleMessage(Message msg) {
if (msg.what == 0x123) {
if (ld.getLevel() > 10000) ld.setLevel(0);
img_show.setImageLevel(ld.getLevel() + 2000);
}
}
};
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
img_show = (ImageView) findViewById(R.id.img_show);
ld = (LevelListDrawable) img_show.getDrawable();
img_show.setImageLevel(0);
new Timer().schedule(new TimerTask() {
@Override
public void run() {
handler.sendEmptyMessage(0x123);
}
}, 0, 100);
}
}
It's also very simple, a Timer timer, handler modifies the level value~
4.StateListDrawable
>
Well, finally, we have come to the last drawable: StateListDrawable. This name looks patterned, but in fact, we have used it before. Remember the <selector > for setting different states of drawables for buttons? That's right, what was used is this StateListDrawable!
The following properties can be set :
>
-drawable :Referenced Drawable bitmap, we can put it in front to represent the normal state of the component~
-state_focused :Whether it has focus
-statewindowfocused :Whether it has window focus
-state_enabled :Whether the control is enabled
-state_checkable :Whether the control can be checked, e.g., checkbox
-state_checked :Whether the control is checked
-state_selected :Whether the control is selected, for situations with a scroll wheel
-state_pressed :Whether the control is pressed
-state_active :Whether the control is active, e.g., slidingTab
-state_single :When the control contains multiple sub-controls, determine whether to display only one sub-control
-state_first :When the control contains multiple sub-controls, determine whether the first sub-control is displayed
-state_middle :When the control contains multiple sub-controls, determine whether the middle sub-control is displayed
-state_last :When the control contains multiple sub-controls, determine whether the last sub-control is displayed
Usage example :
Let's write a simple rounded corner button!
Running effect picture :
Code implementation :
Let's first use shapeDrawable to draw two rounded rectangles, just different colors:
shapebtnnormal.xml :
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#DD788A"/>
<corners android:radius="5dp"/>
<padding android:top="2dp" android:bottom="2dp"/>
</shape>
Then let's write a selector: selctor_btn.xml :
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" android:drawable="@drawable/shape_btn_pressed"/>
<item android:drawable="@drawable/shape_btn_normal"/>
</selector>
Then the button can be set with android:background="@drawable/selctor_btn"~ You can change it to a rectangle or ellipse, circle, etc., according to your own needs!
Summary of this section:
>
Well, the 13 different types of Drawables in Android have been explained, of course, this is just the foundation. There will definitely be various high-end usages in actual development, which depends on everyone to expand, here is just to guide you!
Well, due to time constraints, the above examples are tried one by one, so the final demo is messy, you may need these materials, or post it, if you need it, please download it yourself: DrawableDemo.zip Well, thank you ~ I wish you a happy weekend
-1.0.1 Latest Android Basic Tutorial Catalog for 2015
-1.1 Background and System Architecture Analysis
-1.2 Development Environment Construction
-[1.2.1 Developing Android APP with Eclipse + AD
2.5.4 Basic Usage of AutoCompleteTextView (Auto-Complete Text Box)
2.5.8 Detailed Explanation of Notification (Status Bar Notification)
2.6.4 Simple Usage of DrawerLayout (Official Side-Slide Menu)
3.6 Responding to System Setting Events (Configuration Class)
4.4.2 Further Exploration of ContentProvider - Document Provider
5.2.1 Detailed Explanation of Fragment Example - Bottom Navigation Bar Implementation (Method 1)
5.2.2 Detailed Explanation of Fragment Example - Bottom Navigation Bar Implementation (Method 2)
5.2.3 Detailed Explanation of Fragment Example - Bottom Navigation Bar Implementation (Method 3)
5.2.4 Detailed Explanation of Fragment Example - Bottom Navigation Bar + ViewPager Page Switching
[6.2 Data Storage and Access
8.3.6 Paint API - Xfermode and PorterDuff Detailed Explanation (Part 3)
8.3.7 Paint API - Xfermode and PorterDuff Detailed Explanation (Part 4)
8.3.8 Paint API - Xfermode and PorterDuff Detailed Explanation (Part 5)
8.3.14 Paint API - Several Enumeration/Constant Values and ShadowLayer Shadow Effect
8.3.17 Canvas API Detailed Explanation (Part 2) - Collection of Clipping Methods
8.3.18 Canvas API Detailed Explanation (Part 3) - Matrix and drawBitmapMesh
8.4.3 Android Animation Collection - Property Animation - First Encounter
8.4.4 Android Animation Collection - Property Animation - Another Encounter
11.0 "2015 Latest Android Basic Tutorial" Completion Celebration~
12.2 DrySister Girl Viewing App (First Edition) - 2. Parsing Backend Data
12.4 DrySister Girl Viewing App (First Edition) - 4. Adding Data Caching (Integrating SQLite)