Using UIToolBar to custom style for paragraph

Mở đầu:

UIToolBar chắc đã khá quên thuộc đối với mọi người. UIToolBar được sử dụng nhiều trong rất nhiều app để control các chức năng như:

• App nghe nhạc: play, pause, stop, next, previous, ...
• App đọc tin tức: new, back, next, bookmark, share, save, delete, ...
• ...

Bài này mình chỉ share một example đơn giản khi sử dụng UIToolBar để change style cho đoạn văn thêm sinh động.

Các bước tiến hành:

1. Tạo UIToolBar custom:

• Tạo file ToolBarCustom.xib: Gồm 3 UIBarButtonItem tương ứng với change font size, change aligment, change color. Add xen kẽ 2 Flexible Space Bar Button Item để căn đều các item.

• Tạo file ToolBarCustom.swift: Gồm các protocol và các action đã liên kết với các item của file ToolBarCustom.xib.

  import UIKit
  
  protocol ToolBarCustomDelegate: class {
      func changeFontSizeParagraph()
      func changeFontColorParagraph()
      func changeAlignmentParagraph()
  }
  
  class ToolBarCustom: UIToolbar {
  
      weak var toolBarCustomDelegate: ToolBarCustomDelegate?
  
      class func instanceFromNib() -> ToolBarCustom {
          return UINib(nibName: "ToolBarCustom", bundle: nil).instantiateWithOwner(nil, options: nil)[0] as! ToolBarCustom
      }
  
      @IBAction func changeFontSizeParagraph(sender: AnyObject) {
          toolBarCustomDelegate?.changeFontSizeParagraph()
      }
  
      @IBAction func changeFontColorParagraph(sender: AnyObject) {
          toolBarCustomDelegate?.changeFontColorParagraph()
      }
  
      @IBAction func changeAlignmentParagraph(sender: AnyObject) {
          toolBarCustomDelegate?.changeAlignmentParagraph()
      }
  }
  

2. Tạo file ProcessParagraph.swift:

• Define 3 font size:

  enum FontSize:CGFloat {
      case small = 10
      case medium = 20
      case large = 30
  }
  

• Define 3 Color: black, green và brown

  let firstColor = UIColor.blackColor()
  let secondColor = UIColor.greenColor()
  let thirdColor = UIColor.brownColor()
  

• Viết function detect NSRange (gồm location và lenghth) paragraph: Để xác định paragraph nào cần change style khi focus vào UITextView. Tức là khi con trỏ nằm ở đâu thì nó sẽ detect paragraph tương ứng với nó ở đó. P/s: Để đơn giản " " là ký tự phần định là 1 paragraph.

  func detectParagraph(location:Int, textView:UITextView) -> NSRange? {
  
          var paragraphs:[String] = textView.text.componentsSeparatedByString("
  ");
  
          var range: NSRange?
  
          for index in 0 ..< paragraphs.count {
              if (location >= (textView.text as NSString) .rangeOfString(paragraphs[index]).location) {
                  range = (textView.text as NSString) .rangeOfString(paragraphs[index])
              }
          }
  
          return range
  }
  

• Viết function change font size:

  func setFontSizeParagraph(rangeParagraph:NSRange, textView:UITextView) {
  
          // get current attribute of cursor location
          let dic = textView.textStorage.attributesAtIndex(rangeParagraph.location, effectiveRange: nil)
  
          var fontSize:FontSize
  
          // change font size small - medium - large
          if dic[NSFontAttributeName] as! NSObject == (UIFont.systemFontOfSize(FontSize.medium.rawValue)) {
              fontSize = FontSize.large
          } else if dic[NSFontAttributeName] as! NSObject == UIFont.systemFontOfSize(FontSize.large.rawValue) {
              fontSize = FontSize.small
          } else {
              fontSize = FontSize.medium
          }
  
          // add attribute font size for paragraph
          textView.textStorage.addAttribute(NSFontAttributeName, value: UIFont.systemFontOfSize(fontSize.rawValue), range: NSMakeRange(rangeParagraph.location, rangeParagraph.length))
  }
  

• Viết function change aligment:

  func setAlignmentParagraph(rangeParagraph:NSRange, textView:UITextView) {
  
          // get current attribute of cursor location
          let dic = textView.textStorage.attributesAtIndex(rangeParagraph.location, effectiveRange: nil)
  
          let paragraphStyle:NSMutableParagraphStyle = NSMutableParagraphStyle()
  
          // change alignment left - center - right
          if (dic[NSParagraphStyleAttributeName]?.alignment == NSTextAlignment.Left) {
              paragraphStyle.alignment = NSTextAlignment.Center
          } else if (dic[NSParagraphStyleAttributeName]?.alignment == NSTextAlignment.Center) {
              paragraphStyle.alignment = NSTextAlignment.Right
          } else {
              paragraphStyle.alignment = NSTextAlignment.Left
          }
  
          // add attribute alignment for paragraph
          textView.textStorage.addAttribute(NSParagraphStyleAttributeName, value: paragraphStyle, range: NSMakeRange(rangeParagraph.location, rangeParagraph.length))
  }
  

• Viết function change font color:

  func setFontColorParagraph(rangeParagraph:NSRange, textView:UITextView) {
          // get current attribute of cursor location
          let dic = textView.textStorage.attributesAtIndex(rangeParagraph.location, effectiveRange: nil)
  
          // color of cursor location
          let currentColor = dic[NSForegroundColorAttributeName] as? UIColor
  
          // new color to set color for paragraph
          var newColor:UIColor
  
          // change color black - green - brown
          if currentColor == firstColor {
              newColor = secondColor;
          } else if currentColor == secondColor {
              newColor = thirdColor
          } else {
              newColor = firstColor
          }
  
          // add attribute color for paragraph
          textView.textStorage.addAttribute(NSForegroundColorAttributeName, value: newColor, range: NSMakeRange(rangeParagraph.location, rangeParagraph.length))
  }
  

3. Main.storyboard:

Add một UITextView vào storyboard là dc.