仿微信头像放大图

2024-02-29 06:40
文章标签 放大 头像 仿微信

本文主要是介绍仿微信头像放大图，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

原文移步至：http://www.cnblogs.com/Jaylong/archive/2012/09/27/androidUI.html?spm=5176.100239.blogcont13507.3.FALAVf



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

这种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中的代码：

复制代码
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方法和至少一个构造函数

复制代码
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"   />  
   

这篇关于仿微信头像放大图的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/757896。

相关文章

Matlab中BaseZoom()函数实现曲线和图片的局部放大

Matlab中BaseZoom()函数实现曲线和图片的局部放大

BaseZoom工具下载链接： 链接：https://pan.baidu.com/s/1yItVSinh6vU4ImlbZW6Deg?pwd=9dyl 提取码：9dyl 下载完之后将工具包放置合适的路径下，并在matlab中“设置路径”中添加相应的路径； 注：可以先运行如下图片中的语句，看看是否报错；如果报如下错误，说明matlab未安装“Image Processing Toolbox”工
阅读更多...
Vue3实现点击按钮下载头像功能

Vue3实现点击按钮下载头像功能

要实现的效果 点击头像右上角弹出选项，点击保存图片可以把图片下载保存到本地 实现方式关键代码 1.第一种，直接创建a标签给头像地址。进行下载 // 创建一个隐藏的 <a> 标签const link = document.createElement("a");link.href = headPic; // 设置为图片的 URLlink.download = "avatar.jpg"; //
阅读更多...
【HarmonyOS】头像圆形裁剪功能之手势放大缩小，平移，双击缩放控制（三）

【HarmonyOS】头像圆形裁剪功能之手势放大缩小，平移，双击缩放控制（三）

【HarmonyOS】头像裁剪之手势放大缩小，平移，双击缩放控制（三） 一、DEMO效果图： 二、开发思路： 使用矩阵变换控制图片的放大缩小和平移形态。 通过监听点击手势TapGesture，缩放手势PinchGesture，拖动手势PanGesture进行手势操作的功能实现。 通过对矩阵变换参数mMatrix的赋值，将矩阵变换参数赋值给image控件。实现手势操作和图片操作的同步。
阅读更多...
vim放大缩小

vim放大缩小

本来是希望按<ctrl+w>_把当前活动窗口最大化，结果把vim缩小了，估计按成<ctrl+w>-。但怎么恢复呢？后来无意中，按<ctrl+shift>=,又把它放大了。  后来试了一下，直接按<ctrl>-是缩小，<ctrl>+(也就是ctrl+shift+=）是放大; 这就存在一个问题：当vim中的命令涉及到用到需要按shift后才出现的按键，该怎么按呢？ 例如：<ctrl+w>_ 怎么才
阅读更多...
图片识别 中图片压缩和放大算法，最近邻插值，双线性插值

图片识别 中图片压缩和放大算法，最近邻插值，双线性插值

由于在神经网络中，输入的张量大小必须相同，但是图片大小不一定相同，我们需要对图片进行压缩和放大。     图像的缩放很好理解,就是图像的放大和缩小。传统的绘画工具中,有一种叫做“放大尺”的绘画工具，画家常用它来放大图画。当然，在计算机上，我们不 再需要用放大尺去放大或缩小图像了，把这个工作交给程序来完成就可以了。下面就来讲讲计算机怎么来放大缩小图象；在本文中，我们所说的图像都是指点阵图， 也
阅读更多...
猫猫学iOS之tableView的下拉放大图片的方法

猫猫学iOS之tableView的下拉放大图片的方法

猫猫分享，必须精品 原创文章，欢迎转载。转载请注明：翟乃玉的博客 地址：http://blog.csdn.net/u013357243 一：效果 tableview下拉的时候上部分图片放大会 二：代码 直接上代码，自己研究吧 #import "NYViewController.h"//图片的高度const CGFloat NYTopViewH = 350;@interface
阅读更多...
射频放大管的使用简略

射频放大管的使用简略

不同于运放的低频频段放大，射频放大管是对于高频频段的信号放大，特别是在射频微波频段的信号放大，射频放大管的合理使用决定了所要达成的放大能力，其对静电的敏感性需要在实际的操作中佩戴静电手环等去静电设备，防止射频放大管的静电损坏，射频放大管在封装上有所区别，有的是金属封装，有的是塑封封装，也有无封装的，即裸芯，在带有封装的射频放大管中，有的需要螺钉来固定，有的直接可以与腔体或印制板焊接在一起，射频放大
阅读更多...
仿微信聊天系统开发功能架构分析

仿微信聊天系统开发功能架构分析

仿微信聊天系统是一种旨在模仿微信核心聊天功能的应用或软件，它允许用户通过即时通讯进行交流。该系统通常由客户端、服务器端和数据库组成，以支持用户间的实时消息传送。以下是对仿微信聊天系统的一个概述： 一、系统架构 客户端 用户界面，支持多个平台（如Android、iOS、Web），用于发送和接收消息、管理联系人列表、创建群组聊天等功能。 服务器端 处理来自客户端的请求，如用户注册、登录验
阅读更多...
文本框点击放大

文本框点击放大

点击改变尺寸 input[type=’text’]{ width:100px; height:30px; border-radius:5px;} (document).ready(function() {(document).ready(function() {("input[type='text']").focus(function(){ (this).animat
阅读更多...
点击文本框放大

点击文本框放大

一. 1.报表制作步骤： 新建数据库连接： 新建模板和数据集：
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2