安卓雜記（六）仿“迷你飛信”更改用戶頭像

前言：

我們在做項目時，經常會要求App有更改用戶頭像的功能。那麼怎麼才能做到這一點呢？下面，我就仿照迷你飛信，來帶領大家設計這一功能。

步驟：

1.自定義主佈局；

2.自定義AlterDialog

3.在主程序中設置Listener

4.調用相冊或camera

最終效果：

1.主佈局：

2.彈出自定義的AlterDialog

代碼示例：

1.main.xml

<span style="font-size:18px;"><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="#f2f2f2"
    android:orientation="vertical" >

    <!-- title -->

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="40dp"
        android:layout_gravity="center"
        android:background="#82b4ff"
        android:gravity="center"
        android:orientation="horizontal" >

        <TextView
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="@string/title_bar_txt"
            android:textColor="@android:color/white" />

    </LinearLayout>

    <!-- image switch -->
    
    <TextView
        android:layout_width="fill_parent"
        android:background="#9fb2ff"
        android:layout_height="3dp" />

    <RelativeLayout
        android:id="@+id/switch_face_rl"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:background="#ffffff"
        android:padding="5dip" >

        <ImageView
            android:id="@+id/face"
            android:background="@drawable/head"
            android:layout_width="42dip"
            android:layout_height="42dip"
            android:layout_alignParentLeft="true"
            android:layout_marginLeft="10dip"/>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_marginLeft="10dip"
            android:layout_marginTop="10dip"
            android:layout_toRightOf="@id/face"
            android:text="User Name"
            android:textColor="@android:color/black" />
        
    </RelativeLayout>
    
    <RelativeLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="5dp"
        android:background="#ffffff"
        android:padding="5dip" >

        <ImageView 
            android:id="@+id/anchor"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/anchor"
            android:layout_margin="5dp"/>
        
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_toRightOf="@+id/anchor"
            android:layout_marginLeft="10dip"
            android:layout_marginTop="10dip"
            android:text="最近聯繫人(10)"
            android:textColor="@android:color/black" />
        
    </RelativeLayout>

</LinearLayout></span>

2.layout_chage_face.xml（自定義AlterDialog）

<span style="font-size:18px;"><?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">

    <LinearLayout
        android:layout_width="250dp"
        android:layout_height="wrap_content"
		android:layout_centerInParent="true"
        android:orientation="vertical" >

        <RelativeLayout
            android:layout_width="fill_parent"
            android:layout_height="60dp"
            android:background="#ffffff" >

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_margin="10dp"
                android:text="設置頭像  "
                android:textColor="#82b4ff"
                android:textSize="25sp" />
        </RelativeLayout>

        <TextView
            android:layout_width="fill_parent"
            android:layout_height="3dp"
            android:background="#83b4ff" />

        <Button
            android:id="@+id/select_from_photos"
            android:layout_width="fill_parent"
            android:layout_height="45dp"
            android:background="#ffffff"
            android:gravity="center_vertical"
            android:text="	圖片"
            android:textColor="@android:color/black"
            android:textSize="20sp" />

        <TextView
            android:layout_width="fill_parent"
            android:layout_height="2dp"
            android:background="#f2f2f2" />

        <Button
            android:id="@+id/select_take_photos"
            android:layout_width="fill_parent"
            android:layout_height="45dp"
            android:background="#ffffff"
            android:gravity="center_vertical"
            android:text="	拍照"
            android:textColor="@android:color/black"
            android:textSize="20sp" />
    </LinearLayout>
   
</RelativeLayout>
</span>

3.MainActivity.java

<span style="font-size:18px;">package com.minifeixin.picture;

import java.io.File;

import com.minifeixin.utils.Tools;
import com.minifeixin.picture.R;

import android.app.Activity;
import android.app.AlertDialog;
import android.content.Intent;
import android.graphics.Bitmap;
import android.graphics.drawable.BitmapDrawable;
import android.graphics.drawable.Drawable;
import android.net.Uri;
import android.os.Bundle;
import android.os.Environment;
import android.provider.MediaStore;
import android.view.View;
import android.view.Window;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.Toast;

public class MainActivity extends Activity {
	/* 組件 */
	private ImageView faceImage;
	private AlertDialog myDialog;
	private Button selectPhotos;
	private Button takePhotos;
	
	/* 頭像名稱 */
	private static final String IMAGE_FILE_NAME = "faceImage.jpg";

	/* 請求碼 */
	private static final int IMAGE_REQUEST_CODE = 0;
	private static final int CAMERA_REQUEST_CODE = 1;
	private static final int RESULT_REQUEST_CODE = 2;

	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		requestWindowFeature(Window.FEATURE_NO_TITLE); // 去掉標題
		setContentView(R.layout.main);
		faceImage = (ImageView) findViewById(R.id.face);
		// 設置事件監聽
		faceImage.setOnClickListener(listener);
	}

	private View.OnClickListener listener = new View.OnClickListener() {

		@Override
		public void onClick(View v) {
			showDialog();
		}
	};

	/**
	 * 顯示選擇對話框
	 */
	private void showDialog() {  
		
		myDialog = new AlertDialog.Builder(MainActivity.this).create();  
		myDialog.show();  
		Window window = myDialog.getWindow();
		window.setContentView(R.layout.layout_chage_face);
		
		selectPhotos = (Button) window.findViewById(R.id.select_from_photos);	
		selectPhotos.setOnClickListener(new View.OnClickListener() {	
			
			public void onClick(View arg0) {
				
				Intent intentFromGallery = new Intent();
				intentFromGallery.setType("image/*"); // 設置文件類型
				intentFromGallery
						.setAction(Intent.ACTION_GET_CONTENT);
				startActivityForResult(intentFromGallery,
						IMAGE_REQUEST_CODE);
			}
		});
		
		takePhotos = (Button) window.findViewById(R.id.select_take_photos);
		takePhotos.setOnClickListener(new View.OnClickListener() {
			
			public void onClick(View arg0) {

				Intent intentFromCapture = new Intent(
						MediaStore.ACTION_IMAGE_CAPTURE);
				// 判斷存儲卡是否可以用，可用進行存儲
				if (Tools.hasSdcard()) {

					intentFromCapture.putExtra(
							MediaStore.EXTRA_OUTPUT,
							Uri.fromFile(new File(Environment
									.getExternalStorageDirectory(),
									IMAGE_FILE_NAME)));
				}

				startActivityForResult(intentFromCapture,
						CAMERA_REQUEST_CODE);
				
			}
		});

	}

	@Override
	protected void onActivityResult(int requestCode, int resultCode, Intent data) {
		//結果碼不等於取消時候
		if (resultCode != RESULT_CANCELED) {

			switch (requestCode) {
			case IMAGE_REQUEST_CODE:
				startPhotoZoom(data.getData());
				break;
			case CAMERA_REQUEST_CODE:
				if (Tools.hasSdcard()) {
					File tempFile = new File(
							Environment.getExternalStorageDirectory()
									+ IMAGE_FILE_NAME);
					startPhotoZoom(Uri.fromFile(tempFile));
				} else {
					Toast.makeText(MainActivity.this, "未找到存儲卡，無法存儲照片！",
							Toast.LENGTH_LONG).show();
				}

				break;
			case RESULT_REQUEST_CODE:
				if (data != null) {
					getImageToView(data);
				}
				break;
			}
		}
		super.onActivityResult(requestCode, resultCode, data);
	}

	/**
	 * 裁剪圖片方法實現
	 * 
	 * @param uri
	 */
	public void startPhotoZoom(Uri uri) {

		Intent intent = new Intent("com.android.camera.action.CROP");
		intent.setDataAndType(uri, "image/*");
		// 設置裁剪
		intent.putExtra("crop", "true");
		// aspectX aspectY 是寬高的比例
		intent.putExtra("aspectX", 1);
		intent.putExtra("aspectY", 1);
		// outputX outputY 是裁剪圖片寬高
		intent.putExtra("outputX", 320);
		intent.putExtra("outputY", 320);
		intent.putExtra("return-data", true);
		startActivityForResult(intent, 2);
	}

	/**
	 * 保存裁剪之後的圖片數據
	 * 
	 * @param picdata
	 */
	private void getImageToView(Intent data) {
		Bundle extras = data.getExtras();
		if (extras != null) {
			Bitmap photo = extras.getParcelable("data");
			Drawable drawable = new BitmapDrawable(photo);
			faceImage.setImageDrawable(drawable);
		}
	}

}
</span>

4.這裏我還定義了一個工具類：Tools.java

<span style="font-size:18px;">package com.minifeixin.utils;

import android.os.Environment;

public class Tools {
	/**
	 * 檢查是否存在SDCard
	 * @return
	 */
	public static boolean hasSdcard(){
		String state = Environment.getExternalStorageState();
		if(state.equals(Environment.MEDIA_MOUNTED)){
			return true;
		}else{
			return false;
		}
	}
}
</span>