Android sliding effect (II) -- Gallery

Gallery is a view container class officially provided by Android. It inherits from the absspinner class and is used to achieve page slide effect.

From the inheritance relationship above, we can see that the absspinner class inherits from adapterview, so we can customize the implementation adapter to fill in the data of the gallery container.

In this example, you can implement an adapter to fill in the image data of the gallery container. First, you can see the effect:

Activity

Import android. app. activity; <br/> Import android. OS. bundle; <br/> Import android. view. view; <br/> Import android. widget. adapterview; <br/> Import android. widget. gallery; <br/> Import android. widget. toast; </P> <p> public class galleryactivity extends activity {<br/> @ override <br/> Public void oncreate (bundle savedinstancestate) {<br/> super. oncreate (savedinstancestate); <br/> setcontentview (R. layout. main ); </P> <p> gallery = (Gallery) findviewbyid (R. id. gallery); <br/> Gallery. setadapter (New imageadapter (this); // gallery add imageadapter image resources <br/> Gallery. setonitemclicklistener; // gallery sets the event of clicking an image resource <br/>}</P> <p> adapterview. onitemclicklistener listener = new adapterview. onitemclicklistener () {<br/> @ override <br/> Public void onitemclick (adapterview <?> Parent, view, int position, long ID) {<br/> toast. maketext (galleryactivity. this, "image" + (Position + 1), toast. length_short ). show (); <br/>}< br/>}; <br/>}

Imageadapter. Java

Import android. content. context; <br/> Import android. view. view; <br/> Import android. view. viewgroup; <br/> Import android. widget. baseadapter; <br/> Import android. widget. gallery; <br/> Import android. widget. imageview; </P> <p> public class imageadapter extends baseadapter {<br/> private context mcontext; </P> <p> // Image array source <br/> private integer [] IMGs = {R. drawable. img1, R. drawable. img2, <br/> r. drawable. img3, R. drawable. img4, R. drawable. img5, <br/> r. drawable. img6, R. drawable. img7 }; </P> <p> Public imageadapter (context c) {<br/> mcontext = C; <br/>}</P> <p> @ override <br/> Public int getcount () {<br/> return IMGs. length; <br/>}</P> <p> // obtain the image position <br/> @ override <br/> Public object getitem (INT position) {<br/> return IMGs [position]; <br/>}</P> <p> // obtain the image id <br/> @ override <br/> Public long getitemid (INT position) {<br/> return position; <br/>}</P> <p> @ override <br/> Public View getview (INT position, view convertview, viewgroup parent) {<br/> imageview = new imageview (mcontext); </P> <p> imageview. setimageresource (IMGs [position]); <br/> imageview. setlayoutparams (new gallery. layoutparams (240,120); // set the layout image to 120x120 <br/> imageview. setscaletype (imageview. scaletype. center); // set the display ratio type (without scaling) <br/> return imageview; <br/>}< br/>}

Main. xml

<? XML version = "1.0" encoding = "UTF-8"?> <Br/> <relativelayout xmlns: Android = "http://schemas.android.com/apk/res/android" <br/> Android: layout_width = "fill_parent" <br/> Android: layout_height = "wrap_content" <br/> Android: Orientation = "vertical"> </P> <p> <! -- Android: gravity --> <br/> <! -- Android: layout_gravity --> </P> <p> <textview <br/> Android: Id = "@ + ID/TV" <br/> Android: layout_width = "fill_parent" <br/> Android: layout_height = "wrap_content" <br/> Android: gravity = "center" <br/> Android: layout_gravity = "center" <br/> Android: layout_margintop = "50dip" <br/> Android: textcolor = "# ffff0000" <br/> Android: textsize = "30sp" <br/> Android: text = "Gallery test"/> </P> <p> <gallery <br/> Android: id = "@ + ID/Gallery" <br/> Android: layout_width = "fill_parent" <br/> Android: layout_height = "wrap_content" <br/> Android: layout_margintop = "10dip" <br/> Android: layout_below = "@ ID/TV"/> </P> <p> </relativelayout>

Source code download

Example Analysis:

1. In imageadapter, the custom implementation of baseadapter is inherited, and several virtual methods of baseadapter are reloaded. The two most important methods are:

Getcount (): returns the size of the resource (total length)

Getview (INT position, view convertview, viewgroup parent): returns the currently displayed Resource (get Focus)

2. In galleryactivity, set the resource through gallery. setadapter (imgadapter); and then set the click listening event of gallery.

3. In Main. XML, the layout file displays textview and gallery, and relativelayout is relative layout.

In general, the above example of gallery is simple, with a clear structure that can meet the needs of basic applications.

Gallery advanced applications

The above example is just the simplest gallery application. If we want to do something cool and cool:

1. The Gallery image can be played cyclically. After sliding to the right to the first image on the left, the last image needs to be displayed. After sliding to the left to the last image, the first image needs to be displayed continuously.

2. Highlight the selected image. If the Image Shadow is not selected, the selected image with the current focus is highlighted.

3. differentiate between click and selected image events and applicable scenarios

Effect 1 -- highlight

Not selected. In galleryactivity, set gallery. setunselectedalpha (0.3f); transparency to 0.3

Select, in getview (INT position, view convertview, viewgroup parent) of imageadapter, set imageview. setbackgroundcolor (color. Alpha (1); background color to 1

Effect 2 -- loop playback

Principle: The principle of gallery loop playback is similar to the idea of loop linked list. The first and last item connections are implemented through "remainder ".

1. In the getcount () method of imageadapter, modify the return value to infinity return integer. max_value;

Modify 2. In the getview (INT position, view convertview, viewgroup parent) method of imageadapter, set imageview. setimageresource (IMGs [position % IMGs. Length]); obtain the remainder

3. In galleryactivity, set gallery. setselection (imgadapter. IMGs. length * 100) to display the image position in the gallery from the middle (imgadapter. IMGs. length * 100)

Explanation:

Modify 1, mainly to make the loop close to an infinite reciprocating loop, so that the position is infinitely large, and the loop is not easy to end in practical applications (theoretically it will end, that is, 2 ^ 31-1 after about 2 billion cycles)

Modify 2 to allow reuse and display of the image through the remainder operation.

3. Because the start position is 0, sliding right to the left side will not be able to cycle (in this case, the left side will be-1, beyond the lower boundary of the IMGs [] array ), therefore, set the start position to imgadapter. IMGs. integer multiple of Length

Effect 3-click and select events

1. Click Event onitemclicklistener, which is triggered by clicking it by hand. It is not triggered when sliding.

2. The onitemselectedlistener event is automatically selected when the image slides to the center of the screen.

Applicable scenarios:

1. Click the onitemclicklistener event to perform logical processing only when you confirm that you want to select this item.

2. The selected event onitemselectedlistener can be used to remind the user of the current item that obtains the focus. If it is confirmed as this item, click onitemclicklistener to perform the next logical processing.

Complete advanced application code:

Activity

Import android. app. activity; <br/> Import android. OS. bundle; <br/> Import android. view. gravity; <br/> Import android. view. view; <br/> Import android. widget. adapterview; <br/> Import android. widget. gallery; <br/> Import android. widget. toast; </P> <p> public class galleryactivity extends activity {</P> <p> private imageadapter imgadapter = NULL; // declare the image resource object <br/> private gallery = NULL; </P> <p> @ override <br /> Public void oncreate (bundle savedinstancestate) {<br/> super. oncreate (savedinstancestate); <br/> setcontentview (R. layout. main); </P> <p> gallery = (Gallery) findviewbyid (R. id. gallery); <br/> imgadapter = new imageadapter (this); <br/> Gallery. setadapter (imgadapter); // set image resources <br/> Gallery. setgravity (gravity. center_horizontal); // sets the horizontally centered display <br/> Gallery. setselection (imgadapter. IMGs. length * 100); // you can specify the start chart. The display position of the slice (which can be used to create the gallery loop display effect) </P> <p> Gallery. setonitemclicklistener (clicklistener); // sets the listener event of the clicked image (triggered only when clicked by hand, but not when sliding) <br/> Gallery. setonitemselectedlistener (selectedlistener); // sets the listener event of the selected image (automatically selected when the image slides to the center of the screen) <br/> Gallery. setunselectedalpha (0.3f); // sets the transparency of the unselected image. <br/> Gallery. setspacing (40); // set the spacing between images <br/>}</P> <p> // click an image monitoring event <br/> adapterview. onitemclicklistener clicklistener = new adapterview. onitemc Licklistener () {<br/> @ override <br/> Public void onitemclick (adapterview <?> Parent, view, int position, long ID) {<br/> toast. maketext (galleryactivity. this, "Click image" + (Position + 1), 100 ). show (); <br/>}< br/>}; </P> <p> // listener event of the selected image <br/> adapterview. onitemselectedlistener selectedlistener = new adapterview. onitemselectedlistener () {<br/> @ override <br/> Public void onitemselected (adapterview <?> Parent, view, int position, long ID) {<br/> toast. maketext (galleryactivity. this, "selected image" + (Position + 1), 20 ). show (); <br/>}</P> <p> @ override <br/> Public void onnothingselected (adapterview <?> Arg0) {</P> <p >}< br/>}; <br/>}

Imageadapter. Java

Import android. content. context; <br/> Import android. graphics. color; <br/> Import android. view. view; <br/> Import android. view. viewgroup; <br/> Import android. widget. baseadapter; <br/> Import android. widget. gallery; <br/> Import android. widget. imageview; </P> <p> public class imageadapter extends baseadapter {<br/> private context mcontext; </P> <p> // Image array source <br/> Public integer [] IMGs = {R. drawable. img1, R. drawable. img2, <br/> r. drawable. img3, R. drawable. img4, R. drawable. img5, <br/> r. drawable. img6, R. drawable. img7 }; </P> <p> Public imageadapter (context c) {<br/> mcontext = C; <br/>}</P> <p> @ override <br/> Public int getcount () {<br/> return integer. max_value; <br/>}</P> <p> // obtain the image position <br/> @ override <br/> Public object getitem (INT position) {<br/> return IMGs [position]; <br/>}</P> <p> // obtain the image id <br/> @ override <br/> Public long getitemid (INT position) {<br/> return position; <br/>}</P> <p> @ override <br/> Public View getview (INT position, view convertview, viewgroup parent) {<br/> imageview = new imageview (mcontext); </P> <p> imageview. setimageresource (IMGs [position % IMGs. length]); <br/> imageview. setlayoutparams (new gallery. layoutparams (200, 94); // set the layout image to 120x120 <br/> imageview. setscaletype (imageview. scaletype. center); // set the display ratio type <br/> imageview. setbackgroundcolor (color. alpha (1); <br/> return imageview; <br/>}< br/>}

Source code download

Reference recommendations:

Gallery

Gallery tutorial