How to achieve this UI UX design for an iOS UIButton object

Question

Look at the cool UI Trick for the "Forgot your login details? Get help signing in." button. How did they break the button into a clickable and non-clickable section? If it's not a single button but a label and a button, then, how did they get the second line of the button to be centred?

Answer 1

From the image provided, it appears that the "Forgot your login details?" text and the "Get help signing in" button are separate UI elements that are placed next to each other to give the appearance of a single button.

To achieve this UI design, you can follow these steps:

1. Create two separate UI elements, one for the label and the other for the button.

2. Place the label and the button side by side, making sure that they are aligned properly and have sufficient spacing between them.

3. Set the background color of both UI elements to be the same to give the appearance of a single button.

4. Style the label and button to have a similar font, size, and color to create visual consistency.

5. For the "Get help signing in" button, add an event handler to handle the click event so that it performs the desired action when clicked.

6. To center the second line of the button text, set the button's title label's numberOfLines property to 0, which allows the label to display multiple lines of text. Then, set the contentHorizontalAlignment and contentVerticalAlignment properties of the button to UIControlContentHorizontalAlignment.center and UIControlContentVerticalAlignment.center, respectively. This centers the button's content both horizontally and vertically.

To know more about UI UX, It's recommended to join UI UX Design Certification Course today.