第二章 吸引你的眼球—UI編程（4），第二章ui

第二章 吸引你的眼球—UI編程（4），第二章ui
2.1.6圖片拖動—拖動效果（Gallery）

一個應用如果有非常炫的效果相信也可以吸引不少人的眼球。Gallery就是一個非常炫的效果，你可以用手指直接拖動圖片進行移動，iPhone剛出現的時候，這個效果就吸引了無數的蘋果粉絲為之瘋狂，在Android平台上也可以實現這一效果。下面，我們以一個簡單的像冊例子來加以說明。

1）在布局檔案中定義一個Gallery（用來展示圖片）和一個TextView（用來監聽Gallery點擊事件）。

<Gallery     android:id="@+id/my_gallery"     android:layout_width="fill_parent"     android:layout_height="wrap_content"/>

 

2）使用一個容器來存放Gallary顯示的圖片。

我們在這裡使用一個繼承自BaseAdapter類的衍生類別來充當容器。代碼如下：

// import略 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);              // 給ImageView設定資源              i.setImageResource(mImageIds[position]);              // 設定顯示比例類型              i.setScaleType(ImageView.ScaleType.FIT_XY);              // 設定布局圖片以200*400的比例顯示              i.setLayoutParams(new Gallery.LayoutParams(200, 400));              return i;         }     }

 

3）通過setAdapter方法把資源檔添加到Gallery中來顯示，並給它添加事件監聽。部分代碼如下：

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("你點擊的是第" + (position + 1) + "圖片");             }         });

 

效果2-13所示：

圖2-13 Gallary的使用

 

4）改變樣式。

這是你想要的效果嗎？中間的邊框似乎看起來怪怪的，沒關係，我們可以搞定它。

在valus目錄下建立一個attrs.xml檔案，代碼如下：

<?xml version="1.0" encoding="utf-8"?> <resources>     <declare-styleable name="myGallery">         <attr name="android:galleryItemBackground" />     </declare-styleable> </resources>

 

然後我們在ImageAdapter中的兩個地方做一些改動，一個是它的構造方法：

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(); }

 

最後一步，在getView方法中，將mGalleryItemBackground應用為ImageView的背景，代碼如下：

i.setBackgroundResource(mGalleryItemBackground);

 

下面，我們再來看看效果，2-14所示：

圖2-14 Gallary中使用樣式

 

怎麼樣？是不是變的順眼多了，自己動手來試試吧。