前言:
我们在做项目时,经常会要求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>