Android 組件Gallery和GridView示例講解

更新時(shí)間：2016年08月10日 09:04:30 作者：chino

本文主要講解Android 組件Gallery和GridView,這里詳細(xì)介紹組件Gallery和GridView的知識(shí)要點(diǎn)，并附示例代碼和實(shí)現(xiàn)效果圖，有興趣的小伙伴可以參考下

Android Gallery和GridView組件：

Gallery 畫廊

Gallery是一個(gè)內(nèi)部元素可以水平滾動(dòng)，并且可以把當(dāng)前選擇的子元素定位在它中心的布局組件。

我們還是直接看看例子的運(yùn)行效果。

下面上代碼，相關(guān)解釋都放在代碼里了。

1、建立一個(gè)新項(xiàng)目 HelloGallery

2、拷貝wallpaper_0.jpg…wallpaper_9.jpg 10個(gè)圖片文件到res/drawable目錄

3、res/layout/main.xml文件的內(nèi)容如下：

<?xml version="1.0" encoding="utf-8"?>
<framelayout android:layout_height="fill_parent" android:layout_width="fill_parent" xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/FrameLayout01">
<imageview android:layout_height="fill_parent" android:layout_width="fill_parent" android:id="@+id/ImageView01" android:src="@drawable/wallpaper_0">
</imageview>

<gallery android:layout_height="wrap_content" android:layout_width="fill_parent" xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/Gallery01" android:spacing="5dp">
</gallery>
</framelayout>

其中我們使用FrameLayout來(lái)實(shí)現(xiàn)疊加效果，使用ImageView來(lái)顯示大圖，Gallery來(lái)展示畫廊，android:spacing="5dp" 屬性則是用來(lái)設(shè)置元素之間的間隔。

4、在res/values/目錄中新建一個(gè)attrs.xml內(nèi)容如下：

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

5、在MainHelloGallery.java中的內(nèi)容如下：

package android.basic.lesson13;

import android.app.Activity;
import android.content.Context;
import android.content.res.TypedArray;
import android.os.Bundle;
import android.view.View;
import android.view.ViewGroup;

import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.BaseAdapter;
import android.widget.Gallery;
import android.widget.ImageView;
import android.widget.Toast;

public class MainHelloGallery extends Activity {

  /** Called when the activity is first created. */
  @Override
  public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main);

    //定義UI組件
    final ImageView iv= (ImageView)findViewById(R.id.ImageView01);
    Gallery g = (Gallery) findViewById(R.id.Gallery01);

    //設(shè)置圖片匹配器
    g.setAdapter(new ImageAdapter(this));

    //設(shè)置AdapterView點(diǎn)擊監(jiān)聽(tīng)器，Gallery是AdapterView的子類
    g.setOnItemClickListener(new OnItemClickListener() {

      @Override
      public void onItemClick(AdapterView<?> parent, View view,
          int position, long id) {
        //顯示點(diǎn)擊的是第幾張圖片
        Toast.makeText(MainHelloGallery.this, "" + position,
            Toast.LENGTH_LONG).show();
        //設(shè)置背景部分的ImageView顯示當(dāng)前Item的圖片
        iv.setImageResource(((ImageView)view).getId());
      }
    });
  }

  //定義繼承BaseAdapter的匹配器
  public class ImageAdapter extends BaseAdapter {

    //Item的修飾背景
    int mGalleryItemBackground;

    //上下文對(duì)象
    private Context mContext;

    //圖片數(shù)組
    private Integer[] mImageIds = { R.drawable.wallpaper_0,
        R.drawable.wallpaper_1, R.drawable.wallpaper_2,
        R.drawable.wallpaper_3, R.drawable.wallpaper_4,
        R.drawable.wallpaper_5, R.drawable.wallpaper_6,
        R.drawable.wallpaper_7, R.drawable.wallpaper_8,
        R.drawable.wallpaper_9 };

    //構(gòu)造方法
    public ImageAdapter(Context c){
      mContext = c;
      //讀取styleable資源
    TypedArray a = obtainStyledAttributes(R.styleable.HelloGallery);
    mGalleryItemBackground = a.getResourceId(
      R.styleable.HelloGallery_android_galleryItemBackground, 0);
    a.recycle();

    }

    //返回項(xiàng)目數(shù)量
    @Override
    public int getCount() {
      return mImageIds.length;
    }

    //返回項(xiàng)目
    @Override
    public Object getItem(int position) {
      return position;
    }

    //返回項(xiàng)目Id
    @Override
    public long getItemId(int position) {
      return position;
    }

    //返回視圖
    @Override
    public View getView(int position, View convertView, ViewGroup parent) {

      ImageView iv = new ImageView(mContext);
      iv.setImageResource(mImageIds[position]);
      //給生成的ImageView設(shè)置Id，不設(shè)置的話Id都是-1
      iv.setId(mImageIds[position]);
      iv.setLayoutParams(new Gallery.LayoutParams(120, 160));
      iv.setScaleType(ImageView.ScaleType.FIT_XY);
      iv.setBackgroundResource(mGalleryItemBackground);
      return iv;
    }

  }
}

我們點(diǎn)擊某一張圖片，會(huì)把該子元素的圖片顯示在放在后面一層的ImageView組件中。有興趣的同學(xué)可以了解一下AdapterView的繼承關(guān)系：