This is 7+ only,
Make a UISegmentedControl with say four segments, in Storyboard sit in in the middle of the iPhone (it'll be about 200 wide),
run the app, and of course it is centered.
I'm simply forcing the widths of each item like this...
(all are the same)
Now run the app - bizarrely it no longer centers!
It gives the impression it keeps the Left of the control in the same place, and then calculates it's width "whatever" based on setting those "Segment-Width" items. And then the right end is way too far to the right! It would appear it does not reposition (i.e., center) the control after changing the width.
Is there a solution?
(At the moment I simply "move it the necessary amount to the left!" which is lame.) Cheers
That's the way it works because in the View section of the Size inspector the x position of the segmented control is fixed.
Related
On my toolbar I am trying to properly lay out three buttons. One in the middle that should remain centered horizontally, and then one aligned left and one aligned right. But because the text for the left button is longer than either the middle button or the right one, the spacer items won't seem to produce the desired spacing effect. I've tried both fixed and flexible, but of course using the fixed type will not dynamically respond to different screen widths, and the the flexible width ones (UIBarButtonSystemItemFlexibleSpace) will not keep the middle button centered.
I've defined the layout both in Interface Builder and programmatically and I get the same effect, what you see here. For example an iPhone 6s looks like:
and an iPhone 11 Pro looks like:
As you can see the "Mid" button is not centered. By using UIBarButtonSystemItemFixedSpace instead of UIBarButtonSystemItemFlexibleSpace I could define the width of the spacers exactly, but in order to calculate it properly I would need to know the width of each UIBarButtonItem and also the right delegate method to do this in. Is this even possible, or must I do a custom view (or something else) to make this UIToolbar look like I want?
Try adding leading spaces to the Shorter title OR using the following items:
Longer-Text Button, Flexible Space, Mid Button, Flexible Space, Fixed Space, Shorter Button
The fixed space would be a hard coded value to match the width delta between the two buttons.
In order to get an iPhone layout to display at 'correct' dimensions on iPad, I'm putting everything (rose) into a view (blue) within the ViewController (gold)
Click / tap to see Schematic View
The iPad is shown as the larger frame with the grey status bar.
So to cater for 7plus size iPhones downwards, I'd have to set up constraints for the 7+ within an iPad frame with different priorities
in different directions. Once the blue view is set, i should happily be able to add my Sub Views in I.B.
Since the whole lot has to appear in the very centre of Ipads, step (1) is to set alignment centre-line constraints of the blue View with priority of 1000.
Next would be to fix the size for iPad displays larger then 7+. Acheived with setting size constraints as a maximum to shrink from. I've only shown the ≤680, so that height or less as in step (2) but a lesser priority, say 750.
Then for it to reduce down in size toward SE size i want to hold that say 20 points away from the viewController (gold). So the constraint for that should be ≥20. as shown at (3), I've assigned 740
The principal works nicely in the horizontal direction, but not the vertical. I've tried endlessly to adjust different priority assignments, including the 'Content Hugging' and 'Content Compression Resistance'properties and I never seem to get the desired results once I put the actual entities I want to see (rose) within the Blue view.
I've read Apple's Autolayout Design Guides closely enough to almost say I've written them, and after 35+years of CAD and 3D animation modelling, I think I could describe objects in text parameters before the iPhone existed.
But I've been bested here. Am I taking the long way 'round to just get an ** iPhone only ** layout to display correctly? My little bald spot thanks you for your answer.
If it were me, I'd use trait variations instead of trying to handle layout for every size class in one set of constraints. I think if you take that approach, you can accomplish what you're after with a lot less work and in a way that's independent of devices that may appear in the future.
Also, keep in mind that if your app supports iPad multitasking, you may have sizes on an iPad that you're not expecting (like iPhone portrait width in device landscape orientation).
With autolayout, try not to think in terms of device type or orientation. Think in terms of the appearance you want for a particular size class, wherever it appears, in whatever device orientation. That gives you the opportunity to create a the best user experience for a given display area, and will make your life easier during initial development as well as when new features are added or new user devices are in the mix.
I've just created a very new iOS application. Haven't developed for iOS since iOS 6. Since then there is iPhone 6 and 6 Plus and the Storyboard autolayout is default.
What I want: I have a default ViewController for now (easy to reproduce, new single view application drops you there) and I just added a TextLabel to the default empty ViewController/View
I've found how to horizontally align this TextLabel (XCode 7.1):
Aligining horizontally in the middle working on iPhone 4S-5-6-6+ this way
What I didn't find: how to align this same TextLabel for example n pixels lower than the top bar (the bar including Network status, battery icon, etc.) where
n = 10 times X (X in case of notplus = 2, in case of plus = 3)
If I set to any value the "Vertically in container", the only allowed constraint, it goes out of the screen in case of smaller displays if it's on the top in case of i6. But I want to support smaller display sizes too, and don't want to use just the middle of the iPhone 6/6Plus meanwhile.
Is there an easy solution for this? If not, are there any hard solutions for this?
You could probably do this in code by creating an outlet to the constraint and then calculating the distance you want.
You could also try adding a constraint "Center vertically in Superview" and then change the multiplier in the constraint settings. This would enable you to position the textLabel for example 10% below the topBar. This might give you the results you are looking for.
So I have created my webapplication and when I build it in xcode I have to under "Simulated Metrics" > "Size" set it to 3.5 inch since I have a iPhone 4s.
When I build it and run on the iPhone everything looks perfect, but I want this application to run on iPhone 5/6 aswell, but when I change the size to something else in the Simulated Metrics it gets really messed up on my iPhone. I'm using a webview of my responsive website which shouldn't really care about the screensize but I believe Xcode does. So, is there a solution where xcode automatically detects screensize and makes the webview take the whole viewcontroller? Or do I have to create a application for every screensize?
So, is there a solution where xcode automatically detects screensize
and makes the webview take the whole viewcontroller?
Yes - xcode provides ways to do this. Either through auto layout or using springs and struts. With auto layout you will define a set of rules that your UI will follow. If you want 1 layout for all devices it's fairly straightforward and any tutorial will get you started. with springs and struts you just tell your views how they should grow/stay put depending on screen growing. check this out for a quick introduction to auto layout: http://www.raywenderlich.com/83129/beginning-auto-layout-tutorial-swift-part-1
Or do I have to create a application for every screensize?
Nope.. but you can set different constraints in auto layout for your views to behave very different on different sizes. This gets a little more tricky..
No you do not make a new app for every potential screen size, instead you uses XCode's "auto layout" with a set of "constraints" controlling the size and placement of your widgets. A constraint can be a fixed size for the widget or a given distance relative to another widget (or the parent's border). It is not necessarily a fixed distance, it can also be "my widget needs to be less than 10 pixels apart from this other widget".
The "Simulated Metrics" you refer to in the bottom of the drawing area is only a visual help when laying out you your GUI, it has no effect at runtime. You can safely stick with "Any" width and height.
Read this tutorial to understand XCode's auto layout and constraints:
http://www.raywenderlich.com/50317/beginning-auto-layout-tutorial-in-ios-7-part-1
Quickly, these are the tools used to setup constraints:
In your case, assuming you have only one big view (your webview), you need to set up 4 constraints stating that the webview's left, right, top and bottom sides are 0 pixels away from the parent's left, right, top and bottom borders respectively:
Lay your webview in the middle of your drawing area
Click on it
Click the "pin" button; you will see this view:
Look at the upper part of the dialog: the small square in the middle represents the view you just clicked and the four red lines represent the distances to the parent's side. Set them all to 0 and click "Add 4 constraints". (Note: the lines are initially dashed when not selected; they turn into solid lines when activated.)
Now the frames in the drawing area do not represent what you were expecting: your webview is still in the middle where you placed it initially and does not fill all the available space; XCode is aware that there is a mismatch between the frames and the constraints and shows a warning. You need to update the frames: click the "issues" button and "update all frames".
The image comes from this question on SO:
What is "Constrain to margin" in Storyboard in Xcode 6
Read it to learn about the "Constraints to margin" switch.
I am trying to get this view working with auto layout to accommodate both 3.5" screens and 4" screens. I am starting to feel like it is not possible only using auto-layout and IB.
Any insights? I have tried just about every combination of constraints I think would make sense (and many stabs in the dark) without luck.
Here is how it looks on a 3.5" screen (from IB but looks identical in the simulator)
Here is how it lays out on a 4" screen
Here are the constraints, let me know if there is a better way to show this information.
The simplest (but not best) way would be to take each item on page and add the following constraints
"pin" width
"pin" height
Leading Space to superview
Top Space to superview
Remove all the other constraints.
This should lay out every staticly with all absolute values. It should work fine.... unless you rotate, but I'm not sure if you support landscape. If you do, replace step 4 with "Horizontal Center in Container" constraint.
Side note. Pink constraints are put in by Xcode because it is missing something it needs to position properly (you can't remove these). Blue ones are one you put in. Many times pink ones will vanish as you put in blue ones because you've giving it missing data Xcode needed to position the item.