1. 云栖社区>
  2. >
  3. 正文

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

作者:用户 来源:互联网 时间:2016-09-17 18:40:26

属性

Swift 文本框textView图文混排的例子 - 摘要: 本文讲的是Swift 文本框textView图文混排的例子, 我们使用文本框(UITextView)时,除了输入文字外,可能还会想在里面插入一些图片。或者有一些图文混排的内容需要展示出来。 这个只需要通过 textView 的属性化文本即可实现。j将图片以附件的形式插入即可。 本文通过样例


我们使用文本框(UITextView)时,除了输入文字外,可能还会想在里面插入一些图片。或者有一些图文混排的内容需要展示出来。 这个只需要通过 textView 的属性化文本即可实现。j将图片以附件的形式插入即可。

本文通过样例演示如何实现 textView 的图文混排,同时还可以选择插入图片的模式,是保持原图大小,还是自适应尺寸(这些可以混合使用的。)

1,效果图

(1)不改变插入图片的大小

Swift 文本框textView图文混排的例子-swift图文混排

 

 

(2)让图片与行高保持一致。这样图片就不会撑大行高,同时会与文字的大小保持一致。适合用来插入表情图标。

Swift 文本框textView图文混排的例子-textkit实现图文混排

 


(3)让图片占满一行。适合普通图片或者大图的插入。

Swift 文本框textView图文混排的例子-textview图文混排

 

 

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
}

以上是云栖社区小编为您精心准备的的内容,在云栖社区的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索属性 swift图文混排、textkit实现图文混排、textview图文混排、ios textview图文混排、coretext 图文混排,以便于您获取更多的相关知识。