android高仿微信UI點擊頭像顯示大圖片效果

本文轉載自查看原文 2012-09-27 12:50 35560 android

用過微信的朋友朋友都見過微信中點擊對方頭像顯示會加載大圖，先貼兩張圖片說明下：

這種UI效果對用戶的體驗不錯，今天突然有了靈感，試着去實現，結果就出來了。。

下面說說我的思路：

1.點擊圖片時跳轉到另一個activity，然后顯示加載的效果，即progressbar

2.顯示圖片的之前先彈出自定義dialog，然后模擬加載一段時間后，顯示整張大圖片，要全屏顯示，並且有類似微信中左上角滑出的動畫效果

下面說說我的實現過程：

1.新建一個布局文件main.xml，其中只是放一個圖片，布局

其中的android:onClick="show_click"是聲名一個點擊方法，然后再代碼中實現，類似c#中

< 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: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

<? xml version="1.0" encoding="utf-8" ?>
< 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，其中只是放了一張圖片，設置整體背景為黑色

<? xml version="1.0" encoding="utf-8" ?>
< 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中的代碼：

View Code

package com.example.imageshowerdemo;

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方法和至少一個構造函數

View Code

package com.example.imageshowerdemo;

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/

< style name ="ImageloadingDialogStyle" parent ="android:Theme.Dialog" >
         < 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 >
         < 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的樣式

< style name ="ImageScale" parent ="android:Theme.Black.NoTitleBar" >
         < 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 >
         
         < item name ="android:windowIsTranslucent" >true </ item >
         
         < item name ="android:windowBackground" >@android:color/black </ item >
         < item name ="android:backgroundDimEnabled" >false </ item >
         
     </ style >

其中的AnimHead也是樣式

< style name ="AnimHead" parent ="@android:style/Animation" >
         < 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:

<? xml version="1.0" encoding="utf-8" ?>

   < 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:

<? xml version="1.0" encoding="utf-8" ?>

   < 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~~~~~~~

下載：點擊我！！！

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 Android高仿微信圖片選擇功能的PhotoPicker 微信公眾號圖文點擊顯示圖片效果 PHP 圖片合成、仿微信群頭像 Android -- 真正的高仿微信打開網頁的進度條效果 android 在 ListView 的 item 中插入 GridView 仿微信朋友圈圖片顯示。 Android 微信UI 、點擊操作 Android控件-Fragment+ViewPager(高仿微信界面) Android 高仿微信支付密碼輸入控件 Android仿微信SlideView聊天列表滑動刪除效果 Android UI-仿微信底部導航欄布局