Chapter two attracts your eyeballs.-ui Programming (4)

2.1.6 Picture Drag-Drag effect (Gallery)

An application that has a very flashy effect can also attract a lot of people's attention. Gallery is a very cool effect, you can use your finger to drag the image to move, when the iphone just appeared, this effect has attracted countless Apple fans crazy, on the Android platform can also achieve this effect. Below, we illustrate with a simple example of an image book.

1) Define a gallery (used to display the image) and a textview (to listen for gallery click events) in the layout file.

<gallery Android:id= "@+id/my_gallery" Android:layout_width= "Fill_parent" android:layout_height= "Wrap_content"/>

2) Use a container to hold the picture displayed by the gallary.

Here we use a derived class that inherits from the Baseadapter class to act as a container. The code is as follows:

Import slightly public class Imageadapter extends Baseadapter { Private Context Mcontext; Private integer[] Mimageids = {R.DRAWABLE.P01,R.DRAWABLE.P02,R.DRAWABLE.P03}; Public Imageadapter (Context context) { Mcontext = context; } @Override public int GetCount () { return mimageids.length; } @Override Public Object getItem (int position) { return position; } @Override public long getitemid (int position) { return position; } @Override Public View GetView (int position, View Convertview, ViewGroup parent) { ImageView i = new ImageView (mcontext); Setting up resources for ImageView I.setimageresource (Mimageids[position]); Set the display scale type I.setscaletype (ImageView.ScaleType.FIT_XY); Set the layout picture to be displayed in 200*400 scale I.setlayoutparams (New Gallery.layoutparams (200, 400)); return i; } }

3) Use the Setadapter method to add the resource file to the gallery to display and add event listeners to it. Some of the code is as follows:

Mytextview = (TextView) Findviewbyid (R.id.my_textview); Gallery Gallery = (Gallery) Findviewbyid (r.id.my_gallery); Gallery.setadapter (New Imageadapter (this)); Gallery.setonitemclicklistener (New Adapterview.onitemclicklistener () { @Override public void Onitemclick (adapterview<?> arg0, View arg1, int position, long ID) { Mytextview.settext ("You clicked on is the" + (position + 1) + "picture"); } });

The effect 2-13 shows:

Figure 2-13 Use of gallary

4) Change the style.

Is this the effect you want? The middle border looks weird, it's okay, we can fix it.

Create a new Attrs.xml file under the Valus directory with the following code:

<?xml version= "1.0" encoding= "Utf-8"?> <resources> <declare-styleable name= "Mygallery" > <attr name= "Android:galleryitembackground"/> </declare-styleable> </resources>

Then we make some changes in two places in the Imageadapter, one of which is how it is constructed:

int mgalleryitembackground; Public Imageadapter (Context context) { Mcontext = context; TypedArray a = obtainstyledattributes (r.styleable.mygallery); Mgalleryitembackground = A.getresourceid (r.styleable.mygallery_android_galleryitembackground, 0); A.recycle (); }

The final step, in the GetView method, applies the mgalleryitembackground to the background of the ImageView, with the following code:

I.setbackgroundresource (Mgalleryitembackground);

Below, let's look at the effect, 2-14 shows:

Figure 2-14 Using styles in Gallary

What do you think? is not become more pleasing to the eye, try it yourself.

Chapter two attracts your eyeballs.-ui Programming (4)