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

0 votes

enter image description here

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?

Apr 25, 2023 in UI UX Design by Ashwini
• 5,430 points
424 views

1 answer to this question.

0 votes

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.

answered Apr 25, 2023 by seena

Related Questions In UI UX Design

0 votes
1 answer
0 votes
1 answer

UI/UX Design in Real Time Applications

When designing for real-time applications like those ...READ MORE

answered Apr 25, 2023 in UI UX Design by vinayak
301 views
0 votes
1 answer

Need UI/UX Design layout name

The layout design that Cleartrip.com uses is ...READ MORE

answered Apr 25, 2023 in UI UX Design by pooja
282 views
0 votes
1 answer
0 votes
1 answer

Where to learn UI/UX to give my apps "pop" and excitingness?

There are several resources available online to ...READ MORE

answered Apr 25, 2023 in UI UX Design by Anitha
384 views
0 votes
1 answer

How do I set variable if a specific package version is installed in CFEngine?

Here is what you can do.Just use packagesmatching to ...READ MORE

answered Jul 12, 2018 in Other DevOps Questions by Atul
• 10,240 points
943 views
0 votes
1 answer

UI/UX design or audit - how to measure the costs?

When it comes to charging for a ...READ MORE

answered Apr 25, 2023 in UI UX Design by Tej
287 views
0 votes
1 answer
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP