iOS 仿微博图片添加标签

公司的项目需要这个功能,写了之后顺便提取出来写了一个demo,简单实现图片添加标签,暂时没有去处理图片宽度小于标签长度的情况。

类似微博的图片添加标签分为两种状态,一种是编辑标签状态,另一种是微博发出之后浏览其他人添加的标签的浏览状态。

1.编辑状态

添加标签拖动交互主要有以下几个点:

  • 拖动边界控制
  • 边界标签方向翻转
  • 轻触显示与隐藏删除按钮
  • 长按编辑标签
  • 闪烁动画
拖动边界控制

根据圆点的位置进行限制拖动

边界标签方向翻转

在拖动手势状态为UIGestureRecognizerStateEnded时候,检测是否能够放下删除按钮,不能则进行反向

轻触显示与隐藏删除按钮

默认轻触标签显示和隐藏删除按钮,此时重新布局标签子控件位置;在拖动手势开始的时候,隐藏删除按钮

长按编辑标签

遵守代理,即可获取到当前标签数据,进行修改

闪烁动画

利用一个帧动画简单实现闪烁,根据传入的repeatCount决定动画闪烁多久

2.预览状态

供他人浏览,不可编辑,利用代理模式回调标签的轻触和长按手势。

3.代码实现

主要有三个类

  • ZYTagImageView
  • ZYTagView
  • ZYTagInfo

ZYTagImageView 继承自UIImageView主要处理其上的所有标签

ZYTagView 为标签视图,处理标签的各种手势,并利用代理进行回调

ZYTagInfo 存储标签的信息,可存储具体位置以及当前点在父视图的位置比例(建议使用位置比例,在不同尺寸的屏幕上才能正常显示)

4.简单使用

#import "ZYTagImageView.h"即可,自定义手势处理需遵守ZYTagImageViewDelegate,实现以下代理方法:

/** 轻触imageView空白区域 */
- (void)tagImageView:(ZYTagImageView *)tagImageView activeTapGesture:(UITapGestureRecognizer *)tapGesture;
/** 轻触标签 */
- (void)tagImageView:(ZYTagImageView *)tagImageView tagViewActiveTapGesture:(ZYTagView *)tagView;
/** 长按标签 */
- (void)tagImageView:(ZYTagImageView *)tagImageView tagViewActiveLongPressGesture:(ZYTagView *)tagView;


✨具体细节可到GitHub下载demo查看。GitHub地址 😁

✨如果有用,还望朋友能给个star,谢谢。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,245评论 4 61
  • 这些天,每到深夜,就越发的睡不着。脑袋里总感觉有什么事没有完成,亦或是将要发生什么事,心里即为忐忑不安。 于是,都...
    笑九阅读 253评论 0 1
  • 标题 列表 链接和图片 引用 粗体和斜体 代码引用 表格
    angeChen阅读 274评论 0 1
  • 自有红楼以来,钗黛之争就十分激烈。清朝时一对挚友,两个都是当世名人,一人喜欢宝钗,一人喜欢黛玉,相见则坐论,每每不...
    朗月清风入我怀阅读 4,136评论 3 3
  • 我如今经常在想,假如我不是哥哥(张国荣)的歌迷,假如我那晚不去参加荣迷们给哥哥举办的纪念会,我还会不会遇见并爱上你...
    会疼这思念阅读 187评论 0 0