用过微信的朋友朋友都见过微信中点击对方头像显示会加载大图,先贴两张图片说明下:

这种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点击头像显示大图片效果相关推荐

  1. android com.mylhyl,Android 高仿微信朋友圈拍照上传功能

    模仿微信朋友圈发布动态,输入文字支持文字多少高度自增,有一个最小输入框高度,输入文字有限制,不过这些都很easy! 1. photopicker的使用 这是一个支持选择多张图片,点击图片放大,图片之间 ...

  2. android 微信高仿,Android 高仿微信朋友圈拍照上传功能

    模仿微信朋友圈发布动态,输入文字支持文字多少高度自增,有一个最小输入框高度,输入文字有限制,不过这些都很easy! 1. PhotoPicker的使用 这是一个支持选择多张图片,点击图片放大,图片之间 ...

  3. php支付密码控件,Android高仿微信支付密码输入控件实例代码

    这篇文章主要为大家详细介绍了Android高仿微信支付密码输入控件的具体实现代码,供大家参考,具体内容如下 像微信支付密码控件,在app中是一个多么司空见惯的功能.最近,项目需要这个功能,于是乎就实现 ...

  4. android仿微信聊天功能,Android高仿微信聊天界面代码分享

    微信聊天现在非常火,是因其界面漂亮吗,哈哈,也许吧.微信每条消息都带有一个气泡,非常迷人,看起来感觉实现起来非常难,其实并不难.下面小编给大家分享实现代码. 先给大家展示下实现效果图: OK,下面我们 ...

  5. android 微信高仿,Android高仿微信聊天界面代码分享

    微信聊天现在非常火,是因其界面漂亮吗,哈哈,也许吧.微信每条消息都带有一个气泡,非常迷人,看起来感觉实现起来非常难,其实并不难.下面小编给大家分享实现代码. 先给大家展示下实现效果图: OK,下面我们 ...

  6. android高仿微信聊天页面,Android 高仿微信语音聊天页面高斯模糊(毛玻璃效果)

    目前的应用市场上,使用毛玻璃效果的APP随处可见,比如用过微信语音聊天的人可以发现,语音聊天页面就使用了高斯模糊效果. 先看下效果图: 仔细观察上图,我们可以发现,背景图以用户头像为模板,对其进行了高 ...

  7. android仿微信充值布局,Android 高仿微信支付数字键盘功能

    现在很多app的支付.输入密码功能,都已经开始使用自定义数字键盘,不仅更加方便.其效果着实精致. 下面带着大家学习下,如何高仿微信的数字键盘,可以拿来直接用在自身的项目中. 先看下效果图: 1. 自定 ...

  8. android+高仿视频录制,Android高仿微信拍照控件,实战推荐!

    原标题:Android高仿微信拍照控件,实战推荐! 作者:陈嘉桐 转自:ttps://github.com/CJT2325 控件介绍 不知道是不是在微信更新到6.0版本之后,微信将它的拍照和录制视频的 ...

  9. android+高仿视频录制,android高仿微信视频编辑页

    android高仿微信视频编辑页-视频多张图片提取 上一篇中介绍了有关视频提取图片的知识点,如果对这个不太了解 建议看下android提取视频多张图片和视频信息之前这篇. 这里实现的是仿微信的视频编辑 ...

最新文章

  1. linux proc/xx/maps文件分析
  2. iOS 4.2 SDK安装
  3. 投稿数翻倍,接收率不到三成!史上最难的ECCV你中了吗?
  4. ViSP安装与配置VS工程(常见方式-VS2019属性页方法)
  5. coherence安装_在Oracle Coherence中分发Spring Bean
  6. [渝粤教育] 西南科技大学 投资经济学 在线考试复习资料(2)
  7. 【转】一个ASP.NET MVC中ajax调用WebApi返回500 Internal Server Error的调错方法。
  8. Pytorch与tensorflow模型转换
  9. 方程组的直接解法和迭代法 python_基于任务驱动的翻转课堂线上教学 ——以《解二元一次方程组复习课》为例...
  10. 头文件相互包含问题的解决办法
  11. flash跟随鼠标样式
  12. 2021年最新微信漫画小程序全开源商业版免费下载
  13. HTML是什么?HTML简介
  14. 如何根据芯片手册时序图编写驱动程序
  15. 第2章 藏书阁签到,修为突破
  16. 代码写得很牛逼但UI界面却搞得很丑?来,杨工带你!
  17. 教妹学 Java:晦涩难懂的泛型
  18. 判断对错:逻辑结构与数据元素本身的内容和形式无关
  19. 什么是nmap以及如何使用它
  20. Django之开发微信小程序后端-会话管理篇③

热门文章

  1. [Gamma]Scrum Meeting#5
  2. Conclusion
  3. 26. linix脚本启动java程序
  4. 一、Cocos2dx在visualStudio或者vc++中环境搭建(入门篇)
  5. 插入透明32位png格式图片支持ie5.5+、 FF、chrome、safari
  6. Direct2D (25) : 将画笔线条所占用的区域转换为路径 - ID2D1Geometry.Widen()
  7. Windows窗体编程(二)
  8. “我太喜欢你了”——友情的表达方式?
  9. AngularJs学习之ng-repeat-start,ng-repeat-end 指令
  10. 了解HAProxy原理及参数