Chapter 2 attracting your attention-UI programming (4) and Chapter 2 ui

Chapter 2 attracting your attention-UI programming (4) and Chapter 2 ui
2.1.6 image drag-drag effect (Gallery)

If an application has a very dazzling effect, I believe it can also attract the attention of many people. Gallery is a very dazzling effect. You can drag images with your fingers to move them. When the iPhone first appeared, this effect attracted countless Apple fans, this effect can also be achieved on the Android platform. The following is a simple photo album example.

1) define a Gallery (used to display images) and a TextView (used to listen to 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 store images displayed by Gallary.

Here we use a derived class inherited from the BaseAdapter class to act as a container. The Code is as follows:

// Import omitted 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 ); // Set resources for ImageView I. setImageResource (mImageIds [position]); // Set the display proportion type I. setScaleType (ImageView. ScaleType. FIT_XY ); // Set the layout image to display at a ratio of 200*400 I. setLayoutParams (new Gallery. LayoutParams (200,400 )); Return I; } }

 

3) use the setAdapter method to add the resource file to Gallery for display and add event listening to it. Some 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 ("the number you clicked" + (position + 1) + "image "); } });

 

The results are as follows:

Figure 2-13 usage of Gallary

 

4) change the style.

Is this what you want? The border in the middle seems strange. It doesn't matter. We can fix it.

Create an attrs. xml file in the valus directory. The Code is as follows:

<? 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 the ImageAdapter. One is its constructor:

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 last step is to apply mGalleryItemBackground to the background of ImageView in the getView method. The Code is as follows:

I. setBackgroundResource (mGalleryItemBackground );

 

Next, let's take a look at the effect, as shown in Figure 2-14:

Figure 2-14 use a style in Gallary

 

How is it? Isn't it getting better? Try it on your own.