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

 下载:点击我!!!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/42935.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Android高仿微信头像裁剪

最近公司的APP很多用户反应无法上传头像&#xff0c;于是打算修改原来头像裁剪的代码。参考微信、QQ、唱吧头像裁剪的操作&#xff0c;决定就仿微信头像裁剪来上传用户头像&#xff0c;在Android大神鸿洋的一篇高仿微信头像的博客(博客地址结尾会贴出来)的基础上加了一些代码&a…

Android仿微信群聊头像合成

最近碰见仿照微信头像的需求&#xff0c;提供多个url的组合头像&#xff0c;做成微信群聊一样的头像&#xff0c;网上查了下&#xff0c;有两类&#xff0c;一种是合成的&#xff0c;一种是多个view合并展示的&#xff0c;合成的做的感觉很简陋&#xff0c;不太满足需求&#x…

android 仿微信群聊头像 合成图片

android 仿微信群聊头像 合成图片&#xff0c;微信中可以显示出群头像为多个用户的头像网格&#xff0c;这里讲方法已经封装好&#xff0c; 如果有记得点赞哦&#xff01;&#xff01; 先看效果&#xff1a; 使用例子&#xff1a; Override public void onClick(View v) {P…

Android 仿QQ讨论组头像

一、效果图 二、实现 基本实现过程&#xff1a; 1.将原图片读取为bitmap 2.在Canvas画布上计算出图片位置&#xff0c;并绘制新的图片。 &#xff08;ps:计算位置对我来说是难点&#xff0c;花了好长时间&#xff09;&#xff1b; 三、源码 1.布局文件 <?xml version…

仿照微信或qq头像双击摇晃效果

1.资源文件anim下加入 cycles_anim.xml (插值器可以设置不同的插值器) <?xml version"1.0" encoding"utf-8"?> <cycleInterpolator xmlns:android"http://schemas.android.com/apk/res/android"android:cycles"2" />an…

Android之头像图片变圆形

一&#xff1a;效果图、 二&#xff1a;实现步骤、 1.自定义一个转换工具类、 package com.common.base.util;import android.content.Context; import android.content.res.TypedArray; import android.graphics.Bitmap; import android.graphics.BitmapShader; import an…

Android 高仿微信群聊头像

最近小编搞了一个仿微信群聊头像的一个功能&#xff0c;分享给大家...工作中需要实现仿钉钉群头像的一个功能&#xff0c;就是个人的头像拼到一起显示&#xff0c;看了一下市场上的APP好像微信的群聊头像是组合的&#xff0c;QQ的头像不是&#xff0c;别的好像也没有了。今天给…

QQ头像无法加载,显示初始默认头像的解决方法

前言 终于。。终于&#xff01;查过那么多资料&#xff0c;翻过无数带有蛛丝马迹的信息&#xff0c;根本没有人能解决我遇到的这个问题&#xff0c;它是如此独特&#xff0c;如此难以排查&#xff01;&#xff01; 删过文件、改过网络配置、本地测试过相关数据接口、重装过QQ、…

软考-数据库系统工程师

软考之数据库系统工程师 前言 怎么会突然想起来考这个呢&#xff1f;说实话很惭愧&#xff0c;大学四年&#xff0c;毕业两年多都不知道有这个证书&#xff0c;也是今天看朋友圈看到一个学妹晒出了自己的这个证书&#xff0c;也是软考但是不是数据库系统工程师&#xff0c;她…

数据库(SQL Sever)水平证书复习题

全国信息技术水平考试数据库应用系统设计技术水平证书&#xff08;SQL Server&#xff09;复习题 第一大题&#xff1a;单选题 数据库系统是数据库、硬件、软件和&#xff08; &#xff09;的集合体。 (A) DBMS (B) DBS © DB (D) DBA下列选项中&#xff0c;不属于数据模…

软考中级——数据库系统工程师

第十一章—事务管理 自己关于备考软考中级&#xff08;数据库系统工程师&#xff09;的一些知识点的补充文章目录 第十一章—事务管理1 事务的基本概念1.1事务定义语句1.2 事务的特性&#xff08;ACID&#xff09; 2 数据库的并发控制2.1事务调度2.2并发操作带来的问题2.3两段…

全国OSTA计算机高新技术SQLSever数据库四级证书--考证复习知识点集合(附下载地址)

全国OSTA计算机高新技术SQLSever四级证书 说明&#xff1a;没找到一样的图、但长就是长这样的。分享给即将考证的朋友们&#xff01;适合临场考试复习整理思路理顺&#xff01;有其他点问题欢迎提出&#xff01;谢谢&#xff01;祝逢考必过&#xff01;&#xff08;文末有文档下…

MSSQL SERVER DBA 2门证书考试

微软Microsoft 70-764 - Administering a SQL Database Infrastructure 和 70-765 - Provisioning SQL Databases考试心得 由于公司不涨工资&#xff0c;所以只能硬着头皮考个DBA证书增添个人色彩了。 微软的DBA需要2个考试&#xff0c;70-764和70-765. 由于疫情&#xff0c;所…

aspnet+sqlserver英语等级考试报名系统

考试报名数据处理系统的开发目的是使考试报名数据处理模式从手工记录转变成信息管理&#xff0c;为考试报名数据处理人员提供方便条件。对考试报名的实际情况进行调研之后&#xff0c;进行详细的需求分析&#xff0c;目 录 摘 要 I Abstract II 1 引言 1 1.1 项…

华为鸿蒙HarmonyOS 4定档8月;ChatGPT之父的加密货币正式上线;微软必应聊天将推出重新生成答案功能|极客头条

「极客头条」—— 技术人员的新闻圈&#xff01; CSDN 的读者朋友们早上好哇&#xff0c;「极客头条」来啦&#xff0c;快来看今天都有哪些值得我们技术人关注的重要新闻吧。 整理 | 梦依丹 出品 | CSDN&#xff08;ID&#xff1a;CSDNnews&#xff09; 一分钟速览新闻点&…

注册Gmail邮箱

注册Gmail邮箱 文章目录 注册Gmail邮箱1. 安装谷歌浏览器2. 注册Gmail邮箱2.1 创建新账号2.2 填写信息2.3 设置邮箱地址2.4 不用填号码直接跳过&#xff01;2.5 同意隐私条款2.6 返回登录2.7 访问油管验证成功 1. 安装谷歌浏览器 vivo自带的应用商店 2. 注册Gmail邮箱 2.1 …

Email,电子邮箱免费注册流程

工欲善其事&#xff0c;必先利其器。要做好工作&#xff0c;先要有锋利的工具。日常办公也是一样&#xff0c;申请一个好用的电子邮箱很重要&#xff0c;同事客户之间发送个文件都可以通过电子邮箱进行&#xff0c;并且现在很多平台注册帐号都需要填写email&#xff0c;比如百度…

Petya勒索病毒

Petya勒索病毒 1、原理说明 2017年6月27日晚&#xff0c;印度、俄罗斯、西班牙以及欧洲多国遭受大规模Petya勒索病毒袭击&#xff0c;该病毒远程锁定设备&#xff0c;并索要赎金。其中乌克兰地区受灾害最为严重&#xff0c;政府、银行、电力系统、通讯系统、企业等都受到不同…

OilRig APT 组织或在中东地区发动更多 IT 供应链攻击

聚焦源代码安全&#xff0c;网罗国内外最新资讯&#xff01; 编译&#xff1a;代码卫士 专栏供应链安全 数字化时代&#xff0c;软件无处不在。软件如同社会中的“虚拟人”&#xff0c;已经成为支撑社会正常运转的最基本元素之一&#xff0c;软件的安全性问题也正在成为当今社会…