ZYTagView:仿微博图片添加标签的项目
一、项目简介
ZYTagView项目是一个仿微博图片添加标签的项目。它是因公司项目有此需求而开发的,并且附带写了一个demo。这个项目主要围绕图片添加标签功能展开,包括对标签的各种操作处理,如标签的添加、删除、编辑以及不同状态(编辑和浏览)下的交互等。
二、项目核心技术
- 类的设计与继承 -有三个主要的类。ZYTagImageView继承自UIImageView,负责处理图片上的所有标签。ZYTagView继承自UIView,作为标签视图,处理标签的各种手势并通过代理回调。ZYTagInfo继承自NSObject,用于存储标签的信息,像具体位置以及当前点在父视图的位置比例(推荐使用位置比例以适应不同屏幕尺寸)。 -一个ZYTagImageView能够添加多个ZYTagView,每个ZYTagView对应一个ZYTagInfo,所有标签位置信息都存储在ZYTagInfo中。
- 手势处理与交互逻辑 -在编辑标签状态下,有多种交互设计。例如拖动边界控制,根据圆点位置限制拖动边界;标签方向翻转,在拖动手势结束时检测能否放下删除按钮,不能则反向;轻触显示与隐藏删除按钮,默认轻触标签可显示和隐藏删除按钮并重新布局标签子控件位置,拖动手势开始时隐藏删除按钮。 -长按编辑标签可通过遵守代理获取当前标签数据进行修改,还有闪烁动画通过帧动画实现,根据传入的repeatCount决定闪烁时长。在预览状态下供他人浏览不可编辑,利用代理模式回调标签的轻触和长按手势。
三、项目简单使用
- 导入#import “ZYTagImageView.h”。
- 初始化ZYTagImageView,如ZYTagImageView imageView = [[ZYTagImageView alloc] initWithImage:image];imageView.delegate = self;imageView.frame = CGRectMake(100,100,100,100);[self.view addSubview:imageView];
- 可以添加一个标签:[imageView addTagWithTitle:@”我是一个标签” point:CGPointMake(30,40) object:nil];
- 删除所有标签:[imageView removeAllTags];
- 设置为预览模式:[imageView setAllTagsEditEnable:NO];
- 还可以自定义手势处理,需遵守ZYTagImageViewDelegate,实现相关代理方法。
四、项目总结
ZYTagView项目在图片添加标签方面有较为完善的功能实现,从类的构建到交互逻辑以及简单的使用示例都有涉及。希望大家对这个项目有更多的探索和反馈,如果有任何想法或者改进建议,欢迎在下方留言参与讨论。