Drawable in Android (3)

Time:2022-11-23

PS: This article is a reprinted article, the readability of the original text will be better, and there is a link to the original text at the end of the article

Catalog 1, TransitionDrawable2, InsetDrawable3, ScaleDrawable1, TransitionDrawable We continue to analyze other commonly used Drawables based on the Drawable in Android (2) article; the corresponding tag of TransitionDrawable in the xml file is transition, which implements the transition between two Drawables In order to better understand it, we also write a demo first; (1) Create a new my_transition.xml file under the drawable folder; <?xml version=”1.0″ encoding=”utf-8″?><transition xmlns:android=”http://schemas.android.com/apk/res/android” ><item android:drawable=”@drawable/img_3″/><item android:drawable=”@drawable/img_4″/></transition> Now the image of img_3 looks like this;
Drawable in Android (3)
The image of img_4 is as follows;
Drawable in Android (3)
(2) The Activity layout file activity_transition.xml is shown below; <? xml version=”1.0″ encoding=”utf-8″? ><RelativeLayout xmlns:android=”http://schemas.android.com/apk/res/android” xmlns:app=”http://schemas.android.com/apk/res-auto” xmlns:tools=”http://schemas.android.com/tools” android:layout_width=”match_parent” android:layout_height=”match_parent” > <ImageView android:id=”@+id/iv” android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:src=”@drawable/my_transition”/> <Button android:layout_width=”match_parent” android:layout_height=”wrap_content” android:layout_below=”@id/iv” android:onClick=”onClick” android:text=” button “/></RelativeLayout> The processing logic for the TransitionActivity with the name transitionActivity is as follows; public class TransitionActivity extends AppCompatActivity { ImageView mIv; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_transition); mIv = findViewById(R.id.iv); } public void onClick(View v) { TransitionDrawable transitionDrawable = (TransitionDrawable) mIv.getDrawable(); transitionDrawable.startTransition(3000); }}app at the beginning of the operation of the renderings are shown below;
Drawable in Android (3)
When we click the “button”, after 3s, it becomes the following rendering;
Drawable in Android (3)
In the my_transition.xml file, the item tag under the transition tag is actually a Drawable; generally we use TransitionDrawable as the foreground image of ImageView, or as the background image of View, we can use the startTransition and reverseTransition methods of TransitionDrawable to achieve fade in and fade out effect and its inverse process. 2. InsetDrawable The tag corresponding to InsetDrawable in the xml layout file is inset; if you want to implement a View whose background is smaller than the View itself, you can use InsetDrawable to achieve it, similar to the padding attribute of Drawable; InsetDrawable can also implement other Drawables embedded among yourself, and can leave a certain distance around; well, for a better understanding, we also write a demo; (1) Create a new my_inset_drawable.xml file under the drawable folder; <?xml version=”1.0″ encoding=”utf-8″?><inset xmlns:android=”http://schemas.android.com/apk/res/android” android:insetBottom=”30dp” android:drawable=”@drawable/img_4″ android:insetTop=”30dp” android:insetLeft=”30dp” android:insetRight=”30dp” ></inset> (2) The activity_inset_drawable.xml file of the Activity is as follows; <?xml version=”1.0″ encoding=”utf-8″?><RelativeLayout xmlns:android=”http://schemas.android.com/apk/res/android” xmlns:app=”http://schemas.android.com/apk/res-auto” xmlns:tools=”http://schemas.android.com/tools” android:layout_width=”match_parent” android:layout_height=”match_parent” tools:context=”com.example.a86188.myapplication.InsetDrawableActivity”><ImageView android:layout_width=”match_parent” android:src=”@drawable/my_inset_drawable” android:background=”#FF0000″ android:layout_height=”200px” /></RelativeLayout> The result of running the app is as follows;
Drawable in Android (3)
First of all, let’s see, the area of our ImageView is this one with the red background, right? The foreground of the ImageView is the image that we see, right? Obviously, the image is 30 dp from the top of the ImageView, the image is 30 dp from the bottom of the ImageView; Ok, let’s describe the properties of inset tags that are common in development; android:insetBottom: The background or foreground of the View is the bottom inner margin of the actual area of the View. android:insetTop: The background or foreground of the View is the top inner margin of the actual area of the View. android:insetRight: The background or foreground of the View is in the right inner margin of the actual area of the View. android:insetLeft: The background or foreground of the View is the inner left margin of the actual area of the View. 3. ScaleDrawable corresponds to the scale tag in the xml file. ScaleDrawable can scale the specified Drawable to a certain scale according to its own level. (1) Create a new scale_drawable.xml file in the drawable folder. <? xml version=”1.0″ encoding=”utf-8″? ><scale xmlns:android=”http://schemas.android.com/apk/res/android” android:drawable=”@drawable/img_3″ android:scaleHeight=”75%” android:scaleWidth=”75%”></scale> (2) Activity layout file activity_scale_drawable.xml is shown below; <? xml version=”1.0″ encoding=”utf-8″? ><RelativeLayout xmlns:android=”http://schemas.android.com/apk/res/android” xmlns:app=”http://schemas.android.com/apk/res-auto” xmlns:tools=”http://schemas.android.com/tools” android:layout_width=”match_parent” android:layout_height=”match_parent” > <ImageView android:id=”@+id/iv” android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:layout_centerHorizontal=”true” android:background=”@drawable/scale_drawable” /></RelativeLayout> (3) Activity subclass ScaleDrawableActivity handles ScaleDrawable; public class ScaleDrawableActivity extends AppCompatActivity { ImageView iv; private ScaleDrawable scaleDrawable; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_scale_drawable); iv = (ImageView)findViewById(R.id.iv); scaleDrawable = (ScaleDrawable)iv.getBackground(); scaleDrawable.setLevel(1); }}app run results are shown below;
Drawable in Android (3)
Ok, now we change the line of code scaleDrawable.setLevel(1) in ScaleDrawableActivity to scaleDrawable.setLevel(1000), and then run the app again, the rendering is as follows;
Drawable in Android (3)
Do you see that the picture is obviously bigger? Look at the parameters in the setLevel method in ScaleDrawable. The value range of the parameters is 1-10000. Within the value range, the larger the parameter, the larger the internal Drawable will look; ScaleDrawable The default level is 0, then the ScaleDrawable will not be displayed. We can set the level of Drawable to a value greater than 10000, such as 10050, although it can work normally, but it is not recommended to do so, and other problems may occur. I just said that if the ScaleDrawable is 0, then the ScaleDrawable cannot be displayed. Is this true? Let’s take a look at the draw(Canvas canvas) method of ScaleDrawable;
Drawable in Android (3)
Have you seen that, when the level is not 0, the draw method of Drawable is called; well, let’s look at the attributes of the scale tag; android:scaleGravity: It is equivalent to the android:gravity attribute of shape. android:scaleHeight : Indicates the high scaling ratio of the Drawable. The larger the value, the smaller the height of the internal Drawable will be displayed. For example, android:scaleHeight=70%”, then the height of the Drawable is only 30% of the original when displayed. android:scaleWidth : Indicates the scaling ratio of the width of the Drawable. The larger the value, the smaller the width of the internal Drawable is displayed. For example, android:scaleWidth=70%”, then the width of the Drawable is only 30% of the original width when displayed.