Add a TextView & constrain with programmatic auto layout: iOS Development

Max Nelson
A free video tutorial from Max Nelson
Lead iOS Development Engineer
4.0 instructor rating • 11 courses • 29,806 students

Learn more from the full course

iOS Notes App - Advanced Core Data, Navigation, & TableViews

Inject Core Data directly into UITableViews. UINavigationController, UIToolBar, NSLayoutConstraint, NSAttributedString.

04:32:31 of on-demand video • Updated May 2019

  • You will create a professional & well designed navigation hierarchy with UINavigationController, UIViewController & UITableViewController
  • Core Data - Advanced & Basic topics
  • UIToolBar, UINavigationBar, UIBarButtonItem
  • UITableView DataSource & Delegate Protocols
  • UITextView, UILabel, UIButton, UIStackView + StackView Nesting
  • NSAttributedString for complex, customized bodies of text
  • Apple's Human Interface Guidelines.
  • Upload an App to the App Store.
  • NSLayoutConstraint for 100% Programmatic User Interfaces & Layouts (Very clean, fast code.)
English [Auto] Hey there. Welcome back to the course. In this video I'm going to show you how you can use a UI text view inside of your applications and also how to constrain it with programmatic auto layout with nothing but constraints. All right. This is going to be super easy and I'm going to show you how to do it in this entire video game. So let's go ahead and let's head over to our note detail controller and let's constrain our text view onto this screen here so that we can type notes out. All right. So what you're going to want to do is you're going to want to first declare a text to view obviously or we're not really going to be able to do much with anything right. So let's go. Let's go ahead and say file private var text view. We'll set this equal to a type of UI text view and we will return a text view to this variable so we'll say let t f is equal to UI text view and then we will say text view dot text sorry T left out text equals text or notes go in here and we will say text view dot is edible as not edible but is editable is set to true. This will allow us to modify the text if you don't do that you can actually modify the text and then we will change the font to something like you I find that system font of size 18 with a font way of DA regular came. Next thing we'll do is we will return the TAF the text view and we will now add this to the sub view and constrain it within a set up UI function will write right now set up UI let's say file private function. Set up UI. And this is where we're gonna add our sub use and make the constraints game and activate them. So we'll also do that to the date label in the next video. So let's say T F dot translates ordering sizing masking and constraints as equal to False and since this is outside of that we have to put that in here. Okay. There's no reason not to put it in there. Let me make sure I type this function correctly. There we go. And you just want to activate that so that we can use programmatic outerwear. Otherwise you cannot. Okay. And we will say viewed out at sub view text view and then let's go ahead and constrain it by basically just constraining it to the view on the left bottom right and top anchors. So we'll see text view dot top anchor dot constraint is equal to and we'll choose this initial riser returns a constraint that defines one items attribute as equal to another. And if you want more detailed explanations of constraints in general I have supplementary material that I will announce in course announcements as you take this course over the next few weeks. And that will contain links to articles and videos that are 100 percent supplementary and will help you understand these concepts better. But they are not required to go through Okay now we'll say view Don top anchor and then we just want to activate it. So that's all there really is to activating constraints. So we just want to copy this and paste it a few times and do it to the leading anchor which is also the left anchor. And then you've got the trailing anchor which is pretty much the right anchor. So if I type this out and read it says a layered anchor representing the trailing edge of the view's frame which is the right side and then we have the bottom anchor which is pretty obviously the bottom anchor. OK. So now when we compiler application and go into this controller we'll have a text view constrained programmatically to our view that we can type in. Let's wait a second for that to boot up and we should be good to go. Let's go ahead and go into a folder go into a note and you'll see now that we have this text view that we can type into. So that's all great but it's not really constrained in the perfect manner right. Like it's a little too close to the left. It's not really up to high. Stuff like that. Right. So what we can do is we can modify our constraints with constants. So what I want you to do is I want you to put it in about 20 points on each side. So the leading anchor will say constant 20 the trailing we will say constant negative 20. So for the trailing and bottom anchors the bottom of the screen and the right of the screen instead of putting like a pouting of 20 you at the minus it's because it's relative to the center of The View. OK. Now for the bottom anchor I think we should be good there. We could pull it up but I don't think we need to. Let's think about the top anchor will constrain this top anchor to the bottom of our date label which will add in the next video. Let's recompile our application and just see what this looks like with the trailing and leading constant set K. folder note. And it looks pretty good. OK. Next thing we need to do is we just need to add that date label into the top of our controller and then constrain this text to the bottom of it and then we'll be ready to start creating our custom selves for our controllers. Ken I'll see you in just a second.