Android UI控制元件系列：Gallery（畫廊檢視）

apkbus發表於2014-12-01
AndroidUI控制元件

Gallery能夠水平顯示其內容，一般用來瀏覽圖片，被選中的選項位於中間，並且可以相應事件顯示資訊。下面結合ImageSwitcher元件來實現一個通過縮圖來瀏覽圖片的程式，具體步驟如下

第一步：

建立一個Andorid工程”GalleryTest”，該工程的入口是Activity類GalleryTest繼承Activity並實現OnItemSelectedListener和ViewFactory介面，來實現圖片和檢視的建立

package org.hualang.Gallery;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemSelectedListener;
import android.widget.ViewSwitcher.ViewFactory;
//繼承Activity，實現onItemSelectedListener和ViewFactory介面
public class GalleryTest extends Activity implements OnItemSelectedListener,ViewFactory{
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
    }

        @Override
        public View makeView() {
                // TODO Auto-generated method stub
                return null;
        }

        @Override
        public void onItemSelected(AdapterView<?> arg0, View arg1, int arg2,
                        long arg3) {
                // TODO Auto-generated method stub

        }

        @Override
        public void onNothingSelected(AdapterView<?> arg0) {
                // TODO Auto-generated method stub

        }
}

第二步：

在工程的res\drawable\目錄下新增7張圖片和對應的縮圖

第三步：

在工程res\layout\目錄下建立一個佈局檔案main.xml，在其中那個新增一個Gallery元件和一個ImageSwitcher元件，並設定相應的屬性

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
<ImageSwitcher android:id="@+id/switcher"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
    />

    <Gallery android:id="@+id/gallery"
        android:background="#55000000"
        android:layout_width="fill_parent"
        android:layout_height="60dp"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        android:gravity="center_vertical"
        android:spacing="16dp"
    />
</LinearLayout>

第四步：在GalleryTest頂部宣告使用到的ImageSwitcher例項圖片資源Integer陣列

public class GalleryTest extends Activity implements OnItemSelectedListener,ViewFactory{
    /** Called when the activity is first created. */
        //宣告ImageSwitcher
        private ImageSwitcher switcher;
        //縮圖片id陣列
        private Integer[] thumbids={
                        R.drawable.thumb0,
                        R.drawable.thumb1,
                        R.drawable.thumb2,
                        R.drawable.thumb3,
                        R.drawable.thumb4,
                        R.drawable.thumb5,
                        R.drawable.thumb6,
                        R.drawable.thumb7
        };
        //圖片id陣列
        private Integer[] imgids={
                        R.drawable.img0,
                        R.drawable.img1,
                        R.drawable.img2,
                        R.drawable.img3,
                        R.drawable.img4,
                        R.drawable.img5,
                        R.drawable.img6,
                        R.drawable.img7
        };

第五步：

在GalleryTest的onCreate()方法中，將視窗樣式設定為無標題，設定當前佈局檢視，獲得ImageSwitcher例項，並設定漸進漸出動畫，獲得Gallery例項

public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        //設定視窗特徵無標題
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.main);
        //通過findViewById方法獲得ImageSwitcher物件
        switcher=(ImageSwitcher)findViewById(R.id.switcher);
        //為ImageSwitcher設定工廠
        switcher.setFactory(this);
        //設定動畫漸入效果
        switcher.setInAnimation(AnimationUtils.loadAnimation(this, android.R.anim.fade_in));
        //設定動畫漸出效果
        switcher.setOutAnimation(AnimationUtils.loadAnimation(this, android.R.anim.fade_out));
        //通過findViewById方法獲得Gallery物件
        Gallery g=(Gallery)findViewById(R.id.gallery);
    }

第六步：

建立內部類ImageAdapter，該類繼承BaseAdapter，為Gallery設定Adapter例項

public class ImageAdapter extends BaseAdapter {
            //構造方法
                public ImageAdapter(Context c) {
                        mContext = c;
                }
                //獲得數量
                public int getCount() {
                        return thumbids.length;
                }
                //獲得當前選項
                public Object getItem(int position) {
                        return position;
                }
                //獲得當前選項ID
                public long getItemId(int position) {
                        return position;
                }
                //獲得View物件
                public View getView(int position, View convertView, ViewGroup parent) {
                        //例項化ImageView物件
                        ImageView i = new ImageView(mContext);
                        //設定縮圖片資源
                        i.setImageResource(thumbids[position]);
                        //設定邊界對齊
                        i.setAdjustViewBounds(true);
                        //設定佈局引數
                        i.setLayoutParams(new Gallery.LayoutParams(
                                        LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));
                        //設定背景資源
                        i.setBackgroundResource(R.drawable.picturefrom);
                        return i;
                }
                private Context mContext;
        }

第七步：

實現onItemSelected()方法，更換圖片

@Override
        public void onItemSelected(AdapterView<?> adapter, View v, int position,
                        long id) {
                switcher.setImageResource(imgids[position]);
        }

第八步：

實現makeView()方法，為ImageView設定佈局格式

@Override
        public View makeView() {
                // TODO Auto-generated method stub
                //建立ImageView
                ImageView i=new ImageView(this);
                //設定背景顏色
                i.setBackgroundColor(0xFF000000);
                //設定精度型別
                i.setScaleType(ImageView.ScaleType.FIT_CENTER);
                //設定佈局引數
                i.setLayoutParams(new ImageSwitcher.LayoutParams(
                                LayoutParams.FILL_PARENT,LayoutParams.FILL_PARENT));
                return i;
        }

第九步：

為Gallery新增Adapter並新增OnItemSelectedListener監聽器

g.setAdapter(new ImageAdapter(this));
                g.setOnItemSelectedListener(this);

至此，全部，結束，執行結果如下

完整原始碼：

package org.hualang.Gallery;

import android.app.Activity;
import android.content.Context;
import android.os.Bundle;
import android.view.View;
import android.view.ViewGroup;
import android.view.Window;
import android.view.animation.AnimationUtils;
import android.widget.AdapterView;
import android.widget.BaseAdapter;
import android.widget.Gallery;
import android.widget.ImageSwitcher;
import android.widget.ImageView;
import android.widget.AdapterView.OnItemSelectedListener;
import android.widget.Gallery.LayoutParams;
import android.widget.ViewSwitcher.ViewFactory;

public class GalleryTest extends Activity implements OnItemSelectedListener,
                ViewFactory {

        private ImageSwitcher mSwitcher;

        private Integer[] mThumbIds = { R.drawable.thumb0,
                        R.drawable.thumb1, R.drawable.thumb2,
                        R.drawable.thumb3, R.drawable.thumb4,
                        R.drawable.thumb5, R.drawable.thumb6,
                        R.drawable.thumb7 };

        private Integer[] mImageIds = { R.drawable.img0, R.drawable.img1,
                        R.drawable.img2, R.drawable.img3, R.drawable.img4,
                        R.drawable.img5, R.drawable.img6, R.drawable.img7 };

        @Override
        public void onCreate(Bundle savedInstanceState) {
                super.onCreate(savedInstanceState);

                requestWindowFeature(Window.FEATURE_NO_TITLE);
                setContentView(R.layout.main);
                mSwitcher = (ImageSwitcher) findViewById(R.id.switcher);
                mSwitcher.setFactory(this);
                mSwitcher.setInAnimation(AnimationUtils.loadAnimation(this,
                                android.R.anim.fade_in));
                mSwitcher.setOutAnimation(AnimationUtils.loadAnimation(this,
                                android.R.anim.fade_out));

                Gallery g = (Gallery) findViewById(R.id.gallery);

                g.setAdapter(new ImageAdapter(this));
                g.setOnItemSelectedListener(this);

        }

        public class ImageAdapter extends BaseAdapter {
                public ImageAdapter(Context c) {
                        mContext = c;
                }
                public int getCount() {
                        return mThumbIds.length;
                }
                public Object getItem(int position) {
                        return position;
                }
                public long getItemId(int position) {
                        return position;
                }
                public View getView(int position, View convertView, ViewGroup parent) {
                        ImageView i = new ImageView(mContext);

                        i.setImageResource(mThumbIds[position]);
                        i.setAdjustViewBounds(true);
                        i.setLayoutParams(new Gallery.LayoutParams(
                                        LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));
                        i.setBackgroundResource(R.drawable.picturefrom);
                        return i;
                }
                private Context mContext;
        }

        @Override
        public void onItemSelected(AdapterView<?> adapter, View v, int position,
                        long id) {
                mSwitcher.setImageResource(mImageIds[position]);
        }

        @Override
        public void onNothingSelected(AdapterView<?> arg0) {

        }

        @Override
        public View makeView() {
                ImageView i = new ImageView(this);
                i.setBackgroundColor(0xFF000000);
                i.setScaleType(ImageView.ScaleType.FIT_CENTER);
                i.setLayoutParams(new ImageSwitcher.LayoutParams(
                                LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT));
                return i;
        }
}
<?xml version="1.0" encoding="utf-8"?>
 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_width="fill_parent"
 android:layout_height="fill_parent">
<ImageSwitcher android:id="@+id/switcher"
 android:layout_width="fill_parent"
 android:layout_height="fill_parent"
 android:layout_alignParentTop="true"
 android:layout_alignParentLeft="true"
 />
<Gallery android:id="@+id/gallery"
 android:background="#55000000"
 android:layout_width="fill_parent"
 android:layout_height="60dp"
 android:layout_alignParentBottom="true"
 android:layout_alignParentLeft="true"
 android:gravity="center_vertical"
 android:spacing="16dp"
 />
</RelativeLayout>

相關文章