Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

iOS Autolayout: two buttons of equal width, side by side

I am currently having difficulty with AutoLayout. I am using interface builder and am trying to position two buttons of equal width side by side as illustrated in the following image.

objective layout

From the following Preview image, my titleImage has been properly constrained and is displaying correctly however the buttons are not. I have experimented by aligning button 1 with the leading edge of titleImage, and button2 with the trailing edge of titleImage, however the width distribution between the two buttons becomes skewed at this point, as demonstrated below.

problem scenario

My objective is to understand what constraints are missing and should be applied to the two buttons to maintain equal widths regardless of device. If possible I would like to achieve this through interface builder as opposed to additional code.

like image 655
Scratcha Avatar asked Jan 26 '15 11:01

Scratcha


People also ask

What is Autolayout aspect ratio?

If you select Aspect Ratio for multiple items, Auto Layout chooses the width of one of the items for the numerator and the height of another item for the denominator. To change the initial aspect ratio, edit the Multiplier field of the Attributes inspector for the constraint.

What are two properties that auto Layout constraints control on a Uiview?

Auto Layout defines margins for each view. These margins describe the preferred spacing between the edge of the view and its subviews. You can access the view's margins using either the layoutMargins or layoutMarginsGuide property. The layoutMargins property lets you get and set the margins as a UIEdgeInsets structure.

What is IOS Autolayout?

Auto Layout is a constraint-based layout system. It allows developers to create an adaptive interface that responds appropriately to changes in screen size and device orientation.

What is Autolayout in Swift?

Auto Layout constraints allow us to create views that dynamically adjust to different size classes and positions. The constraints will make sure that your views adjust to any size changes without having to manually update frames or positions.

What's new in auto layout for iOS?

Note: Auto Layout makes internationalization easy, too. You no longer have to make new XIBs or storyboards for every language you wish to support, including right-to-left languages such as Hebrew or Arabic. At first, Apple made one screen size for the iPhone.

How do I test the orientation of the buttons on iOS?

Build and run the app and tap the buttons to see how they behave. Perform the test in both portrait and landscape orientations. The lower button is center-aligned in the window, horizontally. The lower button sits 8 points from the bottom of the window. The top button is 40 points above the lower button and aligned with the lower button.

Why do the buttons always have the same width?

The buttons always have the same width, regardless of which has the largest label. When both labels are short, the buttons will shrink equally. Unless a constraint prevents it, buttons will size themselves to fit their content.

What is auto layout and how does it work?

Making apps that look good in any orientation across multiple devices can be a challenge. If you’ve experienced this kind of frustration, despair no longer! Auto Layout makes it easy to support different screen sizes in your apps.


2 Answers

Add the following constraints

  1. Assign equal width from button1 to button2.
  2. Assign horizontal spacing between both buttons.
  3. Assign leading space from button1 to its superview.
  4. Assign trailing space from button2 to its superview.
  5. Assign top space to both the buttons.
    Let me know if it works for you.
like image 97
Abubakr Dar Avatar answered Oct 06 '22 01:10

Abubakr Dar


Follow Steps and Screenshots for easy solution


Step-1)

  • For Button 1 : Set Constraints: (1)Leading, (2)Top or Bottom asper your need, (3)Height


Step-2)

  • For Button 2 : Set Constraints: (1)Trailing,(2)Top or Bottom asper your need, (3)Height

Step-3)

  • Press Ctrl + Drag From Button 1 to Button 2

  • Select Horizontal Spacing


Step-4)

  • Select Both Button (using Command) and Add Constraints Equal Width


OUTPUT

Hope it Helps you :)

like image 21
Vvk Avatar answered Oct 06 '22 01:10

Vvk