淺析微博編輯頁面圖文混排中遇到的問題，淺析圖文

淺析微博編輯頁面圖文混排中遇到的問題，淺析圖文

在表情鍵盤的圖文混排中，會有很多細節問題。有的時候不理解其中的原因是很難改正的。本文主要是整理我遇到的各種問題及解決方案，供大家分享。如果你以前也遇到過類似的問題可以用我的方法修正了，希望能夠對博友們有所協助。本文使用swift語言，OC的可能看不慣，但大多方法基本是一樣的就是文法不同。

上期回顧：關於微博編輯頁面添加表情鍵盤 

如果你不是在董鉑然部落格園看到本文，請點擊查看原文。

1.預設每添加一個表情是添加到最後，但是我們想添加到游標位置

預設做法（其中的str是通過點擊某個表情通過代理傳來的表情字串）

//         會把使用者選擇的表情，拼接到最後！            textView.text = textView.text + (str ?? "")!

 如果想插入到游標位置

            // 在使用者游標位置插入表情文本            textView.replaceRange(textView.selectedTextRange!, withText: str!)

 2.添加後的表徵圖大小不一樣。

解決方案：給所有的range設定一個統一的格式

           // 設定整個屬性字串中的文字屬性            let range = NSMakeRange(0, strM.length)            // 讓 可變的屬性文本 的字型 和 textView 的保持一致！            strM.addAttribute(NSFontAttributeName, value: textView.font, range: range)    

 

3.因為前面用的是替換文本，所以在中間插入表情之後，游標會跳到段落末尾

解決方案：提前記錄游標的位置，然後在替換完文本位置之後再複原游標位置

在恢複游標的時候應該是location+1，如果不加1就是插入後游標在表情的前面

            // 記錄游標位置 location 對應游標的位置            var location = textView.selectedRange.location            // 直接替換文本結果會導致游標移動到文本末尾            textView.attributedText =  strM            // 重新設定游標位置            textView.selectedRange = NSMakeRange(location + 1, 0)

 

4.但是textView裡顯示的是textView.AttrubuteText。富文本是對象無法直接發送出去。

解決方案：

①首先在每次點擊表情時把textView.AttrubuteText 列印出來 可以看到大批量的列印，輸出的是字典。區分後可以看出如果是表情，在字典裡有NSAttachment的索引值。而文本沒有

②通過以上那點的區別，遍曆這個大批量列印，列印出dict和Range，把所有的文本和表情都區分開

列印是:

③利用這個思路，寫一個textAttrubute的子類，並在這個方法中給表情對應的文本符號賦值，以後後來取用

import UIKitclass SXEmoteTextAttachment: NSTextAttachment {    // 表情對應的文本符號    var emoteString: String?        /// 返回一個 屬性字串    class func attributeString(emoticon: Emoticon, height: CGFloat) -> NSAttributedString {        var attachment = SXEmoteTextAttachment()        attachment.image = UIImage(contentsOfFile: emoticon.imagePath!)        attachment.emoteString = emoticon.chs                // 設定高度        attachment.bounds = CGRectMake(0, -4, height, height)                // 2. 帶映像的屬性文本        return NSAttributedString(attachment: attachment)    }}

④在點擊某個圖片時，調用方法返回一個屬性字串 ，在這一句調用.attributeString時已自動將表情轉化成文本符號

        var attributeString = SXEmoteTextAttachment.attributeString(emoticon, height: font.lineHeight)

⑤定義一個result用於記錄拼接後的字串

    /// 返迴文本框中轉換完成後的字串 - （將表情圖片轉換成Emoji）    func fullText() -> String {        var result = String()        let textRange = NSMakeRange(0, attributedText.length)                attributedText.enumerateAttributesInRange(textRange, options: NSAttributedStringEnumerationOptions.allZeros, usingBlock: { (dict, range, _) -> Void in                        if let attachment = dict["NSAttachment"] as? SXEmoteTextAttachment {                // 圖片                result += attachment.emoteString!            } else {                result += (self.attributedText.string as NSString).substringWithRange(range)            }        })        println("微博文本：\(result)")        return result    }

 ⑥最後就是在發微博的時候修改下參數，不是發textView.AttrubuteText 也不是發textView.text .而是發拼接後的

    /// 發微博    @IBAction func sendStatus(sender: UIBarButtonItem) {        let urlString = "https://api.weibo.com/2/statuses/update.json"                if let token = AccessToken.loadAccessToken()?.access_token{            // 這裡調用fullText方法 返回記錄並拼接後的            let params = ["access_token":token,"status":textView.fullText()]                        let net = NetworkManager.sharedManager                        net.requestJSON(.POST, urlString, params){ (result, error) -> () in                SVProgressHUD.showInfoWithStatus("微博發送成功")                self.dismissViewControllerAnimated(true, completion: nil)            }        }    }

 ⑦到此就完成了，編輯微博內顯示，和發送微博時的文本分開治理，互不衝突。

 

5.解除發佈時，撰寫微博控制器快速就縮回了，回到了首頁鍵盤才緩慢縮回。

解決方案：

    /// 取消按鈕點擊事件    @IBAction func cancel(sender: UIBarButtonItem) {                /// 為了更好的使用者體驗先縮鍵盤再縮文字框        self.textView.resignFirstResponder()        dismissViewControllerAnimated(true, completion: nil)    }

 

6.在輸入框中，表情和文字在水平方向上並不是對齊狀態，上下有差值

解決方案：微調

            let height = textView.font.lineHeight            attachment.bounds = CGRectMake(0, -4, height, height)

 

7.只有在輸入文字時，placeholder和發送按鈕才會隱藏和點亮。點擊插入圖片時沒有反應

解決方案：手動讓使用者在輸入圖片時也調用代理方法

在圖片點擊代理方法emoticonsViewControllerDidSelectEmoticon裡

        // 手動調用代理方法 - 是否能夠插入文本        if textView(textView, shouldChangeTextInRange: textView.selectedRange, replacementText: str!) {            /// 設定輸入框的文字            if emoticon.chs != nil {                /// 從分類的方法中取                textView.setTextEmoticon(emoticon)                // 手動調用 didChage 方法                textViewDidChange(textView)                            }else if emoticon.emoji != nil {                /// 預設是把表情拼接到最後， 用這行代碼是在游標位置插入文本                textView.replaceRange(textView.selectedTextRange!, withText: emoticon.emoji!)            }        }

 其中的textViewDidChange 是用來控制按鈕狀態

    func textViewDidChange(textView: UITextView) {        let fullText = self.textView.fullText()                self.textView.placeHolderLabel!.hidden = !fullText.isEmpty        sendButton.enabled = !fullText.isEmpty    }

 

 

8.在控制最大輸入數時一個表情如“[花心]” 佔了8個位元組

原來是

        // 微博文字通常限制 140 個字        if textView.text.lengthOfBytesUsingEncoding(NSUTF8StringEncoding) + text.lengthOfBytesUsingEncoding(NSUTF8StringEncoding) > 140 {            return false        }

改成

        // 微博文字通常限制 140 個字        if (self.textView.fullText() as NSString).length + (text as NSString).length > 140 {            return false        }

 

如果你不是在董鉑然部落格園看到本文，請點擊查看原文。

 歡迎關注！