2

I'm new to iOS programming and seems to be having a hard time working with constraints. I added a textfield to the view and tried to position it where I placed it on the view. I added few constraints using the "Add New Constraints" button on the bottom right of the storyboard but the textfield position is still off when I run it on a simulator. Can someone help me please?

Update: I tried adding these constraints but still no luck

Storyboard

Simulator

Improve this question
5
  • you should run it on iPhone 7 plus simulator. Commented Jun 23, 2017 at 4:52
  • 1
    @SourLeangChhean Is there a particular reason for running it on iphone 7 simulator. I own a 5 and testing the app on that device Commented Jun 23, 2017 at 13:43
  • 1. Are you also doing anything in your code? 2. Your first image: Can you take another screenshot but also expand the left pane, so we can see the constraints completely? Right now we I only see them halfway? Commented Jun 23, 2017 at 14:11
  • 1. For the constraint that is on the bottom right. Are you sure that's set on the textField?! It somewhat seems that it's set onto the tabBar item. 2. Also you can use the Xcode's visual debugger Commented Jun 23, 2017 at 14:19
  • Thanks a lot for your assistance. The debugger seems like an invaluable tool. Commented Jun 23, 2017 at 14:24

4 Answers 4

Reset to default
1

So, for some bizarre reason, it started working after I changed my "view as: " option from an iPad to iPhone. Its not a proper solution but I am just going to use it temporarily.

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

The reason it was not working in the iPhone simulator, yet looks fine in the iPad simulator is due to the bottom constraint. When that huge distance is applied on the iPhone screen, the field is pushed off the screen. To prove this, delete all the constraints you have and simply Add Center Horizontally, and Center Vertically constraints. Reset your height and width constraints. The field will appear regardless of the simulator used.
@MartinMuldoon I tried doing that and its still being weird and not showing up where I want. See Updated question above. Any idea what I am doing wrong?
@MartinMuldoon Still no luck. Check the screenshots above.
0

You need right click the button in your storyboard and drag the constraints line to the related component.Then edit it. demo

You can also add constraints by code,like vfl or masonry.

Improve this answer

Comments

0

Every view in auto layout need to calculate position(x,y) and size(height, width) so that we have to add constraints to that particular view

For example:

mytextField I would like to align it in top of view with 10px from top of view and left, right 10px, height is 100px

Give constraints like place textfiled in view and add Top constraint and set value 10, add leading constraint set 10, add thrilling constraint set it 10, and finally, add Height constraint 100

Then the text field will align at top of view with the required frame on any device.

enter image description here

Improve this answer

1 Comment

@AhteshamKhan can u explain exactly where you want to place text field frame?. is it beside to the next button?
0

you are using 'Horizontal center and vertical center' constraint, when you run app on different device other then the device you are using for design, TexField will be on different place because vertical center and horizontal center will be different on that screen.

User top, bottom,trailing and leading constraint to achieve this.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.