So recently I’ve been working on an iOS version of my Mock My Words app. It’s pretty simple in functionality so I wanted to compensate with a nice user interface. The main functionality requires that a user enter (or paste) in text of pretty much any size. Oftentimes iOS text entry with a UITextField, but that only offers single line input. For multi-line input, you have to use UITextView 😔. After throwing that in my app I was rather unimpressed with how it looked. So, I decided to put my own spin on it. It took a bit of research and I’m pleased with how it turned out so I thought I’d share with the community on how customize the UITextView object to your own needs.
所以最近我一直在研究我的Mock My Words应用的iOS版本。 它的功能非常简单,因此我想用一个不错的用户界面来弥补。 主要功能要求用户输入(或粘贴)几乎任何大小的文本。 通常,iOS文本输入带有UITextField ,但仅提供单行输入。 对于多行输入,必须使用UITextView😔 。 在将它扔到我的应用程序中后,我对它的外观没有任何印象。 因此,我决定自己动手做。 经过一些研究,我对结果很满意,因此我想与社区分享如何根据自己的需求自定义UITextView对象。
创建UITextView (Create the UITextView)
I’m building this app programmatically, so the first step is to instantiate the UITextView object. If you’re using a storyboard, you’ll want to create an IBOutlet and then follow the other steps the same. I declared my UITextView at the class level of the view controller it’s used in, and the one-line looks like
我正在以编程方式构建此应用程序,因此第一步是实例化UITextView对象。 如果使用情节提要,则需要创建IBOutlet,然后按照其他步骤进行操作。 我在使用它的视图控制器的类级别上声明了我的UITextView,单行看起来像
let textBox = UITextView()
Please note, all of the following code should be executed by viewdidload(), but feel free to extract it to a function and then call that function from viewDidLoad()
请注意,以下所有代码均应由viewdidload()执行 ,但可以随时将其提取到函数中,然后从viewDidLoad()调用该函数。
将其添加到视图 (Add it to the view)
Next, you have to add it to the view hierarchy so it actually shows up. If you’re using a storyboard, skip this step.
接下来,您必须将其添加到视图层次结构中,以便它实际显示出来。 如果您使用情节提要,请跳过此步骤。
view.addSubview(textBox)textBox.translatesAutoresizingMaskIntoConstraints = false
设置代表 (Set the delegate)
If you actually want your app to react to actions the user may take, you need to make your view controller extend UITextViewDelegate, and then have the following line in your configuration.
如果您确实希望您的应用对用户可能采取的动作做出React,则需要使您的视图控制器扩展UITextViewDelegate,然后在配置中添加以下行。
textBox.delegate = self
自定义文本框 (Customize the textbox)
You can use creative freedom here, but here’s how I laid out my textbox view.
您可以在此处使用创作自由,但这是我布置文本框视图的方式。
textBox.autocorrectionType = .notextBox.text = placeholderTexttextBox.backgroundColor = .secondarySystemBackgroundtextBox.textColor = .secondaryLabeltextBox.font = UIFont.preferredFont(forTextStyle: .body)textBox.layer.cornerRadius = 20textBox.textContainerInset = UIEdgeInsets(top: 10, left: 10, bottom: 10, right: 10)
给它一个阴影 (Give it a shadow)
Again, this is optional, but this is how I gave my textbox a shadow so it has a material design feel.
同样,这是可选的,但这是我给文本框加阴影的方式,从而使它具有材料设计的感觉。
textBox.layer.shadowColor = UIColor.gray.cgColor;textBox.layer.shadowOffset = CGSize(width: 0.75, height: 0.75)textBox.layer.shadowOpacity = 0.4textBox.layer.shadowRadius = 20textBox.layer.masksToBounds = false
告诉你的观点放在哪里 (Tell your view where to put it)
Your method for doing this will definitely vary, but I used
您执行此操作的方法肯定会有所不同,但是我使用了
NSLayoutConstraint.activate([insert your array of constraints here])
And that’s it! You have a custom textbox that kind of floats above the view you put it in.
就是这样! 您有一个自定义文本框,该文本框在您放置的视图上方浮动。
If you like the way this turned out and you’re thinking about using it in your own project, you should consider refactoring it into it’s own object that you can reuse! The process isn’t too complex, and if you’d benefit from a tutorial on doing it, let me know in a response 👨🔬
如果您喜欢这种方式的结果,并且正在考虑在自己的项目中使用它,则应考虑将其重构为可以重用的自己的对象! 该过程不太复杂,如果您从中受益匪浅,请在回复中告诉我
翻译自: https://medium.com/swlh/how-to-customize-uitextview-6471ad085ec8