グラフィックブレンドの実装について

iOS図文混在
画像の混在は、すでに多くのアプリに欠かせない機能となっている.すなわち、文字に画像、特にチャットとコメントのインタフェース、文字に表情画像を加える.では、この機能をどのように実現するのでしょうか.今ではこの機能を実現するフレームワークが多いが、実現原理を知る必要がある.最近、メモを整理して、以下のように記録し、この方面のよく知らない子供靴にも役立つことを望んでいる.

構想

図文混在を実現するには、まずどのようなコントロールで文字と画像を展示するかを明確にし、複数行の文字を展示できるのは2つのコントロール、UILabelとUITextView

である.

表情キーボードはシステム表情キーボードかカスタム表情キーボードか、システム表情はemoji表情、16進数文字列であり、特別な処理をする必要がなく、

を示すことができる.

カスタム表情キーボードであれば、一般的には小さなアイコンが多く、画像名があるべきで、対応する表情名があるべきで、例えば:[ほほほ]

カスタム表情の場合、一般的には、属性文字列を使用してローカル文字色を変更し、正規表現で表情名を取得し、属性文字列に変換してサイズを設定し、最後にコントロールに

を表示します.

もちろん属性文字列、あるものはリッチテキスト

と呼ばれています

インプリメンテーション

一般的に、この機能には、多くの場所で使用する必要があります.私はカプセル化し、NSStringに分類を書くことができます.属性文字列管理者を作成して実現することもできます.

class TCAttibuteStingManager {
    
}

extension TCAttibuteStingManager {
    
    class func greateNormalAttibutesString(_ username: String, _ message: String) -> NSAttributedString {
        let str = username + message
        
        //  NSMutableAttributedString
        let attrStr = NSMutableAttributedString(string: str)
        
        //  
        let nameRange = NSRange(location: 0, length: username.characters.count)
        attrStr.setAttributes([NSForegroundColorAttributeName: UIColor.orange], range: nameRange)
        
        return attrStr
    }
}

以上は普通文字列を属性文字列に変換する関数だけで、名前のハイライトを実現することができ、他の文字の普通の状態のスタイルは、図文の混在はさらに進んでいるだけで、以下のようにします.

class func greateChatMessage(_ username: String, _ message: String, font: UIFont) -> NSAttributedString {
        let str = username + ":" + message
        
        let attrStr = NSMutableAttributedString(string: str)
        
        let nameRange = NSRange(location: 0, length: username.characters.count)
        attrStr.setAttributes([NSForegroundColorAttributeName: UIColor.orange], range: nameRange)
        
        //  ， ：i [ ] you [ ] girl [ ]！
        // [] ， 
        //  ， 
        // .*?
        //  
        let pattern = "\\[.*?\\]"
        guard let reg = try? NSRegularExpression(pattern: pattern, options: .caseInsensitive) else {
            return attrStr
        }
        
        //  
        let range = NSRange(location: 0, length: str.characters.count)
        let results = reg.matches(in: str, options: [], range: range)
        
        //  
        //  
        for i in (0..

以上から分かるように、コアエージェントはforループ内部であり、NSTextAttachmentを作成し、マッチング結果に基づいてNSTextAttachmentオブジェクトを属性文字列に変換する!これで、簡単な図文混成ができました.
チャットの記録、キャスターにプレゼントのメッセージを送るなど、画像をダウンロードする必要があります.コードは以下の通りです.

class func createImageMessage(_ userName: String, _ imageName: String, _ imageUrl: String, font: UIFont) -> NSAttributedString {
        let str = userName + ":xxxxxx" + imageName
        
        let attrStr = NSMutableAttributedString(string: str)
        
        let nameRange = NSRange(location: 0, length: userName.characters.count)
        attrStr.setAttributes([NSForegroundColorAttributeName: UIColor.orange], range: nameRange)
        
        let imageNameRange = (imageName as NSString).range(of: imageName)
        attrStr.setAttributes([NSForegroundColorAttributeName: UIColor.orange], range: imageNameRange)
        
        //  
        guard let image = KingfisherManager.shared.cache.retrieveImageInMemoryCache(forKey: imageUrl) else {
            return attrStr
        }
        
        let attachment = NSTextAttachment()
        attachment.image = image
        attachment.bounds = CGRect(x: 0, y: -4, width: font.lineHeight, height: font.lineHeight)
        let imageAttr = NSAttributedString(attachment: attachment)
        
        //  
        attrStr.append(imageAttr)
        
        return attrStr
}

以上の3つの関数は、直接コピーすれば使用できますが、リンクのハイライトなど、他のマッチングルールが必要で、子供靴たちはさらに拡張することができます.