Android study note 26: use of the image switching control imageswitcher

In Windows, to view multiple images, you can use the "Windows photo viewer" to switch between "previous" and "Next" to browse multiple images.

In Android, you can use the image switching control imageswitcher to browse multiple images. The following example shows how to use the imageswitcher Control for image switching.

 

1. Interface Layout

In the XML layout file, we use linearlayout to vertically layout the entire interface. A horizontally centered imageswitcher control is set at the top of the interface to display multiple images. Under the imageswitcher control, use the linearlayout horizontal layout to set four imagebutton buttons. When you click these buttons, they are used to implement the right-hand image, display the previous image, display the next image, and left-hand image effects. The layout file is simple. The source code is as follows:

 1   <  Linearlayout  Xmlns: Android = "Http://schemas.android.com/apk/res/android"  2   Xmlns: Tools  = "Http://schemas.android.com/tools"  3   Android: Orientation  = "Vertical"  4   Android: layout_width  = "Match_parent"  5   Android: layout_height  = "Match_parent"   >  6  7       <  Imageswitcher  8           Android: ID  = "@ + ID/imageswitcher"  9   Android: layout_margintop  = "5dp"  10   Android: layout_gravity  = "Center"  11   Android: layout_width  = "Wrap_content"  12  Android: layout_height  = "Wrap_content"      > </  Imageswitcher  >  13   14       <  Linearlayout  Xmlns: Android  = "Http://schemas.android.com/apk/res/android"  15   Xmlns: Tools  = "Http://schemas.android.com/tools"  16  Android: Orientation  = "Horizontal"  17   Android: layout_margintop  = "5dp"  18   Android: layout_width  = "Match_parent"  19   Android: layout_height  = "Match_parent"       >  20       21           <! -- Right arrow  -->  22           <  Imagebutton  23               Android: ID  = "@ + ID/rightrotatearrow"  24   Android: layout_marginleft  = "30dp"  25   Android: layout_width  = "Wrap_content"  26  Android: layout_height  = "Wrap_content"  27   Android: SRC  = "@ Drawable/rightrotatearrow"      > </  Imagebutton  >  28           29           <! --  Previous arrow  -->  30           <  Imagebutton 31               Android: ID  = "@ + ID/forwardarrow"  32   Android: layout_width  = "Wrap_content"  33   Android: layout_height  = "Wrap_content"  34   Android: SRC  = "@ Drawable/forwardarrow"      > </  Imagebutton  > 35       36           <! --  Next arrow  -->  37           <  Imagebutton  38               Android: ID  = "@ + ID/nextarrow"  39   Android: layout_width  = "Wrap_content"  40   Android: layout_height = "Wrap_content"  41   Android: SRC  = "@ Drawable/nextarrow"      > </  Imagebutton  >  42           43           <! --  Left arrow  -->  44           <  Imagebutton  45              Android: ID  = "@ + ID/liftrotatearrow"  46   Android: layout_width  = "Wrap_content"  47   Android: layout_height  = "Wrap_content"  48   Android: SRC  = "@ Drawable/liftrotatearrow"      > </  Imagebutton  >  49          50       </  Linearlayout  >  51       52   </  Linearlayout  > 

ProgramThe result 1 after running is shown in.

Figure 1 Main Interface

 

2. viewfactory Interface

To display an image in the imageswitcher control, you must set a viewfactory for the imageswitcher class to distinguish the displayed image from the parent window. This can be achieved through the following methods:

Mimageswitcher. setfactory ();

In addition, we also need to implement the makeview () abstract method in the viewswitcher. viewfactory interface. This method can return an imageview object, and all images will be displayed through this imageview object. The specific implementation method is as follows:

1/*2 * Function: makeview ()3 * Describe: displays all images through imageview.4 * Author: blog Park-still indifferent5*/6PublicView makeview (){7Return NewImageview (This);8}
 

 

3. Store Image Resources

In Android Study Notes 25: gallery controls Gallery (Http://www.cnblogs.com/menlsh/archive/2013/02/26/2934434.html), we store image resources by using a derived class imageadapter that inherits from the baseadapter class.

In this instance, we will create an arraylist object to store image resources. The method is as follows:

List <drawable> List = new arraylist <drawable> ();

Then, you can use the list. Add () method to load image resources to the arraylist object. The specific method is as follows:

1//Attach image resources to arraylist2 List. Add (getresources (). getdrawable (R. drawable. image1 ));3 List. Add (getresources (). getdrawable (R. drawable. image2 ));4 List. Add (getresources (). getdrawable (R. drawable. image3 ));5List. Add (getresources (). getdrawable (R. drawable. image4 ));
 

In this instance, we added four resource images to the arraylist.

 

4. obtain image resources

When we click the "previous" and "Next" buttons, we need to obtain image resources for display. How can we achieve this?

View the imageswitcher API help documentation (Http://developer.android.com/reference/android/widget/ImageSwitcher.html), we can see that there are three ways to load images to imageswitcher:

(1) Public void setimagedrawable (drawable );

(2) Public void setimageresource (INT resid );

(3) Public void setimageuri (URI );

The setimagedrawable () method obtains image resources through the drawable object; the setimageresource () method obtains image resources through the image resource ID; setimageuri () method To obtain image resources through the URI path of the image.

In this example, we use the setimagedrawable () method to obtain image resources, which is why the drawable object is used when we store images in the arraylist object.

 

5. Button Processing

In this instance, we also need to implement The onclick () method of the onclicklistener interface to listen to events on the four buttons. The specific implementation method is as follows:

 1       /*  2   * Function: Process event listening.  3   * Author: blog Park-still indifferent  4        */  5       Public   Void  Onclick (view v ){  6          Switch  (V. GETID ()){  7           Case R. Id. forwardarrow: //  Forward arrow button Processing  8 Index -- ;  9               If (Index <0 ){  10 Index = List. Size ()-1 ;  11   } 12   Mimageswitcher. setimagedrawable (list. Get (INDEX ));  13               Break  ;  14           Case R. Id. nextarrow: //  Button for backward arrow  15 Index ++ ;  16               If (Index> = List. Size ()){  17 Index = 0 ;  18   }  19   Mimageswitcher. setimagedrawable (list. Get (INDEX ));  20               Break  ;  21           Case R. Id. liftrotatearrow: //  Left arrow buttons and buttons  22               //  To Do 23               Break  ;  24           Case R. Id. rightrotatearrow: //  Button processing with right arrow  25               //  To Do  26               Break  ;  27   }  28 }

The variable index is used to index the image and display the image cyclically. That is, when the last image is displayed, click "Next" again ", then, the index number of the image is reset to 0, and the first image is re-displayed. When the first image is displayed, click "previous" again to reset the index number of the image to the maximum value, the last image is displayed.

In this instance, buttons left and right are not processed. To achieve the image rotation effect, see the blog "android study note 11: Image translation, rotation, and scaling" (Http://www.cnblogs.com/menlsh/archive/2012/12/02/2798802.html ).