I was using the Uber app last time, and their button group (Paypal, Price Estimate, Promo Code) looked good - Lyft has the same design - and I was wondering how could I achieve the same result in my app ?
I already tried Layout. I think there's a quicker solution using TableView or CollectionView maybe ? it looks more like a TableView but I don't know how could I put 1 plain row, and then have a row with 2 buttons ...
In my storyboard I have the above. But I cannot "stick" the 2 buttons to my label, there is a guide-line which block me just below the label.
Hope I was clear enough and in advance sorry for the "No code post".
Thanks for your help !
You should do this using UIStackView. This needs iOS 9 as target. If you are on a lower version, you can use TZSTackView
Even if you use a tableView the autoLayout is required. So try resolving the autoLayout issues.
place the buttons alongside
provide the following constraints
Button 1:
leading: superview
top: label (set suitable distance)
trailing: button 2
aspectRatio
Button 2:
top: label (same distance as button 1)
trailing: superview
aspectRatio
Also select both the buttons and set equalWidths. Now Update Frames and you are good to go.
simply use TableView with custom tableview cell by putting uilabel on the top and uibuttons below and set the constraints using size inspector > Autoresizing ..
Its easy just follow these steps.
use tableview for this.
1.take 2 views First for your top stuff and second for button.
2.add constraint on 1st view.
2.1 add top,leading,trailing and give equal width to the context view and change the multiplier to 0.5;
3.add constraint on Second view leading ,trailing and bottom and top to first view.
3.1 add button inside second view and give leading ,top , bottom and equal width to parent view and change multiplier to 0.5.
3.2 add second button and put top,bottom ,trailing and horizontal spacing to first button to zero.
Related
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
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.
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.
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.
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.
I am using JSQMessagesViewController and I created a custom cell according to this answer.
How to add custom view to JSQMessagesViewController cell so that it includes one view with some buttons and text view?
Now I am struggling to set auto layout constrains correctly. So, the message bubble not display correctly. Please help me set the constraints correctly
So lets take a stab at this. So first things that I would do it set a constraint for the first button to be equal hight of the other. You can accomplish a couple of ways but I will only describe one here for brevity. You can do hold the control button on your computer and select button1 and drag to button2. This will present you with a couple of options that look like this.
You want to select Equal Heights this will make it so both your buttons have the same hight. Then you will want to give it a hight. Once again hold down the control button on your keyboard but this time click button1 drag and release within button1. you should get something along the lines of this.
If you do not get the desired options try dragging in a diagonal direction. Xcode is tying to guess what constraints you want based on the direction of your drag. I.E. If you drag vertically you should get the Height option.
Then you can go to the properties inspector on the right and set a number for how high you would like. Text is normally around 12pt so I would go with about 30pt or more for the hight of a button. Then add a constraint for spacing between them and leading and trailing to the containing view or you could give them a standard width and center them in the view. Which ever fits best for you.
Edit:
You should also adjust the bubble size calculation.
It can be found in the JSQMessagesBubblesSizeCalculator class.
Eg: In the
- (CGSize)messageBubbleSizeForMessageData {
if([messageData isOptionMessage]){
// add button height also (In this case i have set constant 200. But we have to calculate the actual button heights instead)
finalSize = CGSizeMake(finalWidth, stringSize.height + verticalInsets + 200)
} else {
finalSize = CGSizeMake(finalWidth, stringSize.height + verticalInsets)
}
}
Let me know if you need any more help and keep up the good work. 👍🏼 🚜
I am new to iOS and am trying to align these TextFields in iOS. Below is how I would like it to look on an iPhone 7.
However, on the iPhone 7 Plus, the TextField shifts to the left of the center, despite my constraints.
Why is this? I have a constraint that aligns them to the Center, as seen on the right part of the screenshot.
It is very simple!! Just follow below steps,
Open you .xib or .storyboard file
Select view you have to add constraint
Click on align button at the right - bottom corner
Set horizontally in container constraint 0
Then press add constraints button
You can add any constraints to any view by following these steps
You just have to seth trailing and leading space fixed means both left
and right indicators should be red as shown in the screenshot.
For more details see the screenshots:
It will remain fixed from left and right in all the screens.
in your case is important set the width constraint.
However you can use trailing and leading constraints, in this way you will not need to set a defined width for your textfield and the position is correct for all type of devices.
If you want design like this so you have to take UITableview then take UITextfield for every cell beacuse you use every cell as view so easily manage all textfield and constraint. And also easily scrolling if device is display small.
I'm wondering how to set a UILabel's width expressed as a % of the Cell's total width? I'm using AutoLayout. Normally I would click on the label and set the EqualsWidth to a parentView and then adjust the multiplier so I set the width as a % of the parentWidth. But using InterfaceBuilder that option does not seem to be available within the Cell.
However I'm wondering maybe it has something to do with setting the preferred Width: I'm using ios8+ and have read that implicit widths are not available for ios8?
What I am hoping to achieve is that Label 1 and Label 3 are both 15% the width of the Cell and Label 2 has leading and trailing edges pinned to UIImageView and Label 3 that will allow it to grow and shrink depending on the width of the device.
Steps you should do to achieve your goal of setting percentage width of any subview inside cell:
Add UIView to your cell and pin it to every edge - we have to add custom container view in order to be able to add "Widths equally" pin later on.
Add UILabel to previously added UIView container. Lets say we want to add left side label, so add 3 pins to it: left, top, bottom.
You can see now that you have error in your constraint setup. So lets fix it and add "Widths equally" pin. Select 2 views in View Controller Scene menu - the container and the label. Go to XcodeMenu/Editor/Pin/ and select "Widths equally". Now you should see no errors in you constraints setup and the label should have same size as the container. (Please note that sometimes you have to refresh frames of your views after setting constraints, so if you see "yellow" warning icon don't be afraid and just click on it).
Now if you have all your constraints we need to set actual percentage value. Open tab Size Inspector, click "Edit" title on constraint added in step 3. and change Multiplier value to 0.15 (15%).
Please note that, if you would add label using same technique but for right side, then you would need to set Multiplier value to 6.66 (= 1.00 / 0.15).
Cheers!
You can set width constraint and then create an IBOutlet for that in UITableView cell and change constraint.constant value in layoutSubView method of tableViewCell
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.
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.
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.
Add the following constraints
Assign equal width from button1 to button2.
Assign horizontal spacing between both buttons.
Assign leading space from button1 to its superview.
Assign trailing space from button2 to its superview.
Assign top space to both the buttons.
Let me know if it works for you.
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 :)
Stack layout in iOS9, will do the job really nice.
Add stack view to your view and configure as follow:
You can check my example - you can easy aim this, by using proportional constraint.
Also you can easy aim proportional multiple UIViews.
Please look attached example
https://dl.dropboxusercontent.com/u/48223929/TestViewController.xib
My solution is to
Put a small view in the middle of two buttons and make it centre(Horizontal centre in container and vertical centre in contener as 0).
Add height and width to the small view.
Add buttons the constraints and give horizontal space constraints to small view.
Give the small view background colour same as buttons or View's colour.
Note: See the Screenshot.