Android UI collection-1. Android Drawable Classification summary (2/3)

Source: Internet
Author: User
Tags ranges

Android UI collection-1. Android Drawable Classification summary (2/3)

 

This section introduces:

In the previous section, we have learned about four Android Drawable, which are:

ColorDrawable, NinePatchDrawable, ShapeDrawable and GradientDrawable!

In this section, we will continue to learn the other five Drawable, which are:

BitmapDrawable, InsertDrawable, ClipDrawable, RotateDrawable, AnimationDrawable!

Now, start this section!

 

 

Body of this section:

 

 

Outline diagrams of various Android Drawable types:

 


 

1. BitmapDrawable:

For a Bitmap encapsulation, you can set the bitmap painting method in the BitmapDrawable area, which includes:

Tile filling, stretch filling or keep the original image size! To It is the root node!

 

Related attributes:

Src:Image resource ~

Antialias:Support for anti-aliasing

Filter:Whether bitmap filtering is supported. If yes, it can be smooth when the image is criticized.

Dither:Whether to perform jitter processing on bitmap

Gravity:If the bitmap is smaller than the container, you can set the relative position of the bitmap in the container.

TileMode:Specify the image tiled filling container mode. If this mode is set, the gravity attribute is ignored. The following optional values are available:

Disabled, (original image size), repeat, and mirror)

The results are as follows:

 

① XML defines BitmapDrawable:

 

 
 

② Java code that achieves the same effect:

 

 

BitmapDrawable bitDrawable = new BitmapDrawable(bitmap);bitDrawable.setDither(true);bitDrawable.setTileModeXY(TileMode.MIRROR,TileMode.MIRROR);


 

 

 

2. InsetDrawable:

It indicates embedding a Drawable into another Drawable, and leaving some spacing inside it, similar

The padding attribute of Drawable, but padding indicates the margin between Drawable content and Drawable itself!

InsetDrawable indicatesThe margin between two Drawable and container. When the control requires a background ratio to the actual border

InsetDrawableFor example, this can solve the problem between the custom Dialog and the screen.

I believe all the friends who have done this know that even if we set layout_margin, this is useless.

You can use this InsetDrawable! You only need to set an insetXxx for InsetDrawable.

Margin of the direction, and then set it to the background of the Dialog!

 

Related attributes:

1.Drawable: The referenced Drawable. If it is null, there must be a Drawable subnode!

2. Visible: Set whether Drawable is a sufficient space.

3.InsetLeft, insetRight, insetTop, insetBottm:Set the margin between left and right

 

① Use in XML:

 

 
 

② Used in Java code:

 

 

InsetDrawable insetDrawable = new InsetDrawable(getResources().getDrawable(R.drawable.test1), 10, 10, 10, 10);

Running result:

 

 

 

 

3. ClipDrawable:

Clip can be translated into scissors. We can understand ClipDrawable as cutting the next part from a bitmap;

The progress bar in Android is implemented using ClipDrawable. It is cut Based on the set level value.

The size of the region. The root node is

 

Related attributes:

ClipOrietntion:Set the direction of the cut. You can set the horizontal and vertical directions.

Gravity:Crop from that position

Drawable:The referenced drawable resource. If it is null, a child node of the Drawable type is required.

Ps: The child node of the Drawable type is in Add the following statement:

So...

 

Example:

The core is to modify the level of ClipDrawable through code!

Here we implement an effect similar to the progress bar, and thisThe value of Level is 0 ~ 10000Oh:

① Define a ClipDrawable resource xml:

 

 
 
② Set an ImageView in the activity_main main layout file and set src to clipDrawable!

 

Remember src. If you write it as blackground, a null pointer will be reported !!!!

 

     
  
 

③ MainActivity. java uses setLevel to set the size of the intercepted area;

 

 

Package com. jay. example. drawabletest; import java. util. timer; import java. util. timerTask; import android. app. activity; import android. graphics. drawable. clipDrawable; import android. OS. bundle; import android. OS. handler; import android. OS. message; import android. widget. imageView; public class MainActivity extends Activity {private ImageView imgShow1; private ClipDrawable cd; private Handler handler = new Handler () {@ Overridepublic void handleMessage (Message msg) {if (msg. what = 0x123) {cd. setLevel (cd. getLevel () + 500) ;}};@ Overrideprotected void onCreate (Bundle savedInstanceState) {super. onCreate (savedInstanceState); setContentView (R. layout. activity_main); imgShow1 = (ImageView) findViewById (R. id. imgShow1); // core implementation code cd = (ClipDrawable) imgShow1.getDrawable (); final Timer timer = new Timer (); timer. schedule (new TimerTask () {@ Overridepublic void run () {handler. sendEmptyMessage (0x123); if (cd. getLevel ()> = 10000) {timer. cancel () ;}}, 0,300 );}}

Run:

 


 

4. RotateDrawable:

It is used to rotate Drawable, and setLevel is used to control the rotation. The maximum value is 10000.

Related attributes:

FromDegrees: Start angle, which corresponds to the lowest level value. The default value is 0.

ToDegrees: End angle, which corresponds to the highest level value. The default value is 360.

PivotX: Set the x coordinate of the reference point. The value ranges from 0 ~ 1. The default value is 50%, that is, 0.5.

Ty: Set the Y coordinate of the reference point. The value ranges from 0 ~ 1. The default value is 50%, that is, 0.5.

Ps: If the display of the rotated image is incomplete, you can modify the above two values!

Drawable:Set bitmap Resources

Visible:Set whether drawable is visible!

 

In addition, the angle chart is as follows:

 

 

Example:

Make a few changes to clipDrawable in the third point!

① Define a rotateDrawable resource file:

 

 
 

② In activity_main.xml, modify src to point to the above drawable. MainActivity only needs to set ClipDrawable

 

Change to rotateDrawable!

 

Package com. jay. example. drawabletest; import java. util. timer; import java. util. timerTask; import android. app. activity; import android. graphics. drawable. rotateDrawable; import android. OS. bundle; import android. OS. handler; import android. OS. message; import android. widget. imageView; import android. widget. toast; public class MainActivity extends Activity {private ImageView imgShow1; private RotateDrawable cd; priv Ate Handler handler = new Handler () {@ Overridepublic void handleMessage (Message msg) {if (msg. what = 0x123) {if (cd. getLevel ()> = 10000) Toast. makeText (MainActivity. this is complete ~, Toast. LENGTH_LONG ). show (); cd. setLevel (cd. getLevel () + 300) ;}};@ Overrideprotected void onCreate (Bundle savedInstanceState) {super. onCreate (savedInstanceState); setContentView (R. layout. activity_main); imgShow1 = (ImageView) findViewById (R. id. imgShow1); // core implementation code cd = (RotateDrawable) imgShow1.getDrawable (); final Timer timer = new Timer (); timer. schedule (new TimerTask () {@ Overridepublic void run () {handler. sendEmptyMessage (0x123); if (cd. getLevel ()> = 10000) {timer. cancel () ;}}, 0,300 );}}


 

Run:

 

 

 

 

5. AnimationDrawable:

The last Drawable today is used to implement Frame Animation in Android. It refers to a series of Drawable,

Playback is performed at a certain order. In Android, there are abundant animations, such as traditional complementing animation, translation, scaling, and so on,

But here we will only introduce thisAnimationDrawable implements Frame Animation, About alpha, scale, translate, rotate

In the animation section ~ Here we useAs the root node

 

Related Property methods:

Oneshot: Sets whether to play cyclically. false indicates loop playback !!!

Duration: Frame interval, which is usually set to 300 ms ~

After obtaining the AniamtionDrawable instance, you must call its start () method to play the animation.

Calling the OnCreate () method has no effect, because the View has not been initialized, we can

Use a simple handler to delay playing the animation! Of course there are other ways to see the following links:

Android AnimationDrawable start () is ineffective!

It is really convenient to use this AnimationDrawable to implement frame animation ~

 

Sample Code:

① First define an xml resource file of the AnimationDrawable:

 

     
     
      
       
        
     
    
   
  
 

② Set src in activity_main.xml, and then in MainActivity:

 

 

Package com. jay. example. drawabletest; import android. app. activity; import android. graphics. drawable. animationDrawable; import android. OS. bundle; import android. OS. handler; import android. widget. imageView; public class MainActivity extends Activity {private ImageView imgShow1; private AnimationDrawable ad; @ Overrideprotected void onCreate (Bundle savedInstanceState) {super. onCreate (savedInstanceState); setContentView (R. layout. activity_main); imgShow1 = (ImageView) findViewById (R. id. imgShow1); // core implementation code ad = (AnimationDrawable) imgShow1.getDrawable (); Handler handler = new Handler (); handler. postDelayed (new Runnable () {@ Overridepublic void run () {ad. start () ;}}, 300 );}}

Run:

 

 

It is quite interesting that the UC browser cannot connect to the Web prompt page and there is a moving animation behind it. This is probably also used for implementation,

After decompiling the apk, you cannot find the corresponding animated image. You can only replace it with this small flower ~

 

 

 

 

 

 

 

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.