Summary of 13 Drawables in Android Part 3

Introduction to this section:

In this section we will learn the remaining four Drawables, they are: LayerDrawable,TransitionDrawable ,LevelListDrawable and StateListDrawable, Still paste the maps of 13 types of Drawable:

1.LayerDrawable

layer graphics object, including a Drawable array, and then draw them in the order corresponding to the array, index The Drawable with the largest value will be drawn on the top layer! Although these Drawables will have intersecting or overlapping areas, They are located in different layers, so they will not affect each other, with <layer-list> as the root node!

The relevant properties are as follows:

drawable: The referenced bitmap resource, if it is empty Xu Ao There is a child node of type Drawable
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: Layer id

##Usage example:

Running effect diagram:

Code implementation:

is very simple, combined with the previously learned shapeDrawable and ClipDrawable:

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 to the layout file with the following content:

<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" />

What the hell, it’s gone? Yes, that’s it~ It’s said to be a layer graphic object, we can also get the effect of

cascading pictures:

Running effect diagram:

Implementation code:

layerlist_two.xml of cascading images:

<?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 in activity_main Add an ImageView to .xml with the following content:

<ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/layerlist_two"/>

It’s simple and easy to use. What are you waiting for? Apply it to your project quickly~

2.TransitionDrawable

A subclass of LayerDrawable, TransitionDrawable only manages two layers of Drawable! Two floors! Two floors! It also provides transparency change animation, which can control the animation effect of one layer of Drawable transitioning to another layer of Drawable. The root node is <
transition>. Remember that there are only two Items. More are useless. The properties are similar to LayerDrawable. We need to call the startTransition method to start the switching animation between the two layers; You can also call the reverseTransition() method to play in reverse:

Usage example:

Running renderings:

Implementation Code :

Create a TransitionDrawable xml file in res/drawable

<?xml version="1.0" encoding="utf-8"?>
<transition xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:drawable="@mipmap/ic_bg_meizi1"/>
    <item android:drawable="@mipmap/ic_bg_meizi2"/>
</transition>

Then add an ImageView to the layout file, and then set the src to the above drawable Then the content of MainActivity.java is as follows:

public class MainActivity extends AppCompatActivity {
    private ImageView img_show;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        img_show = (ImageView) findViewById(R.id.img_show);
        TransitionDrawable td = (TransitionDrawable) img_show.getDrawable();
        td.startTransition(3000);
        //你可以可以反过来播放，使用reverseTransition即可~
        //td.reverseTransition(3000);
    }
}

In addition, if you want to achieve: the fade-in and fade-out effect of multiple picture cycles You can refer to: Android Drawable Resource Learning (7), Examples in TransitionDrawable It's very simple. The core principle is: the handler modifies the two pictures in the Transition regularly!

3.LevelListDrawable

is used to manage a group of Drawables. We can set different levels for the drawables inside. When they draw, they will get the corresponding drawable based on the level attribute value and draw it on the canvas. The root node For: <level-list> It has no properties that can be set. All we can do is set each <item> properties!

item attributes that can be set are as follows:

drawable: The referenced bitmap resource, if If it is empty, Xu Ao has a child node of Drawable type
minlevel:levelcorresponding minimum value
maxlevel:levelcorresponding maximum value

Usage example:

Running renderings:

##Code implementation:

Draw a circle through shapeDrawable, in five copies, just change the width and height:

shape_cir1.xml:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <solid android:color="#2C96ED"/>
    <size android:height="20dp" android:width="20dp"/>
</shape>

Then go to LevelListDrawable, here we set five levels:

level_cir.xml:

<?xml version="1.0" encoding="utf-8"?>
<level-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:drawable="@drawable/shape_cir1" android:maxLevel="2000"/>
    <item android:drawable="@drawable/shape_cir2" android:maxLevel="4000"/>
    <item android:drawable="@drawable/shape_cir3" android:maxLevel="6000"/>
    <item android:drawable="@drawable/shape_cir4" android:maxLevel="8000"/>
    <item android:drawable="@drawable/shape_cir5" android:maxLevel="10000"/>
</level-list>

Finally, write the following code for MainActivity:

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 changes the level value~

4.StateListDrawable

Okay, finally we have the last drawable: StateListDrawable, this name It looks like a pattern, but actually we I have used it before. Do you still remember to set the drawable in different states for the button? Yes, used It's this StateListDrawable!
The attributes that can be set are as follows

drawable: The referenced Drawable bitmap, we can put it at the front to indicate the normal state of the component~
state_focused:Whether to get focus
state_window_focused:Whether to get window focus
state_enabled:Whether the control is available
state_checkable: Whether the control can be checked, eg: checkbox
state_checked: Whether the control is checked
state_selected: Whether the control is checked Selection, for the situation with a scroll wheel
state_pressed: Whether the control is pressed
state_active: Whether the control is active, eg: slidingTab
state_single: When the control contains multiple child controls, determine whether to display only one child control
state_first: When the control contains multiple child controls, determine whether the first child control is displayed Whether a sub-control is in the display state
state_middle: When the control contains multiple sub-controls, determine whether the middle sub-control is in the display state
state_last: When a control contains multiple sub-controls, determine whether the last sub-control is in the displayed state

Usage example:

Then write one Simple rounded corners button!

Running renderings:

Code implementation:

Then pass it first shapeDrawable to draw two rounded rectangles, just with different colors:

shape_btn_normal.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 selctor: 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 set the button android:background="../style/images/selctor_btn" and that's it~ You can change it to a rectangle, ellipse, circle, etc. according to your needs!

Summary of this section:

Okay, I have finished explaining the 13 different types of Drawables in Android. Of course, this is just the basics. In practice, There must be various high-level usages in development, and it is up to everyone to expand them. Here is just a guide for everyone!
Well, due to time constraints, the above examples were tried one by one, so the final demo was a mess, maybe If you need these materials, please post them and download them yourself if necessary: DrawableDemo.zip Well, thank you ~ I wish you a happy weekend

Summary of 13 Drawables in Android Part 3

Introduction to this section:

1.LayerDrawable

3.LevelListDrawable

Summary of this section:

php.cn