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

 更新时间:2022年06月07日 11:27:07   作者:XboxYan  
这篇文章主要介绍了iOS UITextView 实现类似微博的话题、提及功能,基本思路是使用正则匹配出成对的#,再利用UITextView的富文本实现高亮效果,需要的朋友可以参考下

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

#话题#

最终效果是:

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

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

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微博话题内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • NSURLSession跨域重定向透传HTTP Header问题解决

    NSURLSession跨域重定向透传HTTP Header问题解决

    这篇文章主要为大家介绍了NSURLSession跨域重定向透传HTTP Header问题解决方案,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-11-11
  • iOS开发网络编程之断点续传

    iOS开发网络编程之断点续传

    在下载较大的文件的时候,一次不能下载完毕,这就需要用到断点续传,那么在IOS开发中该如何实现呢,下面跟着小编一起通过本文来学习下。
    2016-08-08
  • IOS安装CocoaPods详细教程

    IOS安装CocoaPods详细教程

    这篇文章主要为大家详细介绍了IOS安装CocoaPods教程,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-05-05
  • iOS实现聊天输入框功能

    iOS实现聊天输入框功能

    大家都经常使用微信聊天功能,在没事的时候就会想微信聊天输入框的实现过程,很无聊吧。今天小编抽空给大家分享iOS实现聊天输入框功能,感兴趣的朋友跟随脚本之家小编一起看看吧
    2018-02-02
  • IOS实现圆形图片效果的两种方法

    IOS实现圆形图片效果的两种方法

    这篇文章介绍在IOS中如何实现圆形图片,实现后的效果很赞,有需要的可以参考借鉴。
    2016-08-08
  • iOS对象指针和基础数据类型的强转详解

    iOS对象指针和基础数据类型的强转详解

    最近在做一些小功能,忽然发现有的基础数据转换居然都忘记了。于是想着要赶紧整理下记下来!本文就是记录的一些内容,主要介绍了iOS中对象指针和基础数据类型的强转,有需要的朋友们可以参考借鉴,下面来一起学习学习吧。
    2016-11-11
  • iOS中3DTouch预览导致TableView滑动卡顿问题解决的方法

    iOS中3DTouch预览导致TableView滑动卡顿问题解决的方法

    这篇文章主要给大家介绍了关于iOS中3DTouch预览导致TableView滑动卡顿问题解决的方法,文中通过示例代码介绍的非常详细,对同样遇到的朋友们具有一定的参考学习价值,需要的朋友们下面随着小编来一起看看吧。
    2018-03-03
  • IOS提醒用户重新授权打开定位功能

    IOS提醒用户重新授权打开定位功能

    这篇文章主要介绍了IOS提醒用户重新授权打开定位功能的相关资料,需要的朋友可以参考下
    2015-12-12
  • UIScrollView实现六棱柱图片浏览效果

    UIScrollView实现六棱柱图片浏览效果

    这篇文章主要为大家介绍了UIScrollView实现六棱柱图片浏览效果示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-07-07
  • iOS中利用CAEmitterLayer实现粒子动画详解

    iOS中利用CAEmitterLayer实现粒子动画详解

    粒子效果应该对现在很多人来说并不陌生,我们之前也分享了一些相关文章,下面这篇文章主要给大家介绍了关于iOS中利用CAEmitterLayer实现粒子动画的相关资料,文中介绍的非常详细,需要的朋友们下面来一起看看吧。
    2017-06-06

最新评论