自定义UITextView自动完成功能

时间:2019-05-15 11:38:48

标签: ios swift xcode uitableview uitextview

我正在尝试为科学应用创建自定义自动填充字段(例如在搜索栏中),该定义允许将定义添加到UITextView。该过程将是这样。

  1. 用户点击“键盘附件”中的按钮,并且该按钮在UITextView中添加“阻止”
  2. 键入“块”时,它下面显示TableView?,并带有元素周期表元素的建议。
  3. 通过单击TableView中的建议(或按Enter键并选择第一个建议)来选择元素,然后制作一个显示元素周期表元素名称和定义的块。 我很快使用笔记应用程序BEAR模拟了我的想法。它具有相似的功能,只是没有最后一步:https://imgur.com/a/1RrcUkC

我对此很陌生,所以在此先感谢您对所有这些命名约定的任何建议以及有关如何实现此目标的任何相关信息或解释。

1 个答案:

答案 0 :(得分:0)

这是实现它的简单方法。

我已经使用名为DropDown的第三方库来显示将特定单词添加到UITextView中时的下拉列表。

import UIKit
import DropDown

class ViewController: UIViewController, UITextViewDelegate {

    @IBOutlet weak var textView: UITextView!

    let dropDown = DropDown()

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
    }

    func textViewDidChange(_ textView: UITextView) {

        if textView.text.last == "#" {

            let endPosition: UITextPosition = textView.endOfDocument

            //Get courser position to show dropdown
            let rect = textView.caretRect(for: endPosition)

            //Create a custom view to provide anchorView to DropDown
            let customView = UIView(frame: CGRect(x: rect.origin.x, y: rect.origin.y, width: 200, height: 0))
            textView.addSubview(customView)

            dropDown.anchorView = customView  // UIView or UIBarButtonItem

            // The list of items to display. Can be changed dynamically
            dropDown.dataSource = ["Car", "Motorcycle", "Truck"]

            // Action triggered on selection
            dropDown.selectionAction = { [unowned self] (index: Int, item: String) in
                print("Selected item: \(item) at index: \(index)")
                //remove Custom view as we no longer needed it.
                customView.removeFromSuperview()

                //Set your text accourding to selection from dropdown item.
                textView.text = textView.text.dropLast() + " " + "\(item)"
            }

            dropDown.show()
        }
    }
}

我添加了评论以供解释。

您的结果将是:

enter image description here

HERE是有关更多信息的演示项目。