android高仿微信UI点击头像显示大图片效果
用过微信的朋友朋友都见过微信中点击对方头像显示会加载大图,先贴两张图片说明下:
这种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=".MianActivity" />
</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/transparent" />
</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中的代码:
其中定义了一个handler过两秒后去关闭dialog,重写了父类的onTouchEvent方法,关闭当前activity
6.ImageLoadingDialog中是自定义对话框,继承自Dialog,必须实现onCreate方法和至少一个构造函数
其中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~~~~~~~
下载:点击我!!!
转载于:https://www.cnblogs.com/dongweiq/p/3993075.html
android高仿微信UI点击头像显示大图片效果相关推荐
- android com.mylhyl,Android 高仿微信朋友圈拍照上传功能
模仿微信朋友圈发布动态,输入文字支持文字多少高度自增,有一个最小输入框高度,输入文字有限制,不过这些都很easy! 1. photopicker的使用 这是一个支持选择多张图片,点击图片放大,图片之间 ...
- android 微信高仿,Android 高仿微信朋友圈拍照上传功能
模仿微信朋友圈发布动态,输入文字支持文字多少高度自增,有一个最小输入框高度,输入文字有限制,不过这些都很easy! 1. PhotoPicker的使用 这是一个支持选择多张图片,点击图片放大,图片之间 ...
- php支付密码控件,Android高仿微信支付密码输入控件实例代码
这篇文章主要为大家详细介绍了Android高仿微信支付密码输入控件的具体实现代码,供大家参考,具体内容如下 像微信支付密码控件,在app中是一个多么司空见惯的功能.最近,项目需要这个功能,于是乎就实现 ...
- android仿微信聊天功能,Android高仿微信聊天界面代码分享
微信聊天现在非常火,是因其界面漂亮吗,哈哈,也许吧.微信每条消息都带有一个气泡,非常迷人,看起来感觉实现起来非常难,其实并不难.下面小编给大家分享实现代码. 先给大家展示下实现效果图: OK,下面我们 ...
- android 微信高仿,Android高仿微信聊天界面代码分享
微信聊天现在非常火,是因其界面漂亮吗,哈哈,也许吧.微信每条消息都带有一个气泡,非常迷人,看起来感觉实现起来非常难,其实并不难.下面小编给大家分享实现代码. 先给大家展示下实现效果图: OK,下面我们 ...
- android高仿微信聊天页面,Android 高仿微信语音聊天页面高斯模糊(毛玻璃效果)
目前的应用市场上,使用毛玻璃效果的APP随处可见,比如用过微信语音聊天的人可以发现,语音聊天页面就使用了高斯模糊效果. 先看下效果图: 仔细观察上图,我们可以发现,背景图以用户头像为模板,对其进行了高 ...
- android仿微信充值布局,Android 高仿微信支付数字键盘功能
现在很多app的支付.输入密码功能,都已经开始使用自定义数字键盘,不仅更加方便.其效果着实精致. 下面带着大家学习下,如何高仿微信的数字键盘,可以拿来直接用在自身的项目中. 先看下效果图: 1. 自定 ...
- android+高仿视频录制,Android高仿微信拍照控件,实战推荐!
原标题:Android高仿微信拍照控件,实战推荐! 作者:陈嘉桐 转自:ttps://github.com/CJT2325 控件介绍 不知道是不是在微信更新到6.0版本之后,微信将它的拍照和录制视频的 ...
- android+高仿视频录制,android高仿微信视频编辑页
android高仿微信视频编辑页-视频多张图片提取 上一篇中介绍了有关视频提取图片的知识点,如果对这个不太了解 建议看下android提取视频多张图片和视频信息之前这篇. 这里实现的是仿微信的视频编辑 ...
最新文章
- linux proc/xx/maps文件分析
- iOS 4.2 SDK安装
- 投稿数翻倍,接收率不到三成!史上最难的ECCV你中了吗?
- ViSP安装与配置VS工程(常见方式-VS2019属性页方法)
- coherence安装_在Oracle Coherence中分发Spring Bean
- [渝粤教育] 西南科技大学 投资经济学 在线考试复习资料(2)
- 【转】一个ASP.NET MVC中ajax调用WebApi返回500 Internal Server Error的调错方法。
- Pytorch与tensorflow模型转换
- 方程组的直接解法和迭代法 python_基于任务驱动的翻转课堂线上教学 ——以《解二元一次方程组复习课》为例...
- 头文件相互包含问题的解决办法
- flash跟随鼠标样式
- 2021年最新微信漫画小程序全开源商业版免费下载
- HTML是什么?HTML简介
- 如何根据芯片手册时序图编写驱动程序
- 第2章 藏书阁签到,修为突破
- 代码写得很牛逼但UI界面却搞得很丑?来,杨工带你!
- 教妹学 Java:晦涩难懂的泛型
- 判断对错:逻辑结构与数据元素本身的内容和形式无关
- 什么是nmap以及如何使用它
- Django之开发微信小程序后端-会话管理篇③
热门文章
- [Gamma]Scrum Meeting#5
- Conclusion
- 26.	linix脚本启动java程序
- 一、Cocos2dx在visualStudio或者vc++中环境搭建(入门篇)
- 插入透明32位png格式图片支持ie5.5+、 FF、chrome、safari
- Direct2D (25) : 将画笔线条所占用的区域转换为路径 - ID2D1Geometry.Widen()
- Windows窗体编程(二)
- “我太喜欢你了”——友情的表达方式?
- AngularJs学习之ng-repeat-start,ng-repeat-end 指令
- 了解HAProxy原理及参数