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


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

這種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 ><!--是否浮在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的樣式

  < 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 >
         <!--  是否浮現在activity之上  -->
         < 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刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM