仿豆瓣日记图文编辑

作者: CoderLocus | 来源:发表于2016-08-03 18:42 被阅读708次

    仿豆瓣日记编辑功能,实现了图文编辑,可以插入删除图片,给图片加标题,并且长按可以移动图片位置

    图片编辑器.gif

    初始化TextView数据

    - (void)p_setData:(NSString *)data;
    

    该方法里暂时只对<img full_url="https://dn-qinqinwojia.qbox.me/Fo1cGsOJ-QArC4-pH9-PoG1nfHKo" abbr_url="" caption="haha" />这一种个是进行了处理,如果需要处理其他格式可以在这个方法里添加。

    富文本操作

    - (NSAttributedString *)p_textViewAttributedText:(id)attribute contentText:(NSAttributedString *)attributeString index:(NSInteger)index originPoint:(CGPoint)originPoint isData:(BOOL)isData {
        NSMutableAttributedString *contentText = [attributeString mutableCopy];
        NSAttributedString *textAttachmentString = [[NSAttributedString alloc] initWithString:@"\n"];
        if ([attribute isKindOfClass:[JQLImageView class]]) {
            JQLImageView *imageView = (JQLImageView *)attribute;
            CGFloat imageViewHeight = ![imageView.title isEqualToString:@""] ? IMAGE_WIDTH + 30.0 : IMAGE_WIDTH;
            imageView.frame = CGRectMake(originPoint.x, originPoint.y, IMAGE_WIDTH, imageViewHeight);
            
            NSMutableAttributedString *attachText = [NSMutableAttributedString yy_attachmentStringWithContent:imageView contentMode:UIViewContentModeScaleAspectFit attachmentSize:imageView.frame.size alignToFont:_textView.font alignment:YYTextVerticalAlignmentCenter];
            if (!isData) [contentText insertAttributedString:textAttachmentString atIndex:index++];
            [contentText insertAttributedString:attachText atIndex:index++];
            
            imageView.editBlock = ^(JQLImageView *imageView) {
                [self p_editImageViewTitle:imageView point:imageView.frame.origin];
            };
            imageView.moveBlock = ^(JQLImageView *imageView, UILongPressGestureRecognizer *longPress) {
                [self p_move:imageView longPress:longPress];
            };
            imageView.deleteBlock = ^(JQLImageView *imageView) {
                [self p_deleteImageView:imageView];
            };
        }
        return contentText;
    }
    

    该方法将图片先转成了自己定义的一个ImageView视图,然后将视图,转成AttributedText,对_textView进行赋值。
    如果需要获取富文本当中的视图,可以通过_textView.textLayout.attachments来进行获取。该数组里存放了所有的YYTextAttachment,YYTextAttachment里content属性是id类型,可以直接转成相应的视图。另外还有一个对应的_textView.textLayout.attachmentRanges存放的是对应的Ranges。

    长按移动图片位置

    - (void)p_longPressGestureRecognized:(id)sender {
        UILongPressGestureRecognizer *longPress = (UILongPressGestureRecognizer *)sender;
        UIGestureRecognizerState longPressState = longPress.state;
        //手指在tableView中的位置
        _moveTableView.fingerLocation = [longPress locationInView:_moveTableView];
        //手指按住位置对应的indexPath,可能为nil
        _moveTableView.relocatedIndexPath = [_moveTableView indexPathForRowAtPoint:_moveTableView.fingerLocation];
        switch (longPressState) {
            case UIGestureRecognizerStateBegan:{  //手势开始,对被选中cell截图,隐藏原cell
                _moveTableView.originalIndexPath = [_moveTableView indexPathForRowAtPoint:_moveTableView.fingerLocation];
                if (_moveTableView.originalIndexPath) {
                    _moveTableView.firstIndexPath = _moveTableView.originalIndexPath;
                    [_moveTableView cellSelectedAtIndexPath:_moveTableView.originalIndexPath];
                }
                break;
            }
            case UIGestureRecognizerStateChanged:{//点击位置移动,判断手指按住位置是否进入其它indexPath范围,若进入则更新数据源并移动cell
                //截图跟随手指移动
                CGPoint center = _moveTableView.snapshot.center;
                center.y = _moveTableView.fingerLocation.y;
                _moveTableView.snapshot.center = center;
                if ([_moveTableView checkIfSnapshotMeetsEdge]) {
                    [_moveTableView startAutoScrollTimer];
                }else{
                    [_moveTableView stopAutoScrollTimer];
                }
                //手指按住位置对应的indexPath,可能为nil
                _moveTableView.relocatedIndexPath = [_moveTableView indexPathForRowAtPoint:_moveTableView.fingerLocation];
                if (_moveTableView.relocatedIndexPath && ![_moveTableView.relocatedIndexPath isEqual:_moveTableView.originalIndexPath]) {
                    [_moveTableView cellRelocatedToNewIndexPath:_moveTableView.relocatedIndexPath];
                }
                break;
            }
            default: {                             //长按手势结束或被取消,移除截图,显示cell
                [_moveTableView stopAutoScrollTimer];
                [_moveTableView didEndDraging];
                break;
            }
        }
    }
    

    该方法调用了RTDragCellTableView当中的方法,来实现移动图片位置。由于是从TextView转到TableView上进行移动所以,将长按手势操作放在了外面进行。

    格式化数据

    - (NSArray *)p_trimIsMove:(BOOL)isMove;//该方法对一行只有一个回车的数据进行了trim,如果不需要,可以删除;
    

    图片选择,目前并没有去进行获取原图

    - (void)imagePickerController:(TZImagePickerController *)picker didFinishPickingPhotos:(NSArray<UIImage *> *)photos sourceAssets:(NSArray *)assets isSelectOriginalPhoto:(BOOL)isSelectOriginalPhoto;
    

    代码地址:仿豆瓣日记图文编辑

    相关文章

      网友评论

        本文标题:仿豆瓣日记图文编辑

        本文链接:https://www.haomeiwen.com/subject/plzqsttx.html