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

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

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

1，效果图
（1）不改变插入图片的大小

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

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

2，样例代码

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116

import  UIKit   class  ViewController :  UIViewController  {            //图文混排显示的文本区域      @IBOutlet  weak  var  textView:  UITextView !            //文字大小      let  textViewFont =  UIFont .systemFont(ofSize: 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.insert(attStr, at: 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 =  CGRect (x: 0, y: -4, width: textView.font!.lineHeight,                                            height: textView.font!.lineHeight)          }  else  if  mode == .fitTextView {              //撑满一行              let  imageWidth = textView.frame.width - 10              let  imageHeight = image.size.height/image.size.width*imageWidth              imgAttachment.bounds =  CGRect (x: 0, y: 0, width: imageWidth, height: imageHeight)          }                    imgAttachmentString =  NSAttributedString (attachment: imgAttachment)                    //获得目前光标的位置          let  selectedRange = textView.selectedRange          //插入文字          mutableStr.insert(imgAttachmentString, at: 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)      }            //插入文字      @IBAction  func  btnClick4(_ sender:  AnyObject ) {          insertString( "hangge.com" )      }            override  func  didReceiveMemoryWarning() {          super .didReceiveMemoryWarning()      } }   //插入的图片附件的尺寸样式 enum  ImageAttachmentMode  {      case  ` default `   //默认（不改变大小）      case  fitTextLine   //使尺寸适应行高      case  fitTextView   //使尺寸适应textView }

源码下载： hangge_1213.zip

原文出自： www.hangge.com   转载请保留原文链接： http://www.hangge.com/blog/cache/detail_1213.html