Android sliding effect BASICS (4) -- gallery + gridview

The Android system comes with two controls: the gridview and the gallery, which are displayed on the gridview mesh and browsed by gallery. The two controls can be combined to truly achieve the gallery browsing image effect.

In this example, two controls, gridview and gallery, are used to simulate the Image Browsing effect of a complete gallery image set. As follows:

1. gridview

First, customize a gridimageadapter image adapter to fill the picture of the gridview Control

Public class gridimageadapter extends baseadapter {<br/> private context mcontext; <br/> drawable btndrawable; </P> <p> Public gridimageadapter (context) {<br/> mcontext = context; <br/> resources Resources = context. getresources (); <br/> btndrawable = resources. getdrawable (R. drawable. BG); <br/>}</P> <p> @ override <br/> Public int getcount () {<br/> return imagesource. mthumbids. length; <br/>}</P> <p> @ override <br/> Public object getitem (INT position) {<br/> return position; <br/>}</P> <p> @ 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/> imageviewext imageview; <br/> int space; </P> <p> If (convertview = NULL) {<br/> imageview = new imageviewext (mcontext ); <br/> If (imagecol = 5) {<br/> Space = DM. heightpixels/imagecol-6; <br/> imageview. setlayoutparams (New gridview. layoutparams (space, space); <br/>} else {<br/> Space = DM. widthpixels/imagecol-6; <br/> imageview. setlayoutparams (New gridview. layoutparams (space, space); <br/>}< br/> imageview. setadjustviewbounds (true); <br/> imageview. setscaletype (imageview. scaletype. center_crop); // scale the image to make it the same length and width </P> <p> imageview. setpadding (3, 3, 3, 3); <br/>}else {<br/> imageview = (imageviewext) convertview; <br/>}< br/> imageview. setimageresource (imagesource. mthumbids [position]); </P> <p> return imageview; <br/>}< br/>}Then, fill the gridview with gridimageadapter

Gridview = (gridview) findviewbyid (R. id. mygrid); <br/> gridimageadapter = new gridimageadapter (this); <br/> gridview. setadapter (gridimageadapter); <br/> gridview. setonitemclicklistener; // you can specify a listener.

Finally, set the click listening event of the gridview control.

Adapterview. onitemclicklistener listener = new adapterview. onitemclicklistener () {<br/> @ override <br/> Public void onitemclick (adapterview <?> Arg0, view arg1, int position, long ID) {<br/> intent = new intent (); <br/> intent. setclass (gridviewactivity. this, galleryactivity. class); <br/> intent. putextra ("position", position); <br/> startactivity (intent); <br/>}< br/> };
2. Gallery

After the display and listening events of the gridview image are completed, clicking the image now starts an activity to display the currently clicked image. The control for displaying the image is Gallery.

First, like the gridview, define an imageadapter image adapter to fill the gallery

Public class imageadapter extends baseadapter {<br/> private context mcontext; <br/> private int MPOs; </P> <p> Public imageadapter (context) {<br/> mcontext = context; <br/>}</P> <p> Public void setownposition (INT ownposition) {<br/> This. MPOs = ownposition; <br/>}</P> <p> Public int getownposition () {<br/> return MPOs; <br/>}</P> <p> @ override <br/> Public int getcount () {<br/> return imagesource. mthumbids. length; <br/>}</P> <p> @ override <br/> Public object getitem (INT position) {<br/> MPOs = position; <br/> return position; <br/>}</P> <p> @ override <br/> Public long getitemid (INT position) {<br/> MPOs = position; <br/> return position; <br/>}</P> <p> @ override <br/> Public View getview (INT position, view convertview, viewgroup parent) {<br/> MPOs = position; <br/> imageview = new imageview (mcontext); <br/> imageview. setbackgroundcolor (0xff000000); <br/> imageview. setscaletype (imageview. scaletype. fit_center); <br/> imageview. setlayoutparams (New mygallery. layoutparams (layoutparams. match_parent, layoutparams. match_parent); <br/> imageview. setimageresource (imagesource. mthumbids [position]); </P> <p> return imageview; <br/>}< br/>}
Then, fill the gallery with the imageadapter

Mygallery galllery = (mygallery) findviewbyid (R. id. mygallery); <br/> intent = getintent (); <br/> position = intent. getintextra ("position", 0); // obtain the position of the image from gridviewactivity <br/> imageadapter imgadapter = new imageadapter (this); <br/> galllery. setadapter (imgadapter); // sets the image imageadapter <br/> galllery. setselection (position); // set the currently displayed image </P> <p> animation an = animationutils. loadanimation (this, R. anim. scale); // gallery animation <br/> galllery. setanimation ();

At this point, if you are careful, you can note that our gallery is also defined as mygallery. The specific definition is as follows:

Public class mygallery extends gallery {<br/> Boolean isfirst = false; <br/> Boolean islast = false; </P> <p> Public mygallery (context) {<br/> super (context); <br/>}</P> <p> Public mygallery (context, attributeset paramattributeset) {<br/> super (context, paramattributeset); <br/>}</P> <p>/** whether to slide left (true-to left; false-to right) */<br/> private Boolean isscrollingleft (motionevent E1, motionevent E2) {<br/> return e2.getx ()> e1.getx (); <br/>}</P> <p> @ override <br/> Public Boolean onfling (motionevent E1, motionevent E2, float distancex, float distancey) {<br/> imageadapter IA = (imageadapter) This. getadapter (); <br/> int P = IA. getownposition (); // obtain the position of the current image <br/> int COUNT = IA. getcount (); // obtain the total number of all images, count <br/> int kevent; <br/> If (isscrollingleft (E1, E2 )) {<br/> If (P = 0 & isfirst) {<br/> toast. maketext (this. getcontext (), "already the first page", toast. length_short ). show (); <br/>}else if (P = 0) {<br/> isfirst = true; <br/>}else {<br/> islast = false; <br/>}</P> <p> kevent = keyevent. keycode_dpad_left; <br/>} else {<br/> If (P = count-1 & islast) {<br/> toast. maketext (this. getcontext (), "to the last page", toast. length_short ). show (); <br/>}else if (P = count-1) {<br/> islast = true; <br/>}else {<br/> isfirst = false; <br/>}</P> <p> kevent = keyevent. keycode_dpad_right; <br/>}< br/> onkeydown (kevent, null); <br/> return true; <br/>}< br/>}
Galleryactivity layout file gallery. xml

<? XML version = "1.0" encoding = "UTF-8"?> <Br/> <linearlayout xmlns: Android = "http://schemas.android.com/apk/res/android" <br/> Android: layout_width = "match_parent" <br/> Android: layout_height = "match_parent" <br/> Android: gravity = "center" <br/> Android: Orientation = "horizontal" <br/> Android: padding = "10dip"> <br/> <relativelayout <br/> Android: layout_width = "wrap_content" <br/> Android: layout_height = "wrap_content" <br/> Android: background = "#000000" <br/> Android: padding = "2dip"> <br/> <COM. homer. gridgallery. mygallery <br/> Android: Id = "@ + ID/mygallery" <br/> Android: layout_width = "fill_parent" <br/> Android: layout_height = "fill_parent" <br/> Android: spacing = "16dp"/> <br/> </relativelayout> <br/> </linearlayout>

Source code download

Reference recommendations:

Gridview

Grid view tutorial

Gallery

Gallery tutorial

Viewgroup