UI control Display Image control ImageView (top)

(i) overview
ImageView is mainly used to display the image of the control, you can zoom in, zoom out and rotate the function.
(ii) The difference between SRC and background attributes in ImageView

no.1--Use the program to test the difference between SRC and background properties:

<?xml version= "1.0" encoding= "Utf-8"?><linearlayout xmlns:android="Http://schemas.android.com/apk/res/android"  Android:layout_width="Match_parent"android:layout_height="Match_parent"  Android:orientation="vertical">                <imageview  android:id
      = "@+id/imageview1"  android:layout_width  = "wrap_content"  android:layout_height  = "wrap_content"  android:src  = "@drawable/maomi" />      <imageview  android:id
      = "@+id/imageview2"  android:layout_width  = "200DP"  android:layout_height  = "wrap_content"  android:src  =  "@drawable/maomi" />       <imageview  android:id
      = "@+id/imageview3"  android:layout_width  = "wrap_content"  android:layout_height  = "wrap_content"  android:background  =< Span class= "Hljs-value" > "@drawable/maomi" />       <ImageViewandroid:id= "@+id/imageview4"android:layout_width=" 200DP "android:layout_height="wrap_content "android:background=" @drawable/ Maomi " />                                </linearlayout>

Operating effect:

In addition, we just set the width or height, if we set the value of both, background will continue to fill, and the size of SRC may change! For example, try running the following code:

This leads to an important attribute of ImageView-–scaletype picture scaling problem, this problem content more, we put in the back, first solve the following problems;

(iii) The method of solving the deformation of the picture caused by blackground stretching
In the 4th diagram above we can see the picture has been stretched deformation, the square into a rectangle, obviously this is very ugly, there is no solution, there! There are two more common methods in the present:
(1) This applies to the dynamic loading of ImageView code is also simple, only need to add a view, the size of the dead on the OK;

(2)

Cat.xml

<?xml version="1.0" encoding="utf-8"?><bitmap xmlns:android="http://schemas.android.com/apk/res/android" >        android:id="@id/cat_bg"        android:gravity="top"        android:src="@drawable/maomi"        android:titleMode="disabled"</bitmap>

Dynamic: Ibtncat.setbackgroundresource (R.DRAWABLE.CAT);
Static: android:background= "@drawable/cat"
(3) Setting transparency issues

(4) The magical combination of SRC and background
Online a picture:

As follows:

Implementation code:

<ImageView        android:id="@+id/imageView1"        android:layout_width="200dp"        android:layout_height="wrap_content"        android:src="@drawable/maomi"        android:background="#CCAADF"/>

(5) Set background and SRC attributes in code

(d) Adjustviewbounds set whether the zoom saves the original aspect ratio

Run:

<linearlayout xmlns:android="Http://schemas.android.com/apk/res/android"  Xmlns:tools="Http://schemas.android.com/tools"android:layout_width="Match_parent"  android:layout_height="Match_parent"android:orientation="Vertical"  Tools:context="Com.example.android_drawable_xml. Mainactivity " >                        <!--normal Pictures--    <ImageViewandroid:id= "@+id/imageview1"android:layout_width=" Wrap_content "android:layout_height="wrap_content "android:layout_margin=" 5px "android:src=" @drawable/maomi " />                                            <!--limits the maximum width and height, and sets the adjustment boundary to maintain the aspect ratio of the displayed image .    <imageview  android:id
      = "@+id/imageview2"  android:layout_width  = "wrap_content"  android:layout_height  = "wrap_content"  android:layout_margin  = "5px"  android:adjustviewbounds  =< Span class= "Hljs-value" > "true"  android:maxheight  =" 200px " android:maxwidth  =" 200px " android:src  =" @drawable/maomi "/> </linearlayout>

(v) ScaleType to set the fill mode of the picture
Place ~

Not much nonsense say ~ ~ ~ a picture to understand them several:

is not an instant enlightened ~ ~ ~ one of the following to do the experiment;

(1) Fitend, Fitstart, Fircenter
Here, for example Firend, the other two classes are similar:
Operating effect:

Implementation code:

<?xml version= "1.0" encoding= "Utf-8"?><linearlayout  xmlns: Android  = "http://schemas.android.com/apk/res/android"  android:layout_width  =" match_parent " android:layout_height  =" match_parent " android:orientation  =;     <ImageViewandroid:id= "@+id/imageview"android:layout_width=" 300px "android:layout_height=" 300px "android:layout_margin=" 5px "  Android:scaletype="Fitend"android:background="#AAFD00"android:src ="@drawable/mengchong" />                                                        </linearlayout>

(2) Centercrop and Centerinside

Operating effect:

Implementation code:

<ImageViewandroid:id= "@+id/imageview2"android:layout_width=" 300px "android:layout_height=" 300px "android:layout_margin=" 5px "  Android:scaletype="Centercrop"android:background="#AAFD00"android: src="@drawable/mengchong" />                                                              <ImageViewandroid:id= "@+id/imageview3"android:layout_width=" 300px "android:layout_height=" 300px "android:layout_margin=" 5px "  Android:scaletype="Centerinside"android:background="#AAFD00"  ANDROID:SRC="@drawable/mengchong" />                                                        

(3) Fitxy

Operating effect:

Implementation code:

  <ImageView        android:id="@+id/imageview4"        android:layout_width="300px"        android:layout_height="300px"        android:layout_margin="5px"        android:scaleType="fitXY"        android:background="#AAFD00"        android:src="@drawable/mengchong" />

I choose the picture is small, so the view in X, Y did not change, if the transfer to X, y than the larger picture will be found to be "high-thin" or "chunky";

(4) matrix--believe that contact with the ImageView drawing cheese, must be familiar with it;

Run:

Implementation code:

    <ImageView        android:id="@+id/imageview"        android:layout_width="300px"        android:layout_height="300px"        android:layout_margin="5px"        android:scaleType="matrix"        android:background="#AAFD00"        android:src="@drawable/mengchong" />

(5) Center

Operating effect:

Implementation code:

<ImageView        android:id="@+id/imageview"        android:layout_width="100px"        android:layout_height="100px"        android:layout_margin="5px"        android:scaleType="center"        android:background="#AAFD00"        android:src="@drawable/meizi" />

Finished ~ ~ Some of the basic content, the next chapter we enter the actual application!

UI control Display Image control ImageView (top)