Want to add a multi-line label to a tablerowcontroller with top alignment. The only alignment options are left/right etc. Looks like it automatically centers the text vertically. Anyway to force top alignment?
Using iOS8/Xcode 6.3.2
Table Row Controller is a Group.
You can change the Group Layout to Vertical.
You can also insert a Group into another Group, and control individual layout. Nested groups can help you to fine-tune the layout you desire:
Nest a vertical group into the horizontal group to handle the label under the icon. Set the Position of the multiple lines label to left & top.
For anyone using Xamarin, right-click on your storyboard file, and open it in Xcode Interface Builder. Click on the the label, and set the "Lines" property to 2 (or more). And make sure the size of it is set to "Size to fit content", same with any parent container/group.
Related
I am trying to create an Android-esque Snackbar. All the behaviour is correct but I am left with a layout issue. I have actually broken this out into a test app to simplify things a bit.
The bar is pinned to the bottom of the view and contains an Icon (UIImageView) along with some text (UILabel). This text can be up to 2 lines max.
For example, it should be able to exand out like this:-
However to further complicate things, i need it so that the icon and text are centred within the red bar and then spread out from the centre until such point that it needs to wrap. Note that there is a padding to the start of the icon and end of the text to prevent it touching the sides. An example of centred content would be..
I haven't been able to get the correct layout. I think the issue has been trying to centre the two items whilst simultaneously conforming to a width that doesn't exceed the edge bounds, causing a constraint conflict. I have also tried embedding the icon and label in a horizontal stack view but couldn't seem to find the correct fill option whilst centring everything.
I have even tried using NSAttributed string and adding the image to the text itself but when the text wrapped, the icon was being resized and/or misplaced.
As you can see, i have been doing this in Storyboard but i am more than happy to do this programmatically if it serves this purpose better.
Created this Demo for reference , it's a simple task of making a nested view inside the red view with a centerX constraint of priority 1000 and a leading constraint with 999 priority
Now you have this effect
I've created the following view that looks as follow:
And used Add missing constraints t automatically add constraints.
I am pretty new in iOS world and I'm trying to configure out how constraints work.
On document outline, I can see the added constraints:
I click on label UR and Size inspector show me following:
What is the difference between constraints aligned by first baseline to UL and aligned by baseline to UL? When I click on the size inspector on constraints button, it shows me the same line.
From the Apple Docs:
NSLayoutAttributeBaseline
The object’s baseline.
Available in iOS 6.0 and later.
NSLayoutAttributeFirstBaseline
The object’s baseline. For objects with more than one line of text, this is the baseline for the topmost line of text.
Available in iOS 8.0 and later.
Here is also a screenshot of the difference when aligning to a three line label. The upper green label is using NSLayoutAttributeFirstBaseline and the lower green label is using NSLayoutAttributeBaseline. These are the only constraints on the two green labels besides they are both Horizontally pinned 40 from the Pink Label
I don't recommend ever using "Add Missing Constraints." It is a very unpredictable wizard that DWIW (does what it wants). Learn each constraint and add it by hand. Ctrl-drag between objects in the scene hierarchy; use the constraints inspector and edit numeric values; use 'Update Frames' from the triangle pop-up; delete constraints from the inspector; repeat until you get it.
firstBaseLine refers to the top baseline of a multi-line object:
Storyboard warning : First baseline layout attribute before iOS 8.0
if the label or text field involved only has one line, it's a useless constraint.
When you want two side-by-side one-line blotches of text to align vertically, even though their font sizes, ascenders, and baseline descenders may differ, use baseLine alignment. It will look natural like the strings are on the same line.
Bottom, Top, and Center vertical alignments are also possible and more appropriate for non-text objects.
In the image you can see a simple visual example using both baseline constraint.
It is quite illustrator.
I am trying to create four buttons within UIViewBar positioned one by one with auto layout and also everybutiton having Imageview on right side arrow. Now I dont know how to achieve for all the iOS devices. It should change size and spaces based one device width. See below Image
Select all your buttons and click on 'pin' in the storyboard (it in the right bottom corner) like in the below image
add 'Leading', 'Tralling', 'Height', 'Equal width' constraints
and select 'Align' while selecting the all four button(left to the 'pin')
and add 'Vertically in container' constraint.
or else you can add 'Top constraint' instead of 'Vertically in container' constraint.
Hey I don't know this will help you or not. But lets give it a try.:)
I'm making an app in which I add people to a list by using a modal VC, that currently has only three text fields.
Problem:
This is what I see in the interface builder, inside my Main.storyboard file:
I'm running Xcode version 6.2 (6C131e) and the app I'm making will be for iPod touch only, so I disabled auto-size classes. I'm expecting those text fields to be at the center of the screen (same distance from text field lateral border to screen edges). Instead I get this on the simulator:
Question:
How can I set an equal distance for both the sides of text fields? Any resource like tutorials, examples, guides are appreciated, because I am a very beginner in iOS programming. If this can be done with interface builder for me is better then programmatically.
As simple as this:
In the Align menu from the bottom of interface builder if you set this constraint to 0 it will be the center of the view
Select First Textfield
Goto Pin-> Uncheck constraints to Margin-> Select Top,Left,right constraints with default value(or change if want ex. 16 left,right,30 top).
For Second and Third Textfield
Goto Pin->Uncheck constraints to Margin->Select Top,Left,right constraints
If you are not using Autolayout then the default Autoresizing property should be
Change the Autoresizing property to this :
Check this question : Any other method to resize views, other than Auto-layout
I just take horizontally as example. You have two ways to make it in the centre.
1. Make leading space equals trailing space.
Make the textfield center horizontally in container view.
I recommend you can study with raywenderlich tutorial.
http://www.raywenderlich.com/50317/beginning-auto-layout-tutorial-in-ios-7-part-1
I've got a widget that is not laying out correctly on device (its looks OK in IB, but its not quite right). The widget is a label and its located about mid-screen. Interface Builder gave it a Vertical Space Constraint with a 'Bottom Anchor'. Here, bottom means bottom of the screen (rather than a widget below, or anchor to top screen).
I'm in the inspector, but I don't see how to change to a top anchor (preferably, to the widget above). I tried reading Apple's docs and Editing Constraints in particular, but it was a confusing and did not explain how to make the change (or I missed the discussion - which was 7 sentences).
Below is a screen capture under Interface Builder showing the Vertical Space Constraint anchored to the bottom of the screen. And its attributes leave a lot to be desired - Equal, Constant and Priority don't really help.
Does anyone know how to edit constraints? Specifically, I want to (1) change a vertical spacer's anchor from bottom to top; and (2) anchor against the widget above, and not the top of the screen.
Select the "Embedded" and the "Calculated" element together by shift-clicking.
With those two elements selected, use the constraints menu:
This menu, together with careful selection of elements, is central to happy editing of constraints in IB. In your case, choose the central item, the Pin menu. Choose Vertical Spacing - this will create a new constraint on vertical spacing between your two elements. Alternatively, select a single element and pin "Top space to superview" to pin to the top instead of the bottom.
You can now select and delete the vertical spacing to the bottom of the view. IB wouldn't let you delete this before since you have to have a complete, non-ambiguous set of constraints. After adding your new vertical spacing constraint, you now have this.
To illustrate further, here is an empty view controller, with a single text field which I have dragged on:
All of the constraints are purple, which means IB has added them for me (they are System constraints) and they can't be removed - they are the minimum constraints needed to position and size the text field.
Now, I'll select the text field, and pin the top space to the superview:
Now you can see that the two vertical space constraints have changed to blue (they are now user constraints) and they have a thicker appearance in the editor. This means that one of them can be deleted. I select the constraint for the bottom space and hit delete:
Note that this still has the appearance of a user constraint - but if I try to delete it, IB will automatically recreate the system constraint pinning to the bottom of the superview, getting us back to square one.
I have written about this, and similar autolayout topics, here.
I got one word for Autolayouts. If it works, it works but if it does not, then use the old fashioned way (use code)