I have a view with buttons optimized for iPhone 4. The buttons fill the whole screen. If the user have a phone with retina I want the buttons to still fill the screen. If the user have a iPhone 4 the buttons height are 148, but if the user have an iPhone 5 the buttons should now be 178...
iPhone 4:
http://i966.photobucket.com/albums/ae148/fostom/ScreenShot2013-08-17at94846AM.png
iPhone 5:
http://i966.photobucket.com/albums/ae148/fostom/ScreenShot2013-08-17at100649AM.png
Ok. I fixed this myself.
The solution for resizing the buttons from 3" screen to 4" screen is:
Select top row buttons. Set constraint ´Top Space To Superview´
Select bottom row buttons. Set constraint ´Bottom Space To Superview´
Select all buttons. Set constraint ´Heights Equally´
At least; this fixed my problem/question. This is purely done in storyboard and no code.
This can easily be achieved with a constraint like this:
#"V:|-10-[button1]-5-[button2(==button1)]-5-[button3(==button1)]-10-|"
You don't specify the explicit height of the buttons, you tell autolayout that all buttons should have the same height (button2(==button1) means that button2 should have the same height as button1). Then you specify the distance between the buttons (5 in the example) and the distance between the top edge of the first button, the bottom edge of the last button and the edge of the view (10 in the example).
et voilà:
If you want to set up your constraints in interface builder you have to convert them yourself. Shouldn't be that much work.
Related
I tried many ways to pin the button towards right corner of the table view cell.It's fits properly only for one device segment for iPhone SE/5s button is not visible.
I had given equal width & height alogn with top and right constraints.
Below is the screen shot of auto layout segment.
I need some help figuring this out.
I have a simple UI I need to implement. I have 4 buttons that take up the entire screen and with the scrollview, I want the user to be able to scroll to make the 5th button visible. I know how to use auto layout to make my first four buttons display how I want them. The first button is 40% of the visible screen, the second button is 15%, the third 30% and the last button is 15% of the visible screen. The 5th button should be hidden but then revealed when the user scrolls down.
(To clarify, all buttons have width equal to their superview, proportional height to the superview and all buttons have no spacing between each other)
This is where I am stuck. I want the proportions as I stated above, but also want the 5th button to show when scrolled to, possibly at 10% of the now visible screen (with the first button now not showing itself fully). Is there a way to do this?
You can set the contentSize of the UIScrollView to be larger than the visible screen. The buttons can be sized and placed in a way to have all 5 buttons visible (with the 5th button actually off screen). The scrollView will bring the 5th button into view when scrolling.
I worked up a simple prototype using just a storyboard (and setting the contentSize of the scrollview in Runtime Attributes section, but this could be done in code if you need to pragmatically determine the button sizes.
I built my views in Interface Builder for iPhone 4 dimensions. I thought that the Autoresize Constraints in iOS 6 will take care of the resizing automatically. The screenshot shows the Top Space constraint that Xcode added automatically. It says that the relationship between the top and the bottom orange view must be 332 points.
When viewed in iPhone 5, the orange button is stretched all the way to the bottom as you can see in the screenshot below.
When changing the relation to Greater Than or Equal, the view does not change and remains the same. When removing the constant to make it Auto, the view is stretched across the entire screen. How do I specify a constraint were the height is 44 points and at the bottom?
Don't have a constraint to the top of the superview. Pin it to the bottom of the superview, and fix the height to 44, then delete the constraint linking it to the top of the view.
You achieve the pinning by selecting the view in question and using the pinning menu in interface builder (the floating menu with three icons on it, or editor-->pin from the menu bar).
To move between 3.5 and 4 inch displays, you need to link content to the correct edge of the superview. Stuff at the bottom should be stuck to the bottom.
I have written about constraint editing in interface builder here if you're interested.
Try adding your own contraints (user constraint), In Auto Layout for each object there must always be enough constraints to determine both its position and size on different devices screen.
Interface Builder automatically creates constraints for you as soon as you place a view in a layout. Try placing your views along IB’s automatic guides to help it guess correctly which layout you want.
Prior to Xcode 4 it was done by setting the springs and struts from the Interface Builder and the springs and struts model is still the default, so for every programmatically created view that you want to use autolayout with, dont forget to call
setTranslatesAutoresizingMaskIntoConstraints:NO.
Notice the Nib on the left displays a layout with 2 UILabels, 1 UITextView and 2 buttons. The Y coordinate of the buttons changes at runtime. What is causing this and how do I fix it?
Update #1 - Problem goes away when I shift to a iPhone Retina 4-Inch display.
Update #2 SOLVED - Problem goes away when by unchecking 'Autolayout' in the xib properties.
It looks like you're using iOS 6 and a storyboard with the 4-inch "tall" iPhone screen form factor simulated. Assuming you are using Auto Layout, you probably have a constraint added to one or both of the buttons that pins them to the bottom of their superview. When you then run your app on the 3.5" screen iPhone simulator, the buttons appear to "move up" as their superview has gotten shorter than on your storyboard.
Find the button with the icon pictured below while editing your storyboard, and click it to toggle the simulated screen size between the 3.5-inch and 4-inch form factors. You should see your buttons re-layout based on their constraints.
To set your buttons' spacing relative to the top instead of bottom of their superview, select both buttons and from the menu bar choose the Editor menu > Pin > Top Space to Superview. (Or use the Pin button pictured below directly from the storyboard.)
There's a good introductory tutorial to Auto Layout here, if you haven't learned about it yet.
I have an app that is designed for the iPhone 4. This app has a toolbar that was drag-dropped in Interface Builder to the bottom of the screen. When testing on simulator's iPhone 5 "device", the toolbar does NOT automatically go to the bottom of the screen.
My question is - is there some kind of a trick or technique, that will let all the UITables "stretch" to populate all the new available space, and toolbars go to the bottom no matter what kind iPhone it is being connected to? It would be painful, to do this programmatically - that is figure out what kind of an iPhone I am and then, programmatically reposition all the ui. If this is in fact a must, should any new iPhone apps be designed for 4" retina, and then programmatically shrink everything for iPhone 4 size, or is it better to design for 3.5", and then stretch and push down toolbars in case it is an iPhone 5 with 4" screen.
Thanks for any input..
If you are only using iOS 6, the easiest method would be to use Auto Layout and add a constraint in Interface Builder. The constraint would describe that the toolbar's bottom edge should be equal to the superview's bottom edge. You don't have to code specifically for a single device. To have the UITableView stretch to fill all the available space, again I would recommend using constraints on the UIScrollView (not UITableView, which sits inside the scroll view) to describe this behavior, e.g. The scroll view's top edge should equal the superview's top, left edge should equal the superview's left, bottom edge should equal the UIToolbar's top (In IB, a spacing constraint specifying that the spacing between the UIToolbar and the UIScrollView should equal 0), and right edge should equal the superview's edge.
If you can't use constraints, this behavior is specified using the struts and springs system that utilizes the autoresizingMask property on the view that specifies that the UITableView's parent-UIScrollView has a flexible width and height and the UIToolbar has a fixed height and a flexible with. You would manually position the UIScrollView and UIToolbar by setting their respective frame property that describes the x,y coordinates of the top-left edge as well as the width and height of the view.
View Programming Guide for iOS - Adjusting the Size and Position of Views at Runtime
Cocoa Auto Layout Guide: About Cocoa Auto Layout