iOS UITextView 实现类似微博的话题、提及用户效果

目录
  • #话题#
    • 1.高亮
    • 2.点击事件
  • @提及用户
    • 1.高亮
    • 2.整体删除

最近接了一个需求,在发布动态的时候,增加类似微博的#话题#@提及用户的效果,在此做一简要记录。

#话题#

最终效果是:

  • 编辑过程中#话题内容#实时高亮

  • 高亮部分可以响应点击事件

1.高亮

基本思路是:使用正则匹配出成对的#,再利用UITextView的富文本实现高亮效果。

func refreshTopicStyle() {

        let regex = try! NSRegularExpression(pattern: "此处填写正则表达式",
                                             options:[NSRegularExpression.Options.caseInsensitive])
        // 注意点
        let totalRange = NSMakeRange(0, (inputTextView.attributedText.string as NSString).length)
        let results = regex.matches(in: inputTextView.attributedText.string,
                                    options: NSRegularExpression.MatchingOptions.init(rawValue: 0),
                                    range: totalRange)
        let attributedString: NSMutableAttributedString = NSMutableAttributedString(string: inputTextView.attributedText.string)
        attributedString.setAttributes(normalAttributes, range: totalRange)

        for result in results {
            attributedString.setAttributes(topicAttributes, range: result.range)
        }
        inputTextView.attributedText = attributedString
    }

这有一个注意点,计算 totalRange 前,先将 String 转成了 NSString,这是因为此处 NSRange 中的 length 需要的是 UTF-16 长度,也就是与 NSString 的 length 定义一致,而 Swift 中的 String 没有 length 只有 count,指的是字符数,当文本中出现 emoji 表情时,二者就不一致了。

当然,也有一些其他办法来处理,如:

let lengthA = inputTextView.textStorage.length
let lengthB = inputTextView.attributedText.string.utf16.count

2.点击事件

实现高亮部分的点击事件,目前有3种实现方案:

  • 直接给UITextView添加点击事件
  • 通过设置LinkAttribute,利用超文本链接的点击实现
  • 重写UITextViewtouches...方法

其中,第二种只限于在非编辑状态(即 textView.isEditable = false)下的点击,故排除,①、③均可,本文采用第一种,主要实现如下:

inputTextView.addTapGesture(self, handler: #selector(tapAttributedText(tap:)))
@objc private func tapAttributedText(tap: UITapGestureRecognizer) {
    guard tap.isKind(of: UITapGestureRecognizer.self), let textView = tap.view as? UITextView else {
        return
    }
    let layoutManager = textView.layoutManager
    var tapLocation = tap.location(in: textView)
    tapLocation.x -= textView.textContainerInset.left
    tapLocation.y -= textView.textContainerInset.top
    let characterIndex = layoutManager.characterIndex(for: tapLocation,
                                                      in: textView.textContainer,
                                                      fractionOfDistanceBetweenInsertionPoints: nil)
    for result in getCheckResult(format: Constants.TopicRegularExpression, text: inputTextView.attributedText.string) {
        if result.range.location < characterIndex, characterIndex < result.range.location + result.range.length {
            // 此处响应点击事件
            MBProgressHUD.showOnlyText(to: self.view, title: "美好时光")
            return
        }
    }
    inputTextView.becomeFirstResponder()
}

@提及用户

  • 编辑过程中 @提及用户 实时高亮,且只允许选取的用户名高亮,手动输入不高亮;

  • 点击删除键的时候,一次性删除整个高亮部分

1.高亮

  • 记录位置

本来准备用正则匹配的,但因为只允许选取的用户名高亮,纯手动输入的不高亮,所以使用正则匹配就不合理了,这里采用实时记录、更新已选取用户名位置的方式实现。

/// 用来保存已选取用户信息的结构体
struct UserInfo {
    /// 用户名
    var userName: String
    /// 位置信息
    var range: NSRange
    /// 用于临时替换的等长字符串
    var placeholder: String
}
  • 临时替换

因为#话题#@提及用户可以同时存在,所以需要考虑可能互相影响的问题,比如@提及用户中间可能出现#,导致前后话题的正则匹配发生错乱。

解决方案是:先使用一个@开头且与@提及用户等长的字符串替换@提及用户,再执行#话题#的正则匹配,最后再换回来。

2.整体删除

删除操作分为两步:第一次点删除仅选中整个用户名(提醒用户是整体删除);第二次点删除才真的删除文本。

func textView(_ textView: UITextView, shouldChangeTextIn range: NSRange, replacementText text: String) -> Bool {
    if text == "" {
        for (num, user) in usersArray.enumerated() { // usersArray 用于存放已选取的用户信息
            // ②删除选中的用户名
            if textView.selectedRange.location <= user.range.location && NSMaxRange(user.range) <= NSMaxRange(textView.selectedRange) {
                textView.replace(textView.selectedTextRange ?? UITextRange(), withText: "")
                return false
            }
            // ①选中用户名
            if textView.selectedRange.length == 0 && (textView.selectedRange.location == user.range.location + user.range.length) {
                textView.selectedRange = user.range
                return false
            }
        }
    }
}

到此这篇关于iOS UITextView 实现类似微博的话题、提及功能的文章就介绍到这了,更多相关iOS UITextView微博话题内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • iOS开发中Swift3 监听UITextView文字改变的方法(三种方法)

    在项目中使用文本输入框出UITextField之外还会经常使用 UITextView ,难免会有需求监听UITextView文本框内文本数量.下面介绍在swift3中两种常用方式 方式一: 全局通知 1.注册通知 在合适位置注册监听UITextView文本变化的全局通知 //UITextView 监听开始输入的两种方法 //方法一:通知 NotificationCenter.default.addObserver(self, selector: #selector(ComposeVC.textV

  • iOS UITextField、UITextView只限输入中文、英文、数字及实时限制字符个数的封装实现代码

    引言需求:(输入框限制输入多少字符) 1.一个字母.符号.数字相当于一个字符 2.一个汉字相当于两个字符 3.不能输入特殊字符 4.不能输入emoji表情 直接上代码 一.注册通知 [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(textFieldChange:) name:UITextFieldTextDidChangeNotification object:nil]; [[NSNotifica

  • iOS UITextView 首行缩进 撤销输入 反撤销输入的实现代码

    最近公司涉及到作家助手的功能,能撤销输入的文字,并能反撤销被撤销掉的文字. 该功能类似ios系统的摇一摇撤销输入. 当时也特迷茫,不知道从何下手,后来搜索了大量的资料,终于完成了这个功能,现在就将该功能的实现写出来,共勉. 这个功能涉及到ios原生类:NSUndomanager.这个类挺强大.废话不多说,直接上代码. #import "ViewController.h" @interface ViewController ()<UITextViewDelegate>{ UI

  • iOS应用开发中的文字选中操作控件UITextView用法讲解

    1.创建并初始化 创建UITextView的文件,并在.h文件中写入如下代码: 复制代码 代码如下: #import <UIKit/UIKit.h>        @interface TextViewController : UIViewController <UITextViewDelegate>    {                  UITextView *textView;    }        @property (nonatomic, retain) UITex

  • iOS中的UITextView文字输入光标使用技巧小结

    1.创建并初始化 @property (nonatomic, strong) UITextView *textView; // 创建 self.textView = [[UITextView alloc] initWithFrame:self.view.frame]; // 设置textview里面的字体颜色 self.textView.textColor = [UIColor blackColor]; // 设置字体名字和字体大小 self.textView.font = [UIFont fo

  • iOS UITextView 实现类似微博的话题、提及用户效果

    目录 #话题# 1.高亮 2.点击事件 @提及用户 1.高亮 2.整体删除 最近接了一个需求,在发布动态的时候,增加类似微博的#话题#.@提及用户的效果,在此做一简要记录. #话题# 最终效果是: 编辑过程中#话题内容#实时高亮 高亮部分可以响应点击事件 1.高亮 基本思路是:使用正则匹配出成对的#,再利用UITextView的富文本实现高亮效果. func refreshTopicStyle() { let regex = try! NSRegularExpression(pattern: "

  • iOS高仿微信相册界面翻转过渡动画效果

    点开微信相册的时候,想要在相册图片界面跳转查看点赞和评论时,微信会采用界面翻转的过渡动画来跳转到评论界面,好像是在图片界面的背面一样,点击完成又会翻转回到图片界面,这不同于一般的导航界面滑动动画,觉得很有意思,于是自己学着做了一下,其实也很简单,下面是实现的类似的效果图: 在图片界面点击右下角的查看评论会翻转到评论界面,评论界面点击左上角的返回按钮会反方向翻转回图片界面,真正的实现方法,与传统的导航栏过渡其实只有一行代码的区别,让我们来看看整体的实现. 首先我们实现图片界面,这个界面上有黑色的背

  • js实现仿微博滚动显示信息的效果

    相信大家空闲的时候都会上上微博,推特等社交网站,每次我登陆微博时,我都会留意一下它有什么变化,小的有一些布局的变化,大的有API接口的改变等. 在首页登陆微博时,我们可以看到一栏"大家正在说",它滚动显示着当前每个人发送的微博:刚看到这个效果觉得挺有趣的,所以我们将在接下来的文中介绍实现滚动显示微博信息的效果. 我们细细观察了微博的"大家正在说",它是通过由上往下滚动来实现不断显示微博的,而且每一天新微博都是通过淡入效果显示的. 图1 微博"大家正在说&q

  • iOS开发中TabBar再次点击实现刷新效果

    需求 之前已经实现了自定义TabBar,如图所示: 自定义TabBar.jpeg 现在需要实现一个类似今日头条TabBar的功能 -- 如果继续点击当前TabBar的选中项,那么该界面需要刷新UITableView. 分析 既然已经自定义了TabBar,那么最简单的就是在自定义中给TabBar中需要的UITabBarButton添加事件 -- 点击就发送通知,并且将当前的索引传出去.对应的界面监听通知,拿到索引比对,如果和当前索引一致,就执行对应的操作. 实现 1. 自定义TabBar的layo

  • iOS点击文字按钮变转圈加载效果

    本文实例为大家分享了iOS点击文字按钮变转圈加载效果的相关代码,供大家参考,具体内容如下 实现效果: 实现代码: // 画弧线 - (void)drawHalfCircle { loadingLayer = [self drawCircle]; // 这个是用于指定画笔的开始与结束点 loadingLayer.strokeStart = 0.0; loadingLayer.strokeEnd = 0.75; } - (CAShapeLayer *)drawCircle { CGRect fram

  • iOS开发中仿Tumblr点赞心破碎动画效果

    最近Tumblr轻博客无论是web端还是移动端,都非常受欢迎,简单调研了一下,其中动画是我感兴趣的,特此写了个仿Tumblr点赞心破碎动画: 1.首先看下效果: 2.模仿Tumblr中的效果应用如下: 原理:使用按钮点击Action增加两个事件,通过改变背景hidden和frame,切换图片,增加动画效果等: setupUI及touch Action: <span style="font-size:14px;">- (void)setupUI { // 点击的btn UIB

  • js实现类似菜单风格的TAB选项卡效果代码

    本文实例讲述了js实现类似菜单风格的TAB选项卡效果代码.分享给大家供大家参考.具体如下: 这是一款基于javascript实现的一组简洁选项卡代码,类似菜单风格的TAB选项卡,没有使用图片,因此有些地方处理的还不太到位,不介意使用图片修饰的朋友可以再次美化这上选项卡,风格有点类似于菜单. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-menu-style-tab-nav-codes/ 具体代码如下: <html xmlns="ht

  • Android编程实现类似天气预报图文字幕垂直滚动效果的方法

    本文实例讲述了Android编程实现类似天气预报图文字幕垂直滚动效果的方法.分享给大家供大家参考,具体如下: 在很多天气或者新闻的应用中,我们都能看到一些字幕滚动的效果,最简单的实现为跑马灯效果,用系统提供的属性即可实现. 复杂一些的就需要自己去用自定义控件实现. 比如 让TextView 实现垂直滚动. 这里我要讲的是垂直滚动的字幕效果,并且内容并不仅为文字,还可以加入图片或者其他元素. 废话不多说,还是直接上效果图: 首先还是看一下核心的实现: 目前我的做法是重写了ScrollView,对外

  • jQuery实现类似淘宝网图片放大效果的方法

    本文实例讲述了jQuery实现类似淘宝网图片放大效果的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <title>类似淘宝网的图片放大代码</title> <script type="

随机推荐