IOS中有封装好的选择图片后长按出现动画删除效果,效果如下

而Android找了很久都没有找到有这样效果的第三方组件,最后懒得找了还是自己实现这效果吧

选择图片后还可对图片进行剪裁

当然,代码中还有很多不完善的地方,我接下来会继续完善这个组件的
已经上传到开源社区,欢迎大家来Star啊~

Demo源码:传送门

设计中的碰到的一些问题和解决思路

1.如何让加号图片显示在GridView最后面

首先在调用GridAdapter构造方法时就加载加号图片

    /*** 图片适配器* @param context 上下文* @param imagesum 最大可添加图片数*/public GridAdapter(Context context, int imagesum) {this.context = context;this.imageSum = imagesum;// 加号图片mAddBitmap = BitmapFactory.decodeResource(context.getResources(), R.drawable.ic_add_image);}

然后在getCount()方法里对图片数据集合加1,在该位置上添加加号图片

    @Overridepublic int getCount() {// 数据集合加一,在该位置上添加加号return imageItemData == null ? 0 : imageItemData.size() + 1;}

最后在getView()方法中,每次显示图片时都对数据集合中的元素数量进行判断,如果数据集合的数量大于position,则表示需要显示加号图片

        if (imageItemData != null && imageItemData.size() > position) {// 正常图片} else {// 加号图片}

这样就能保证加号图片一直在GridView最后一个item上

2.如何显示出删除按钮

在item布局时,在图片的右上角覆盖一层删除按钮,在Adapter中对这个图片的显示和隐藏进行处理

    /** 判断是否显示清除按钮 true=显示 */private boolean showImageClear = false;
对外提供显示和隐藏的方法/*** 设置图片显示状态* @param clear 图片状态*/public void setClearImgShow(boolean clear) {showImageClear = clear;}/*** 图片显示状态* @return 状态 true=显示*/public boolean getClearImgShow() {return showImageClear;}

删除按钮默认不显示,当用户长按图片时就显示出来

        // 长按显示删除按钮mGridView.setOnItemLongClickListener(new AdapterView.OnItemLongClickListener() {@Overridepublic boolean onItemLongClick(AdapterView<?> parent, View view, int position, long id) {if (!(position == gridAdapter.imageItemData.size())) {// 如果删除按钮已经显示了则不再设置if (!gridAdapter.getClearImgShow()) {gridAdapter.setClearImgShow(true);gridAdapter.notifyDataSetChanged();}}// 返回true,停止事件向下传播return true;}});

这里需要拦截长按点击事件,把返回值设置为true,因为我们还设置了点击事件的监听,如果不拦截事件,那么长按事件结束后还会同时执行单击事件
最后关键的一点,在GridAdapter类中的getView方法里进行控制,通过getClearImgShow方法获取删除图片是否需要显示,如果返回为true则显示出来,并获取动画实例,让图片开始执行动画效果

        if (imageItemData != null && imageItemData.size() > position) {// 正常显示// 判断是否需要显示删除按钮 ,为true则显示,并执行动画效果if (getClearImgShow()) {holder.imgclear.setVisibility(View.VISIBLE);CustomRotateAnim anim = CustomRotateAnim.getCustomRotateAnim();anim.setDuration(300);anim.setRepeatCount(2);anim.setInterpolator(new LinearInterpolator()); // 设置为匀速holder.img.startAnimation(anim);} else {// 关闭动画,隐藏删除按钮holder.img.clearAnimation();holder.imgclear.setVisibility(View.GONE);}holder.img.setImageBitmap(PhotoBitmapUtil.getCompressPhoto(imageItemData.get(position)));} else {......省略......}

3.如何设置当图片达到最大数时,隐藏加号按钮

在使用GridAdapter的时候,调用方需要传入一个最大图片数:

gridAdapter = new GridAdapter(MainActivity.this, 8);
mGridView.setAdapter(gridAdapter);

然后在GridAdapter中接收这个最大图片数,并在getView()方法中对加号图片的显示进行管控

        if (imageItemData != null && imageItemData.size() > position) {// 显示选择的图片......省略......} else {// 显示加号按钮// 图片数达到最大限制时隐藏加号图片if (imageItemData.size() != imageSum) {holder.imgclear.setVisibility(View.GONE);   // 不显示删除按钮holder.img.clearAnimation();    // 去除动画holder.img.setImageBitmap(mAddBitmap);}}

“gridAdapter.getCount() - 1”是因为我们在添加加号图片时加了1,所以使用时需要减1

        // 点击图片mGridView.setOnItemClickListener(new AdapterView.OnItemClickListener() {@Overridepublic void onItemClick(AdapterView<?> parent, View view, int position, long id) {// 如果单击时删除按钮处在显示状态,则隐藏它if (gridAdapter.getClearImgShow()) {gridAdapter.setClearImgShow(false);gridAdapter.notifyDataSetChanged();} else {if (gridAdapter.getCount() - 1 == position) {// 判断是否达到了可添加图片最大数if (!(gridAdapter.imageItemData.size() == gridAdapter.imageSum)) {selectPhoto.showPopupSelect(mGridView);}} else {popupViewGridPhoto(position);}}}});

4.如何降低图片加载时的内存消耗量

要在GridView中显示那么多的图片,肯定是需要多图片进行压缩处理的,不然很容易出现OOM错误
这里通过质量压缩,降低加载图片的内存大小

    /*** 把原图按1/5的比例压缩** @param path 原图的路径* @return 压缩后的图片*/public static Bitmap getCompressPhoto(String path) {BitmapFactory.Options options = new BitmapFactory.Options();options.inJustDecodeBounds = false;options.inSampleSize = 5;  // 图片的长宽设置为原来的五分之一Bitmap bmp = BitmapFactory.decodeFile(path, options);options = null;return bmp;}

也可以通过其它的方式,可以参考这篇博客《Android避免内存溢出(Out of Memory)方法总结》

5.如何防止部分手机拍照后图片被旋转的问题

在测试中,部分三星手机拍摄完照片后会把图片旋转90度,这个设计实在是坑,为此还得专门为了这个问题进行处理,每次拍摄完照片后都要获取图片的旋转角度,如果图片被旋转了的话就再旋转回去
可以参考这篇博客
《Android 解决部分手机拍照后获取的图片被旋转的问题》

6.如何让图片左右摇摆

想要实现图片左右摇摆的效果,需要我们自定义Animation
可参看这篇博客
《Android 自定义Animation实现View摇摆效果》

这里就先介绍这么多,详细的解释代码注释中都有的,就不再多说啦

实现炫酷的获取本地图片和相机拍照图片-自定义组件相关推荐

  1. 如何获取网络视频(或者说后台返回视频URL)第一帧图片以及获取本地视频的第一帧图片

    在项目开发的时候,有可能会有这样的一种需求:有一段视频需要展示给用户,在界面上先展示视频上的某一帧图片,用户点击的时候再去获取视频资源进行播放.这时,服务器会先给我们返回视频的url,这个时候就需要通 ...

  2. 微信小程序开发之从相册获取图片 使用相机拍照 本地图片上传

    今天遇到微信小程序的用户头像设置功能,做笔记. 先上gif: 再上代码: 小demo,代码很简单. 1.index.wxml <!--index.wxml--> <button st ...

  3. Flutter 相册选择图片和相机拍照

    Flutter 获取相册中的图片和用相机拍照   在原生开发中,拍照及从图库选择图片是非常常见的需求,而且原生的图片选择第三方库也有很多并且很完善了.Flutter 也给我们提供了好用的图片选择插件, ...

  4. Android 7.0 获取相机拍照图片,适配三星手机拍照,解决三星手机拍照屏幕旋转,判断设备是否有摄像头

    方法1 新建/res/xml/file_paths: <?xml version="1.0" encoding="utf-8"?> <path ...

  5. 微信小程序:从本地相册选择图片、相机拍照,并将所选图片上传到服务器

    简介 小程序项目中有个需求:用户聊天时可以上传图片,还能支持拍照.于是学习了一下,分享给大家. 微信小程序中有个wx.chooseImage的方法可以快捷调用达到需求的效果. 具体实现 1.为了简化代 ...

  6. 炫酷翻页时钟FlipClock的使用和样式自定义

    前言 基于 kuan-vue-flip-clock 插件,由于插件的样式比较固定,所以想要改变其样式需要自定义,这里我是在PC端.vue2.x.样式表sass,样式vw+rem自适应 插件文档 htt ...

  7. Android 图片选择器(拍照)自定义

    开发经常遇到获取图片问题 /*** 读取手机中所有图片信息*/ private void getAllPhotoInfo() {new Thread(new Runnable() {@Override ...

  8. 秒建炫酷的开源项目文档,这款神器用起来够优雅

    学习过我的开源项目mall的朋友应该知道,我有一个使用Docsify 搭建的项目文档网站.使用Docsify搭建文档网站虽然简单,但是缺少分类.标签.SEO这类功能,随着文档越来越多,查找起来有点不方 ...

  9. 微信小程序-从相册获取图片,视频 使用相机拍照,录像上传+服务器(nodejs版)接收

    在本文 微信小程序-从相册获取图片 使用相机拍照 本地图片上传之前需要看看 微信小程序-获取用户session_key,openid,unionid - 后端为nodejs 代码封装是在上文添加的. ...

最新文章

  1. NetBeans 时事通讯(刊号 # 117 - Sep 16, 2010)
  2. thinkpad触控笔怎么用_电容笔怎么用,如何选择一支电容笔来提升生产力呢?
  3. 全国通用计算机一级考试模板,共享WPS中符合国人习惯的好模板
  4. 一个不错的报表工具 open flash chart 2
  5. Linux关闭selinux
  6. oracle10g 6.0更改5.2,Oracle 10G 10.2.0.1升级到10.2.0.5
  7. 关于本Blog无法进行评论问题的说明
  8. supervisor开机自启动方法
  9. Java程序利用POJ读写Excel的.xls或.xlsx文件所需的3个jar包
  10. 嵌入式成长轨迹37 【Zigbee项目】【CC2430基础实验】【自动闪烁】
  11. 赢在微点答案专区英语_少儿英语课堂 语法教学游戏 全集
  12. javascript性能
  13. python控制视频_控制Python面向对象的访问
  14. MATLAB绘图/数据的可视化
  15. 【Unity3D进阶4-15】Lua热更新
  16. 操作系统实验三虚拟存储器管理之模拟页面置换算法(FIFOLRU)
  17. 从Google Play上下载apk
  18. 【刷题】求长方形与正方形的个数
  19. html5火焰字体效果,CSS3文字特效属性text-shadow如何实现火焰文字的效果
  20. python写等腰三角形的性质_杨辉三角—知识点详解 - osc_8cfq8uoa的个人空间 - OSCHINA - 中文开源技术交流社区...

热门文章

  1. 【机智】Android 微信6.2以上版本 转移聊天记录到ios,当前Wi-Fi环境复杂,无法传输 问题
  2. 指尖江湖鸿蒙抽奖,《剑网3指尖江湖》里最实用的赚金方法,这招成搬砖党的福利!...
  3. uniapp 小程序 开发环境和生产环境
  4. 免安装版mysql5.7.38的安装与卸载
  5. MySQL_MaxWell 写入Clickhouse
  6. sensei鼠标测试软件,【SteelSeriesSenseiMLG限量版游戏鼠标评测】史上最清晰完整 游戏鼠标微动更换教程-中关村在线...
  7. 雅思7+、托福110+的英语大神,原来都悄悄关注了这几个视频号!
  8. 京东联盟-怎么跳转到京东购物小程序领券下单
  9. python codecs_Python:如何使用codecs模块将unicode数据保存成gbk格式
  10. Springboot项目结合miniui如何快速实现数据的导出到excel