用過微信的朋友朋友都見過微信中點擊對方頭像顯示會加載大圖,先貼兩張圖片說明下:
這種UI效果對用戶的體驗不錯,今天突然有了靈感,試着去實現,結果就出來了。。
下面說說我的思路:
1.點擊圖片時跳轉到另一個activity,然后顯示加載的效果,即progressbar
2.顯示圖片的之前先彈出自定義dialog,然后模擬加載一段時間后,顯示整張大圖片,要全屏顯示,並且有類似微信中左上角滑出的動畫效果
下面說說我的實現過程:
1.新建一個布局文件main.xml,其中只是放一個圖片,布局
其中的android:onClick="show_click"是聲名一個點擊方法,然后再代碼中實現,類似c#中
xmlns:tools ="http://schemas.android.com/tools"
android:layout_width ="match_parent"
android:layout_height ="match_parent"
android:padding ="10dp"
>
< ImageView
android:layout_width ="wrap_content"
android:layout_height ="wrap_content"
android:layout_alignParentLeft ="true"
android:src ="@drawable/xiaohei"
android:onClick ="show_click"
tools:context =".MianActivit y" />
</ RelativeLayout >
2.新建加載效果的布局文件dialog_imageloading.xml,設置整體布局為linearlayout,並且設置居中熟悉gravity和背景為透明,然后放一個progressbar
< LinearLayout xmlns:android ="http://schemas.android.com/apk/res/android"
android:layout_width ="fill_parent"
android:layout_height ="fill_parent"
android:background ="@android:color/transparent"
android:gravity ="center"
android:orientation ="vertical" >
< ProgressBar
android:id ="@+id/progressBar1"
style ="?android:attr/progressBarStyleLarge"
android:layout_width ="wrap_content"
android:layout_height ="wrap_content"
android:layout_gravity ="center"
android:background ="@android:color/transpar ent" />
</ LinearLayout >
3.然后新建一個顯示大圖片的布局imageshower.xml,其中只是放了一張圖片,設置整體背景為黑色
< LinearLayout xmlns:android ="http://schemas.android.com/apk/res/android"
android:layout_width ="fill_parent"
android:layout_height ="fill_parent"
android:background ="#000"
android:gravity ="center" >
< ImageView
android:layout_width ="fill_parent"
android:layout_height ="wrap_content"
android:src ="@drawable/xiaohei_big" />
</ LinearLayout >
4.MainActivity中的代碼只是實現了show_click方法
public void show_click(View v){
startActivity(new Intent(this,ImageShower.class));
}
5.ImageShower中的代碼:

import android.app.Activity;
import android.os.Bundle;
import android.os.Handler;
import android.view.MotionEvent;
/**
* @package:com.example.imageshowerdemo
* @author :Allen
* @email:jaylong1302@163.com
* @data:2012-9-27 上午10:58:13
* @description:The class is for...
*/
public class ImageShower extends Activity {
@Override
protected void onCreate(Bundle savedInstanceState) {
// TODO Auto-generated method stub
super.onCreate(savedInstanceState);
setContentView(R.layout.imageshower);
final ImageLoadingDialog dialog = new ImageLoadingDialog( this);
dialog.show();
// 兩秒后關閉后dialog
new Handler().postDelayed( new Runnable() {
@Override
public void run() {
dialog.dismiss();
}
}, 1000 * 2);
}
@Override
public boolean onTouchEvent(MotionEvent event) {
// TODO Auto-generated method stub
finish();
return true;
}
}
其中定義了一個handler過兩秒后去關閉dialog,重寫了父類的onTouchEvent方法,關閉當前activity
6.ImageLoadingDialog中是自定義對話框,繼承自Dialog,必須實現onCreate方法和至少一個構造函數

import android.app.Dialog;
import android.content.Context;
import android.os.Bundle;
/**
* @package:com.huaheng.client.activity.view
* @author :Allen
* @email:jaylong1302@163.com
* @data:2012-9-27 上午8:59:40
* @description:The class is for...
*/
public class ImageLoadingDialog extends Dialog {
public ImageLoadingDialog(Context context) {
super(context, R.style.ImageloadingDialogStyle);
// setOwnerActivity((Activity) context); // 設置dialog全屏顯示
}
private ImageLoadingDialog(Context context, int theme) {
super(context, theme);
}
@Override
protected void onCreate(Bundle savedInstanceState) {
// TODO Auto-generated method stub
super.onCreate(savedInstanceState);
setContentView(R.layout.dialog_imageloading);
}
}
其中ImageloadingDialogStyle為樣式文件,統一寫在res/values/styles/
< item name ="android:windowBackground" >@android:color/transparent </ item >
< item name ="android:windowFrame" >@null </ item ><!--無邊框-->
< item name ="android:windowNoTitle" >true </ item ><!--沒有標題-->
< item name ="android:windowIsFloating" >true </ item ><!--是否浮在activity之上-->
< item name ="android:windowIsTranslucent" >true </ item ><!--背景是否半透明-->
< item name ="android:windowContentOverlay" >@null </ item > <!-- 對話框是否有遮蓋 -->
< item name ="android:windowAnimationStyle" >@android:style/Animation.Dialog </ item ><!--動畫樣式-->
< item name ="android:backgroundDimEnabled" >true </ item ><!--背景是否模糊-->
</ style >
7.最后是ImageShower的樣式
< item name ="android:windowAnimationStyle" >@style/AnimHead </ item >
< item name ="android:windowNoTitle" >true </ item >
<!-- 無標題 -->
< item name ="android:windowFullscreen" >true </ item >
<!-- 設置全屏顯示 -->
< item name ="android:windowFrame" >@null </ item >
<!-- 邊框 -->
< item name ="android:windowIsFloating" >false </ item >
<!-- 是否浮現在activity之上 -->
< item name ="android:windowIsTranslucent" >true </ item >
<!-- 半透明 -->
< item name ="android:windowBackground" >@android:color/black </ item >
< item name ="android:backgroundDimEnabled" >false </ item >
<!-- 模糊 -->
</ style >
其中的AnimHead也是樣式
< item name ="android:windowEnterAnimation" >@anim/head_in </ item >
< item name ="android:windowExitAnimation" >@anim/head_out </ item >
</ style >
head_in和head_out是定義在res/anim中
head_in:
<!-- 左上角擴大 -->
< scale xmlns:android ="http://schemas.android.com/apk/res/android"
android:interpolator ="@android:anim/accelerate_decelerate_interpolator"
android:fromXScale ="0.001"
android:toXScale ="1.0"
android:fromYScale ="0.001"
android:toYScale ="1.0"
android:pivotX ="15%"
android:pivotY ="25%"
android:duration ="200" />
head_out:
<!-- 左上角縮小 -->
< scale xmlns:android ="http://schemas.android.com/apk/res/android"
android:interpolator ="@android:anim/accelerate_decelerate_interpolator"
android:fromXScale ="1.0"
android:toXScale ="0.001"
android:fromYScale ="1.0"
android:toYScale ="0.001"
android:pivotX ="15%"
android:pivotY ="25%"
android:duration ="200" />
所有的實現代碼實現都完了。。還需要代碼工程的可以email me~~~~~~~
下載:點擊我!!!