Android实现点击缩略图放大效果

本文实例为大家分享了Android点击缩略图放大效果的具体代码,供大家参考,具体内容如下

import android.animation.Animator;
import android.animation.AnimatorListenerAdapter;
import android.animation.AnimatorSet;
import android.animation.ObjectAnimator;
import android.graphics.Point;
import android.graphics.Rect;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.view.animation.DecelerateInterpolator;
import android.widget.ImageView;

public class MainActivity extends AppCompatActivity {

  // 持有这个动画的引用,让他可以在动画执行中途取消
  private Animator mCurrentAnimator;

  private int mShortAnimationDuration;

  private View imageView1;
  private View imageView2;

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    initView();

    imageView1.setOnClickListener(new View.OnClickListener() {
      @Override
      public void onClick(View v) {
        zoomImageFromThumb(imageView1,R.mipmap.ic_launcher);
      }
    });
    imageView2.setOnClickListener(new View.OnClickListener() {
      @Override
      public void onClick(View v) {
        zoomImageFromThumb(imageView2,R.mipmap.ic_launcher);
      }
    });

    // 系统默认的短动画执行时间 200
    mShortAnimationDuration = getResources().getInteger(
        android.R.integer.config_shortAnimTime);
  }

  private void initView() {
    imageView1 = (ImageView) findViewById(R.id.imageView1);
    imageView2 = (ImageView) findViewById(R.id.imageView2);
  }
  private void zoomImageFromThumb(final View thumbView, int imageResId) {
    // 如果有动画正在运行,取消这个动画
    if (mCurrentAnimator != null) {
      mCurrentAnimator.cancel();
    }

    // 加载显示大图的ImageView
    final ImageView expandedImageView = (ImageView) findViewById(
        R.id.expanded_image);
    expandedImageView.setImageResource(imageResId);

    // 计算初始小图的边界位置和最终大图的边界位置。
    final Rect startBounds = new Rect();
    final Rect finalBounds = new Rect();
    final Point globalOffset = new Point();

    // 小图的边界就是小ImageView的边界,大图的边界因为是铺满全屏的,所以就是整个布局的边界。
    // 然后根据偏移量得到正确的坐标。
    thumbView.getGlobalVisibleRect(startBounds);
    findViewById(R.id.imageView1).getGlobalVisibleRect(finalBounds, globalOffset);
    startBounds.offset(-globalOffset.x, -globalOffset.y);
    finalBounds.offset(-globalOffset.x, -globalOffset.y);

    // 计算初始的缩放比例。最终的缩放比例为1。并调整缩放方向,使看着协调。
    float startScale=0;
    if ((float) finalBounds.width() / finalBounds.height()
        > (float) startBounds.width() / startBounds.height()) {
      // 横向缩放
      float startWidth = startScale * finalBounds.width();
      float deltaWidth = (startWidth - startBounds.width()) / 2;
      startBounds.left -= deltaWidth;
      startBounds.right += deltaWidth;
    } else {
      // 竖向缩放
      float startHeight = startScale * finalBounds.height();
      float deltaHeight = (startHeight - startBounds.height()) / 2;
      startBounds.top -= deltaHeight;
      startBounds.bottom += deltaHeight;
    }

    // 隐藏小图,并显示大图
    thumbView.setAlpha(0f);
    expandedImageView.setVisibility(View.VISIBLE);

    // 将大图的缩放中心点移到左上角。默认是从中心缩放
    expandedImageView.setPivotX(0f);
    expandedImageView.setPivotY(0f);

    //对大图进行缩放动画
    AnimatorSet set = new AnimatorSet();
    set.play(ObjectAnimator.ofFloat(expandedImageView, View.X, startBounds.left, finalBounds.left))
        .with(ObjectAnimator.ofFloat(expandedImageView, View.Y, startBounds.top, finalBounds.top))
        .with(ObjectAnimator.ofFloat(expandedImageView, View.SCALE_X, startScale, 1f))
        .with(ObjectAnimator.ofFloat(expandedImageView, View.SCALE_Y, startScale, 1f));
    set.setDuration(mShortAnimationDuration);
    set.setInterpolator(new DecelerateInterpolator());
    set.addListener(new AnimatorListenerAdapter() {
      @Override
      public void onAnimationEnd(Animator animation) {
        mCurrentAnimator = null;
      }

      @Override
      public void onAnimationCancel(Animator animation) {
        mCurrentAnimator = null;
      }
    });
    set.start();
    mCurrentAnimator = set;

    // 点击大图时,反向缩放大图,然后隐藏大图,显示小图。
    final float startScaleFinal = startScale;
    expandedImageView.setOnClickListener(new View.OnClickListener() {
      @Override
      public void onClick(View view) {
        if (mCurrentAnimator != null) {
          mCurrentAnimator.cancel();
        }

        AnimatorSet set = new AnimatorSet();
        set.play(ObjectAnimator
            .ofFloat(expandedImageView, View.X, startBounds.left))
            .with(ObjectAnimator
                .ofFloat(expandedImageView,
                    View.Y,startBounds.top))
            .with(ObjectAnimator
                .ofFloat(expandedImageView,
                    View.SCALE_X, startScaleFinal))
            .with(ObjectAnimator
                .ofFloat(expandedImageView,
                    View.SCALE_Y, startScaleFinal));
        set.setDuration(mShortAnimationDuration);
        set.setInterpolator(new DecelerateInterpolator());
        set.addListener(new AnimatorListenerAdapter() {
          @Override
          public void onAnimationEnd(Animator animation) {
            thumbView.setAlpha(1f);
            expandedImageView.setVisibility(View.GONE);
            mCurrentAnimator = null;
          }

          @Override
          public void onAnimationCancel(Animator animation) {
            thumbView.setAlpha(1f);
            expandedImageView.setVisibility(View.GONE);
            mCurrentAnimator = null;
          }
        });
        set.start();
        mCurrentAnimator = set;
      }
    });
  }
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • Android raw 目录下视频的缩略图的获取

     Android raw 目录下视频的缩略图的获取 以下代码用于获取 Android raw目录下视频文件的缩略图: /** * 获取 raw 下 指定视频文件的缩略图 * @param aVideoName * @return */ private Drawable getThumbnail(String aVideoName) { Drawable ret = null; int id = 0; try { id = R.raw.class.getDeclaredField(aVideoNa

  • Android实现微信分享带有缩略图的网页

    前言 最近做了一个web app 需要做微信分享. 需求是分享web页还要带有图片,并且图片还不是本地的,这就有点坑了, 也就是说图片还要从网络实时获取并且是同步的,如果是异步的还需要等待(用户体验就不好了) 代码如下 /** * 微信分享 好友 */ public void wxHyShare(String shareUrl, String title, String image, String desc) { IWXAPI api = WXAPIFactory.createWXAPI(con

  • Android获取SD卡上图片和视频缩略图的小例子

    如何判断文件呢? 可以通过Cursor遍历数据库,对比INTERNAL_CONTENT_URI字段的值,这是一个Uri,这里保存着Android手机SD卡上的多媒体文件完整路径. [java] 复制代码 代码如下: Uri originalUri = MediaStore.Images.Media.EXTERNAL_CONTENT_URI;                 //若为视频则为MediaStore.Video.Media.EXTERNAL_CONTENT_URI;          

  • android 获取视频,图片缩略图的具体实现

    1.获取视频缩略图有两个方法(1)通过内容提供器来获取(2)人为创建缩略图 (1)缺点就是必须更新媒体库才能看到最新的视频的缩略图 [java] 复制代码 代码如下: /**      * @param context      * @param cr     * @param Videopath     * @return      */     public static Bitmap getVideoThumbnail(Context context, ContentResolver cr

  • Android中如何获取视频文件的截图、缩略图

    背景 公司最近要求给我负责的APP加上视频录制和发布的功能,我简单的完成了基本的录制和视频压缩功能,后来发现发布接口需要上传视频的截图,网上搜索了一下资料,在这里整理一下. 代码实现 /** * 获取视频文件截图 * * @param path 视频文件的路径 * @return Bitmap 返回获取的Bitmap */ public static Bitmap getVideoThumb(String path) { MediaMetadataRetriever media = new Me

  • Android编程获取图片和视频缩略图的方法

    本文实例讲述了Android编程获取图片和视频缩略图的方法.分享给大家供大家参考,具体如下: 从Android 2.2开始系统新增了一个缩略图ThumbnailUtils类,位于framework的android.media.ThumbnailUtils位 置,可以帮助我们从mediaprovider中获取系统中的视频或图片文件的缩略图,该类提供了三种静态方法可以直接调用获取. 1. createVideoThumbnail static Bitmap createVideoThumbnail(

  • Android 使用Vitamio打造自己的万能播放器(10)—— 本地播放 (缩略图、视频信息、视频扫描服务)

    前言 Vitamio是我们团队的诚意之作,除了要将VPlayer打造成Android最好的播放器,也要将Vitamio打造成Android最好的播放器组件.新版发布内测SDK虽然还有一些问题,但已经具备高可扩展性.便捷性和许多内置实用的功能,后续文章将继续深挖和介绍Vitamio的使用细节和方法.本章将提供显示缩略图.视频大小等视频信息,并介绍使用Vitamio内置的ContentProvider以及文件扫描服务. 注意 本章ContentProvider在2012-8-31发布的SDK中已经不

  • Android实现点击缩略图放大效果

    本文实例为大家分享了Android点击缩略图放大效果的具体代码,供大家参考,具体内容如下 import android.animation.Animator; import android.animation.AnimatorListenerAdapter; import android.animation.AnimatorSet; import android.animation.ObjectAnimator; import android.graphics.Point; import and

  • iOS 点击图片放大效果的实现

    今天带来的是图片点击放大效果,这种效果一般在微博,微信朋友圈中比较常见 当我点击其中一张图片时,就会进入详情 具体实现如下 首先创建个 Controller(PhotoViewController) // // PhotoViewController.h // 点击图片放大效果 // // Created by Amydom on 17/1/9. // Copyright © 2017年 Amydom. All rights reserved. // #import <UIKit/UIKit.h

  • vue实现点击图片放大效果

    本文实例为大家分享了vue点击图片放大展示的具体代码,供大家参考,具体内容如下 1.建立子组件,来实现图片方法功能: BigImg.vue <template> <!-- 过渡动画 --> <transition name="fade"> <div class="img-view" @click="bigImg"> <!-- 遮罩层 --> <div class="img

  • Android轮播图点击图片放大效果的实现方法

    前言 最近项目中需要实现轮播图显示商品图片,当用户点击商品图片的时候,需要图片放大显示,当然用户还能进行多张图片的滑动切换,放大,缩小图片等操作,实现起来相对还是比较简单的,话不多说,咱们是用代码说话的,直接上代码. 实现步骤: 1.效果图的展示 2.项目中添加相关的依赖 3.主界面实现轮播图的效果 4.点击轮播图进入图片放大展示页面 5.图片放大展示页面所需的适配器 6.获取fragment需要展示图片的url 7.图片缩放时遇到Bug解决 实现过程: 1.效果图的展示 2.项目中添加相关的依

  • iOS tableView实现下拉图片放大效果

    本文实例为大家分享了iOS实现下拉图片放大效果展示的具体代码,供大家参考,具体内容如下 #import "ViewController.h" #define kScreenbounds [UIScreen mainScreen].bounds #define kScreenWidth [UIScreen mainScreen].bounds.size.width #define kScreenHeight [UIScreen mainScreen].bounds.size.height

  • JS点击缩略图整屏居中放大图片效果

    需要实现的效果图: 今天开发的时候,遇到要点击缩略图之后居中显示图片的大图查看(大致效果如上图所示)~想了好几种实现方式,最开始的时候,是想通过animate来点击图片进行显示,可是后来当我想要让放大的图片进行居中显示和点击别的地方隐藏已显示的大图的时候,才发现实现起来有难度. 1 第一张点击图片将图片放大 下面将这种方式也贴出来,供自己参考(万一有需要的小伙伴正好需要这样的功能呢): <div> <img class="dialog" src="xxx.j

  • Android仿微信图片点击浏览的效果

    本篇我们来做一个类似于微信的图片点击浏览的效果,点击小图图片后会放大至全屏显示,且中间有一个2D平滑过渡的效果. 思路如下: 首先,从图片缩略界面跳转到图片详情页面,应该是从一个Activity跳转到另外一个Activity,应该图片详情页面也有很多操作,用View或者Dialog不是很好.所以现在难点就是,如何使得前一个界面的ImageView在另外一个界面做缩放切割动画. 其次,一般缩略界面的ImageView的是正方形的,并且是CENTER_CROP缩放属性的.CENTER_CROP属性会

  • Android仿微信图片点击全屏效果

    废话不多说,先看下效果: 先是微信的 再是模仿的 先说下实现原理,再一步步分析 这里总共有2个Activity一个就是主页,一个就是显示我们图片效果的页面,参数通过Intent传送,素材内容均来自网络,(感谢聪明的蘑菇) 图片都是Glide异步下的,下的,下的重要的事情说三次,然后就是用动画做放大操作然后显示出来了(并没有做下载原图的实现,反正也是一样 下载下来Set上去而且动画都不需要更简便). OK,我们来看分析下 obj,目录下分别创建了2个对象,一个用来使用来处理显示页面的图片尺寸信息以

  • Android中ScrollView 滑到头部或尾部可伸缩放大效果

    最近做项目,想要这么一个效果,就是ScrollView 滑动到顶部,当不能在滑动的时候,图片可以下拉放大,松开又恢复.滑到底部没有内容的时候,也有伸缩效果,先看看效果图吧. 就是如上图这么个效果.系统提供的ScrollView 是不能做到这个效果的,所以需要自己自定义,网上找了一些资料.也参考了下其他人的做法.自己也整合了一下.希望对大家有所帮助. 核心的控件就是下面的这段代码: package com.kokjuis.travel.customView; import android.anim

  • Android列表实现单选点击缩放动画效果

    recycleView单选的时候,一般的处理就是选中的item做个stroke或者字体颜色改变,但要提升用户体验就得加点动画了.也就是点击选中的元素放大,同时之前选中的item缩小,不便截gif图,只能放一张静态图,大家脑补脑补~ 图中的CheckBox,代码实现其实是imageview,它的选中.取消也是有动画的,不是控制visible,而是通过改变图片透明度来实现选中取消的. 具体看代码: import android.animation.ObjectAnimator; import and

随机推荐