Android Gallery用法（自訂邊框+底部小圓點）

最近在項目中用到圖片輪播，試了Gallery，ViewFlipper，ViewPager,感覺Gallery最符合需求，但是Gallery的系統邊框很難看，項目中要求用自己的背景圖片。

下面來看一下使用Gallery實現圖片輪播

運行效果：

布局檔案：

    <FrameLayout        android:layout_width="fill_parent"        android:layout_height="wrap_content"        android:paddingLeft="16dp"        android:paddingRight="16dp"        android:paddingTop="10dp" >        <Gallery            android:id="@+id/gallery"            android:layout_width="fill_parent"            android:layout_height="wrap_content"            android:fadingEdge="none"            android:spacing="0dp" />        <RelativeLayout            android:layout_width="fill_parent"            android:layout_height="18dp"            android:layout_gravity="bottom"            android:layout_marginBottom="3dp"            android:layout_marginLeft="3dp"            android:layout_marginRight="3dp"            android:background="#80776f63"            android:gravity="center" >            <ImageView                android:id="@+id/dot_1"                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:src="@drawable/ic_dot_normal" />            <ImageView                android:id="@+id/dot_2"                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:layout_marginLeft="10dp"                android:layout_toRightOf="@+id/dot_1"                android:src="@drawable/ic_dot_normal" />            <ImageView                android:id="@+id/dot_3"                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:layout_marginLeft="10dp"                android:layout_marginRight="10dp"                android:layout_toRightOf="@+id/dot_2"                android:src="@drawable/ic_dot_normal" />        </RelativeLayout>    </FrameLayout>

其中， android:fadingEdge="none"消除圖片兩邊的陰影。使用FrameLayout在底部顯示小圓點

public class MainActivity extends Activity {private Gallery mGallery;private int index = 0;// 記錄選中的圖片位置private ImageView[] mImageViewIds;// 小圓點ImageView數組private static final int IMAGE_COUNT = 3;// 小圓點個數@Overridepublic void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);findViews();mImageViewIds[0].setImageDrawable(getBaseContext().getResources().getDrawable(R.drawable.ic_dot_focused));ImageAdapteradapter = new ImageAdapter(this);mGallery.setAdapter(adapter);Timer timer = new Timer();timer.schedule(task, 2000, 2000);mGallery.setOnItemSelectedListener(onItemSelectedListener);mGallery.setOnItemClickListener(onItemClickListener);}private void findViews() {mGallery = (Gallery) findViewById(R.id.gallery);mImageViewIds = new ImageView[] { (ImageView) findViewById(R.id.dot_1),(ImageView) findViewById(R.id.dot_2),(ImageView) findViewById(R.id.dot_3) };}private TimerTask task = new TimerTask() {@Overridepublic void run() {Message message = new Message();message.what = 2;index = mGallery.getSelectedItemPosition();index++;handler.sendMessage(message);}};/** * 開一個線程執行耗時操作 */private Handler handler = new Handler() {@Overridepublic void handleMessage(Message msg) {super.handleMessage(msg);switch (msg.what) {case 2:mGallery.setSelection(index);break;default:break;}}};/** * 設定小圓點顯示，position會一直增加，如果要迴圈顯示圖片，需要對position取餘，否則數組越界 */private OnItemSelectedListener onItemSelectedListener = new OnItemSelectedListener() {@Overridepublic void onItemSelected(AdapterView<?> parent, View view,int position, long id) {int pos = position % IMAGE_COUNT;mImageViewIds[pos].setImageDrawable(getBaseContext().getResources().getDrawable(R.drawable.ic_dot_focused));if (pos > 0) {mImageViewIds[pos - 1].setImageDrawable(getBaseContext().getResources().getDrawable(R.drawable.ic_dot_normal));}if (pos < (IMAGE_COUNT - 1)) {mImageViewIds[pos + 1].setImageDrawable(getBaseContext().getResources().getDrawable(R.drawable.ic_dot_normal));}if (pos == 0) {mImageViewIds[IMAGE_COUNT - 1].setImageDrawable(getBaseContext().getResources().getDrawable(R.drawable.ic_dot_normal));}}@Overridepublic void onNothingSelected(AdapterView<?> arg0) {// TODO Auto-generated method stub}};/** * 點擊事件，點擊圖片進入SecondActivity */private OnItemClickListener onItemClickListener = new OnItemClickListener() {@Overridepublic void onItemClick(AdapterView<?> arg0, View arg1, int pos,long arg3) {Intent intent = new Intent();intent.setClass(MainActivity.this, SecondActivity.class);startActivity(intent);}};}

ImageAdapter類，重寫android.widget.BaseAdapter，用於描述映像資訊。

public class ImageAdapter extends BaseAdapter {private Context context;private int[] mImages = { R.drawable.bg_timeline_01,R.drawable.bg_timeline_02, R.drawable.bg_timeline_03 };private static final int IMAGE_PX_HEIGHT = 198;public ImageAdapter(Context context) {this.context = context;}@Overridepublic int getCount() {return Integer.MAX_VALUE;//實現迴圈顯示}@Overridepublic Object getItem(int position) {return position;}@Overridepublic long getItemId(int position) {return position;}@Overridepublic View getView(int position, View convertView, ViewGroup parent) {ImageView imageView = new ImageView(context);imageView.setImageResource(mImages[position % mImages.length]);imageView.setScaleType(ImageView.ScaleType.CENTER);imageView.setLayoutParams(new Gallery.LayoutParams(Gallery.LayoutParams.FILL_PARENT, IMAGE_PX_HEIGHT));RelativeLayout borderImg = new RelativeLayout(context);borderImg.setPadding(2, 2, 2, 2);borderImg.setBackgroundResource(R.drawable.bg_gallery);//設定ImageView邊框borderImg.addView(imageView);return borderImg;}}

如果用系統背景，可以這樣寫

int mGalleryItemBackground;private Context mContext; public ImageAdapter(Context context){mContext = context;// 獲得Gallery組件的屬性TypedArray typedArray = obtainStyledAttributes(R.styleable.Gallery);mGalleryItemBackground = typedArray.getResourceId(R.styleable.Gallery_android_galleryItemBackground, 0); }

在getview中設定

imageView.setBackgroundResource(mGalleryItemBackground);

Gallery組件屬性資訊定義在res\values\attrs.xml

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

詳細講解見http://www.eoeandroid.com/forum.php?mod=viewthread&tid=182297

自訂邊框參考http://stackoverflow.com/questions/4830173/change-border-style-in-gallery