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

這種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=".MianActivity"?/>

</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/transparent"?/>

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

其中定義了一個handler過兩秒后去關閉dialog，重寫了父類的onTouchEvent方法，關閉當前activity

6.ImageLoadingDialog中是自定義對話框，繼承自Dialog,必須實現onCreate方法和至少一個構造函數

View Code

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

?下載：點擊我！！！

?

轉載于:https://www.cnblogs.com/dongweiq/p/3993075.html

總結

以上是生活随笔為你收集整理的android高仿微信UI点击头像显示大图片效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。