CODEWITHSUNDEEP
iosconstraints
Ray Saudlach
Ray Saudlach

Reputation: 660

Horizontal constraints in iOS

In my storyboard, my view controller has two container views as shown below

enter image description here The second container view is it tone am having difficulty setting constraints for.

When I actually run the app, the text field, becomes very narrow. My horizontal constraints are obviously incorrect but I can't figure out the right settings.

Here what I currently have:

FilterIcon - trailing space to superview (right): 0
           - Align Center Y
           - Leading space to "Go": 16
           - Equal height to text box

Go Button  - align center Y
           - trailing space to filter icon: 16
           - leading space to text box: 8

Text Box   - leading space to superview (left): 0
           - trailing space to Go Button: 8
           - equal height to Filter icon
           - horizontal hugging priority: highest of 3 elements 751

I thought the text box would expand from the left margin until it reached the Go box which is set to the right based on the filter icon.

Instead I get this result: enter image description here

What am I missing for the constraints?

Upvotes: 3

Views: 265

Answers (3)

woogii
woogii

Reputation: 413

How about configuring like this?

Text Box

  • leading space to superview (left): 0
  • trailing space to Go Button: 8
  • equal height to Filter icon
  • horizontal compression priority: 752

Go Button

  • align center Y
  • trailing space to filter icon: 16
  • leading space to text box: 8
  • horizontal hugging priority: 251

Filter Icon

  • horizontal hugging priority: 251
  • Align Center Y
  • Leading space to "Go": 16
  • Equal height to text box

Here is my screenshot.

enter image description here

If you don't want to set priorities, you can just set width constraints for both Filter Icon and Go Button. For more information, there is very good tutorial about content hugging priority and compression resistance priority in here

Upvotes: 1

Mahesh Agrawal
Mahesh Agrawal

Reputation: 3358

Give aspect ratio to the text field for its width and height and give center y to superview. This will definitely work. But make sure when you give aspect ratio, your text field is having the width you require.

Upvotes: 0

Rock Lee
Rock Lee

Reputation: 1

I think you can set both buttons' height equal to width. Then other space is left to the text field.

Upvotes: 0

Related Questions