Preliminary use of Drawable Resources

Preliminary use of Drawable Resources

When I first got started with Android, I saw a Button similar to the following:

At that time, I felt that the button was a bit like the Material Design style. I really thought it was a cropped image. curiosity drove me to search for the implementation method on the Internet. It was not a cropped image, I just used xml to define the image we want. Now it's really funny to think about it, haha. We can customize the view to implement such images. Of course, the simplest thing is to use an xml file for definition!

It seems that the above effect is really too simple:

The above picture is an approximate rectangle, but the four corners are a bit smooth. Since it is a Drawable resource, of course it is defined under/res/drawable/. The. xml file is provided:

Shaper. xml:

 

Selector. xml:

 

 

Then, android: background = "@ drawable/seletor_button" is used in the Button control. The layout file is simple and will not be written here.
According to selector. xml, when the button is released, the background color of the button is also blue. We can change it to another color, so we need to redefine a shaper2.xml:

 

 

Then in selector. xml:

Effect:

 

 

You may ask what the above xml file represents. Below is a simple description of Drawable resources.

 

I. Image Resources

This is certainly not a stranger. You can obtain images (such as png, gif, and jpg) under/res/drawable/. You can directly R. drawable. picture or:

 

                Resources resources = getResources();Drawable drawable = resources.getDrawable(R.drawable.picture);

Note that the names of these images cannot start with a number. Otherwise, an error is returned. Image resources are easy to use and not described in detail.

 

Ii. StateListDrawable Resources

It is used to organize multiple Drawable objects. When StateListDrawable is used as the background of the target component and foreground image, the Drawable object displayed by the StateListDrawable object will automatically switch as the status of the target component changes.

Class inheritance hierarchy:

java.lang.Object   ? android.graphics.drawable.Drawable     ? android.graphics.drawable.DrawableContainer       ? android.graphics.drawable.StateListDrawable

How to use such resources? The official document provides the following information:

 

It can be defined in an XML file with Element. Each state Drawable is defined in a nested Element. For more information, see the guide to Drawable Resources.

The document specifies that the root element of the xml file defining the StateListDrawable object is This element can contain multiple Element.

What attributes are defined in the XML file? (For more information about the API, do not perform a lot of Ctrl C/V Operations here)

Briefly explain the above attributes:

Android: constantSize:
If the value is "true", the size of the Drawable remains unchanged (the maximum size in all States) as the status changes. If the value is "false", the size changes. The default value is false.
Android: color or android: drawable: Specifies the color or Drawable object.
The following state_xxx statuses are supported:
Android: state_active: indicates whether the device is activated.
Android: state_checkable: indicates whether the checkable status is available.
Android: state_checked: indicates whether it is in the checked status.
Android: state_enabled: indicates whether the instance is available.
Android: state_first: indicates whether it is in the starting status.
Android: state_focused: indicates whether the player is in the focused state.
Android: state_last: indicates whether it is in the end state.
Android: state_middle: indicates whether it is in the intermediate state.
Android: state_pressed: indicates whether it is in the pressed status.
Android: state_selected: indicates whether the instance is in the selected status.
Android: state_window_focused: indicates whether the window is in the focused state.

The specific usage method must be summarized in practice. The StateListDrawable resource file has been used in the beginning of this article.

3. ShapeDrawable Resources

ShapeDrawable Resources
ShapeDrawable is used to define a basic graph (such as a rectangle, line, circle, and elliptic). The root element of the defined XML file is Element, which can specify the following attributes:

 

Shape = ["rectangle" | "oval" | "line" | "ring"] specify a graphic shape. corners defines the radian gradient definitions of the four corners of the ry. Fill the padding with gradient to define the geometric shape. (You can specify top, bottom, right, left) size defines the size of the geometric shape solid defines the use of a single color fill stroke definition for the geometric shape draw border height defines the image height width defines the Image width

The usage is relatively simple and will not be illustrated.
Iv. ClipDrawable Resources

The ClipDrawable resource is defined in an XML file to crop an "image clip" from other resources ". Used in XML definition As the root element.

Attributes in xml:

 

Drawable: Specifies to intercept the Drawable object clipOrientation: Specifies the direction of the intercept. You can set vertical intercept or horizontal intercept gravity: Specifies the alignment mode during intercept.

Gravity has many values. For more information, see the API.

 

The demo briefly explains how to use the ClipDrawable resource file to slowly expand an image, clip. xml:

 

 

The above does not need to be explained. The layout file is also very simple, that is, an ImageView:

 

   ...   ... 
       ...    ...

MainActivity. java:

 

 

Public class MainActivity extends Activity {@ SuppressWarnings ("unused") private ClipDrawable clip; Handler handler = new Handler () {public void handleMessage (Message msg) {switch (msg. what) {case 0: clip. setLevel (clip. getLevel () + 200); break; default: break ;}};@ Overrideprotected void onCreate (Bundle savedInstanceState) {super. onCreate (savedInstanceState); requestWindowFeature (Window. FEATURE_NO_TITLE); setContentView (R. layout. activity_main); ImageView psg = (ImageView) findViewById (R. id. psb); clip = (ClipDrawable) psg. getDrawable (); final Timer time = new Timer (); time. schedule (new TimerTask () {@ Overridepublic void run () {// method stub automatically generated by TODO Message msg = new Message (); msg. what = 0; handler. sendMessage (msg); if (clip. getLevel () & gt; 10000) {time. cancel () ;}}, 0,500 );}}

Looking at the effect, I'm impatient:

 

 

The above code is also very simple. The Timer is used to send information every 500 milliseconds using Handler to modify the clip Level. The following describes the Level:

Crop the Level of other resources based on the ClipDrawable resource. The default Level value is 0, indicating that the image is completely cropped, so the image is invisible. When the value reaches 10000, the image is not cropped, so it can be fully displayed.

5. RippleDrawable Resources

Ripple that appears after 5.0 makes it easier for us to define controls with ripple effects. Let's get a quick start to define them! (* ^__ ^ *) Xi ......

First of all, let's take a look at the basic knowledge points. Of course, the official API documentation is the best material: Since it is defined using an XML file, what are the attributes? Android: color: The color when ripple is affected. android: radius ripple is completely transmitted. The radius will not be based on these two attributes! Haha, read the document carefully and know that its attributes are inherited from LayerDrawable. It doesn't matter if LayerDrawable hasn't learned yet. Open it and check out what attributes are there! Oh, there are so many attributes, but they are all common ones (only part of the attributes are intercepted and more references). Let's write the demo below! You can customize a ripple button in XML. Of course, the shaper cannot be removed,

 

Shaper. xml:

 

Rippler. xml:

 

 

There are also layout files:

 

 

Effect:
The new property android: elevation introduced by 5.0 is also specified to make the component "float" The height. This property allows the component to display 3D effects, that is, the Material Design style, haha. Of course, you can also set android: translationZ (set the movement of the component in the Z direction, this attribute is mostly used in animation resources) to achieve this effect. You can also set it by using setElevation (float) and setTranslationZ (float) methods.
The above is just a brief introduction of several Drawable resources, as well as LayerDrawable, AnimationDrawable, LevelListDrawable, and so on. The main purpose of writing an article is to review and consolidate your knowledge. If you are lucky enough to help others, I am very happy! Of course, if an error affects others, this is an error that you cannot tolerate! If an error occurs in the article, please correct it! Very grateful!