你好,歡迎來到IOS教程網

 Ios教程網 >> IOS使用技巧 >> IOS7技巧 >> Swift 文本框textView圖文混排的例子

Swift 文本框textView圖文混排的例子

編輯:IOS7技巧
文本框textView圖文混排要怎麼實現呢,如果不知道實現我們來看小編整理的 這篇Swift 文本框textView圖文混排的例子吧。


我們使用文本框(UITextView)時,除了輸入文字外,可能還會想在裡面插入一些圖片。或者有一些圖文混排的內容需要展示出來。 這個只需要通過 textView 的屬性化文本即可實現。j將圖片以附件的形式插入即可。

本文通過樣例演示如何實現 textView 的圖文混排,同時還可以選擇插入圖片的模式,是保持原圖大小,還是自適應尺寸(這些可以混合使用的。)

1,效果圖

(1)不改變插入圖片的大小

 

 

(2)讓圖片與行高保持一致。這樣圖片就不會撐大行高,同時會與文字的大小保持一致。適合用來插入表情圖標。

 


(3)讓圖片占滿一行。適合普通圖片或者大圖的插入。

 

 

2,樣例代碼

import UIKit
 
class ViewController: UIViewController {
    
    //圖文混排顯示的文本區域
    @IBOutlet weak var textView: UITextView!
    
    //文字大小
    let textViewFont = UIFont.systemFontOfSize(22)
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        //初始化顯示默認內容
        insertString("歡迎歡迎!")
        insertPicture(UIImage(named: "icon")!, mode:.FitTextLine)
        insertString("\n歡迎訪問:")
        insertPicture(UIImage(named: "logo")!)
        insertPicture(UIImage(named: "bg")!, mode:.FitTextView)
    }
    
    //插入文字
    func insertString(text:String) {
        //獲取textView的所有文本,轉成可變的文本
        let mutableStr = NSMutableAttributedString(attributedString: textView.attributedText)
        //獲得目前光標的位置
        let selectedRange = textView.selectedRange
        //插入文字
        let attStr = NSAttributedString(string: text)
        mutableStr.insertAttributedString(attStr, atIndex: selectedRange.location)
        
        //設置可變文本的字體屬性
        mutableStr.addAttribute(NSFontAttributeName, value: textViewFont,
                                range: NSMakeRange(0,mutableStr.length))
        //再次記住新的光標的位置
        let newSelectedRange = NSMakeRange(selectedRange.location + attStr.length, 0)
        
        //重新給文本賦值
        textView.attributedText = mutableStr
        //恢復光標的位置(上面一句代碼執行之後,光標會移到最後面)
        textView.selectedRange = newSelectedRange
    }
    
    //插入圖片
    func insertPicture(image:UIImage, mode:ImageAttachmentMode = .Default){
        //獲取textView的所有文本,轉成可變的文本
        let mutableStr = NSMutableAttributedString(attributedString: textView.attributedText)
        
        //創建圖片附件
        let imgAttachment = NSTextAttachment(data: nil, ofType: nil)
        var imgAttachmentString: NSAttributedString
        imgAttachment.image = image
        
        //設置圖片顯示方式
        if mode == .FitTextLine {
            //與文字一樣大小
            imgAttachment.bounds = CGRectMake(0, -4, textView.font!.lineHeight,
                                              textView.font!.lineHeight)
        } else if mode == .FitTextView {
            //撐滿一行
            let imageWidth = textView.frame.width - 10
            let imageHeight = image.size.height/image.size.width*imageWidth
            imgAttachment.bounds = CGRectMake(0, 0, imageWidth, imageHeight)
        }
        
        imgAttachmentString = NSAttributedString(attachment: imgAttachment)
        
        //獲得目前光標的位置
        let selectedRange = textView.selectedRange
        //插入文字
        mutableStr.insertAttributedString(imgAttachmentString, atIndex: selectedRange.location)
        //設置可變文本的字體屬性
        mutableStr.addAttribute(NSFontAttributeName, value: textViewFont,
                                range: NSMakeRange(0,mutableStr.length))
        //再次記住新的光標的位置
        let newSelectedRange = NSMakeRange(selectedRange.location+1, 0)
        
        //重新給文本賦值
        textView.attributedText = mutableStr
        //恢復光標的位置(上面一句代碼執行之後,光標會移到最後面)
        textView.selectedRange = newSelectedRange
        //移動滾動條(確保光標在可視區域內)
        self.textView.scrollRangeToVisible(newSelectedRange)
    }
    
    //插入圖片1:保持原始尺寸
    @IBAction func btnClick1(sender: AnyObject) {
        insertPicture(UIImage(named: "logo")!)
    }
    
    //插入圖片2:適應行高
    @IBAction func btnClick2(sender: AnyObject) {
        insertPicture(UIImage(named: "icon")!, mode:.FitTextLine)
    }
    
    //插入圖片3:適應textView寬度
    @IBAction func btnClick3(sender: AnyObject) {
        insertPicture(UIImage(named: "bg")!, mode:.FitTextView)
    }
    
    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }
}
 
//插入的圖片附件的尺寸樣式
enum ImageAttachmentMode {
    case Default  //默認(不改變大小)
    case FitTextLine  //使尺寸適應行高
    case FitTextView  //使尺寸適應textView
}

  1. 上一頁:
  2. 下一頁:
蘋果刷機越獄教程| IOS教程問題解答| IOS技巧綜合| IOS7技巧| IOS8教程
Copyright © Ios教程網 All Rights Reserved