1. 程式人生 > >安卓Gallery之自定義圖片邊框

安卓Gallery之自定義圖片邊框

    作為一個初入門級別安卓菜鳥,我從CSDN上也學到了不少的東西,今天想著寫篇文章作為自己的處女秀,力求一篇文章解決一個問題,如標題所說,希望老鳥勿噴。

   

上面是一張效果圖,由於還沒細細研究gif動畫得製作,大家就將就著看了,下面上程式碼,程式碼即文件,鄙人喜歡把程式碼註釋的比較完善,所以就不多解釋了。

首先是MainActivity,自己看程式碼,圖片陣列資源在drawable中引用。

public class MainActivity extends Activity implements OnItemSelectedListener{

	/** 介面上指示當前照片的TextView控制元件 **/
	private TextView tv_index;
	/** 介面上的Galley控制元件 **/
	private Gallery mGallery;
	/**Gallery的介面卡**/
	private MyGalleryAdapter mAdapter ;
	/** 測試用的圖片陣列。該陣列就是圖片資源的引用 **/
	private Integer[] imgs = new Integer[] { R.drawable.pic01,
			R.drawable.pic02, R.drawable.pic03, R.drawable.pic04,
			R.drawable.pic05, };

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		// 載入介面佈局檔案
		setContentView(R.layout.activity_main);
		// 初始化介面控制元件
		initView();

	}

	/** 初始化介面的控制元件 **/
	private void initView() {
		// 獲取介面的控制元件
		tv_index = (TextView) this.findViewById(R.id.txtIndex);
		mGallery = (Gallery) this.findViewById(R.id.galleryShow);

		// 為Gallery新建介面卡,傳入圖片陣列
		mAdapter = new MyGalleryAdapter(this,imgs);
		// 為Gallery配置介面卡
		mGallery.setAdapter(mAdapter);
		// 為mGallery繫結選中監聽器,否則指示器不工作
		mGallery.setOnItemSelectedListener(this);
	}


	@Override
	public void onItemSelected(AdapterView<?> parent, View view, int position,
			long id) {
		// TODO Auto-generated method stub
		// 設定照片指示器,指示當前照片的張數和總數
		tv_index.setText((position+1)+"/"+mAdapter.getCount());
	}

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

}

接著看Gallery的介面卡MyGalleryAdapter
@SuppressWarnings("deprecation")
public class MyGalleryAdapter extends BaseAdapter {

	/** 執行的上下文環境 **/
	private Context context = null;
	/** 要進行展示的相簿的陣列,從外部傳入的引數 **/
	private Integer[] imgs = null;
	/** gallery中的ImageView控制元件 **/
	private ImageView imgView = null;
	/**邊框的寬度**/
	private static final int BOUND_WIDTH = 5 ;

	public MyGalleryAdapter() {
		super();
		// TODO Auto-generated constructor stub
	}

	/**
	 * 自定義Gallery構造引數
	 * 
	 * @param context
	 *            執行的上下文環境
	 * @param imgs
	 *            要展示的相片的陣列
	 */
	public MyGalleryAdapter(Context context, Integer[] imgs) {
		super();
		this.context = context;
		this.imgs = imgs;
	}

	/**
	 * 自定義Gallery構造引數
	 * 
	 * @param context
	 *            執行的上下文環境
	 */
	public MyGalleryAdapter(Context context) {
		super();
		this.context = context;
	}

	@Override
	public int getCount() {
		// TODO Auto-generated method stub
		return imgs.length;
	}

	@Override
	public Object getItem(int position) {
		// TODO Auto-generated method stub
		return position;
	}

	@Override
	public long getItemId(int id) {
		// TODO Auto-generated method stub
		return id;
	}

	// 這個方法很重要
	@Override
	public View getView(int position, View convertView, ViewGroup parent) {
		// TODO Auto-generated method stub
		// 首先這裡的imgView是Gallery中將要顯示的圖片的容器,已經定義成全域性變數
		imgView = new ImageView(context);
		// 設定圖片的來源,外部傳入的圖片陣列
		imgView.setImageResource(imgs[position]);
		// 設定圖片自適應邊界
		imgView.setAdjustViewBounds(true);
		// 由於相框的邊框寬度設定為向內收縮的大小,上下左右四個方向向內收縮的大小
		imgView.setPadding(BOUND_WIDTH, BOUND_WIDTH, BOUND_WIDTH, BOUND_WIDTH);
		// 適應整個螢幕
		imgView.setScaleType(ScaleType.FIT_XY);
		// 設定LayoutParams引數
		imgView.setLayoutParams(new Gallery.LayoutParams(
				LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT));

		// 在該ImageView的外面再包一層佈局,這層佈局用來作為邊框
		LinearLayout linearLay = new LinearLayout(context);
		linearLay.setLayoutParams(new LayoutParams(LayoutParams.MATCH_PARENT,
				LayoutParams.MATCH_PARENT));
		// 設定邊框的背景
		linearLay.setBackgroundResource(R.drawable.main_photo_frame);
		// 將ImageView新增到這個佈局中去,然後返回該佈局
		linearLay.addView(imgView);
		// 返回具有邊框的佈局
		return linearLay;
	}

}
介面卡中最重要的部分是重寫的getView的方法,程式碼中我已經做了詳細的註釋,其餘的部分大家可以自行研究。

然後是MainActivity中的佈局檔案,一個文字框,用來做相簿的指示器,一個Gallery控制元件,測試的時候,越簡單越能研究透徹一個控制元件。

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.cjt.gallerydemo.MainActivity" >

    <!-- 指示當前的照片 -->
    <TextView
        android:id="@+id/txtIndex"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center_horizontal"
        android:textSize="20sp"
        android:textStyle="bold" />

    <!-- 展示照片的Gallery -->
    <Gallery
        android:id="@+id/galleryShow"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:paddingLeft="10dp"
        android:paddingRight="10dp"
        android:spacing="10dp"
        android:layout_alignLeft="@+id/txtIndex"
        android:layout_below="@+id/txtIndex"/>

</RelativeLayout>

最後是getView中
// 設定邊框的背景
		linearLay.setBackgroundResource(R.drawable.main_photo_frame);
這一句中引用xml檔案
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" >

    <corners android:radius="2dp" />

    <!-- 線條的顏色和寬度 -->
    <!-- 這裡邊框的顏色屬性和寬度可以自行設定,寬度設定的時候注意跟MyGalleryAdapter中的 private static final int BOUND_WIDTH = 5 保持一致 -->
    <stroke
        android:width="5dp"
        android:color="#F89" />

    <!-- 填充部分的顏色 -->
    <solid android:color="#0fff" />

    <!-- 收縮 -->
    <padding
        android:bottom="0dp"
        android:left="0dp"
        android:right="0dp"
        android:top="0dp" />

</shape>

好了,到此就大功告成了,想要修改邊框的寬度或者顏色什麼的都可以在這個xml檔案中修改,

原始碼下載