Ok, I have been pulling my hair out for a few days now and thought I would ask the community how to deal with width sizes or the gaps between buttons in xcode 6.4 or 7 (tried them both).
Ideally I want 2 buttons near the bottom and they need to scale properly based upon iPhone portrait mode.
I have added the 1x, 2x, and 3x pngs of the button to the asset system and my auto layout is set for wCompact hRegular which from what I understand allows you to target all iPhone devices in portrait mode.
So after adding my buttons I had it do add missing constraints which added a few and seemed to work pretty good but the issue im running into is the gap spacing between the 4.7 inch and 5.5 inch and how to adjust each one of those separately in interface builder if possible.
See the image below where I outline the gab space and its quite huge for the 5.5 inch.
Also it would be awesome if I could use bigger images for the bigger phone but thats another subject I guess.
Since I cant post images here here is the link to the story board
Take a look at this repository..
https://github.com/mahesh-agrawal/Test-Autolayout-Buttons-Spacing
i have added required constraints to make the gap between the buttons dynamic for all devices. also i have made the width and height dynamic by giving proportional width height.
I have taken two views and given them horizontal spacing 0 and equal width and leading and trailing required for each. and then i have taken two buttons in each and managing width of button with proportional to the views so they will increase accordingly and also the gap will increase accordingly. Test in all devices.
Related
Coming from the Android world, I'm trying to create my first IOS app in swift.
Actually stuck to build interfaces that are adpative to all screen sizes from Iphone 5s to Ipad 12.9".
Autolayout works well except that I can't find how to easily adjust font size and margins for each screen sizes.
Maybe I've missed or miss-understood something in my research but my question is :
How can I have big margins/font sizes on big screens and smaller margins/font sizes on smaller screens ?
Is it possible to have like a constant for a margin for each device or range of screen size in one place so I can easily change it ?
Update :
I forgot to mention that I also tried variations on constraints and font size but theres just a few options between "regular" and "compact" and if you need to change a margin you have to change it on all your elements it's seems crazy..
In Android there's a dimension xml file by each screen size/resolution you want where you can have contants and assign them to each element you want.
I can't figure out the logic behind IOS here
Thanks in advance
I am trying to use adaptive layout in Xcode 7.1 for iPhone app. I am using 3 sizes iPhone device 5.5, 4.7 and 4.0 inches. When I added a background UIImageview, it fits nicely on all 3 iPhone screens. Please refer attached screenshot. I did pin option to Add 4 sides constraints with 0 values. Background fits to all 3 iPhone sizes screen fine.
Now, I am trying to add a UITextview in all 3 iPhone sizes screen. Now, this text view doesn't fit properly in all 3 iPhone sizes screen
Please find the screenshot reference below. How to make this textview properly placed on all 3 iPhone screens just below Employee ID label?
Follow this image and set your constraints like wise....
You have to set constraints to fit textfield properly. Firstly you have to set size class before setting constraints to handle orientation. like size class with respect to device size in this screen shot size class RH/CW set for portrait orientation. And set set constraints to fit UITextfield
I am new to programming and Xcode and struggling with setting image size for iPhone 5 and iPhone 6. Apparently both iPhone 5 and 6 use the #2x image while the 6+ use the #3x image. So i can design the 6+ perfectly, however since both iPhone 5 and 6 use the same image and they have different screen size/ resolution, mu screen design is impacted.
If I design the images as per iPhone 6 size, the images appear too big on iPhone 5 and if I design them as iPhone 5 then they appear to be too small on iPhone 6. This should be simple, what am I missing?
Please help!
Instead of directly using the images you should create an entry for them in the Images.xcassets. Select it in your Project Navigator.
Then drag and drop the #3x or #2x version of your image from the images folder into the list of images in the Images.xcassets window. This will automatically generate a new entry. Then drag the other (#2x or #3x) image into its proper position. It will look like this in the end.
Once that is done you can use it in the UIImageView, or Image for a button or whatever in your Storyboard as just the name without the #2x or #3x.
Now to finally answer your question. You should handle all of the image sizes with constraints in the storyboard. So for instance if you want the same margins on either side of your image you will create constraints between the size of the UIImageView that contains your image and the edge of the Superview. This way the image will be resized for each new screen.
Edited to add Be careful of the Constrain to margins check box as you want to be consistent with using it or not otherwise you will get behavior you didn't plan for. I always uncheck it and have my constraints go to the superview edge, but it doesn't matter as long as you are consistent across your App you won't get confused.
My client asked me to put a bunch of random background images on his iPhone app. So it's set up by putting a UIImageView on top of self.view, adding an FXBlurView on top of that (for blurring purposes, obviously), then putting a UIScrollView on top of THAT, and laying translucent UIViews containing control objects on top of all of it. it looks something like the yahoo weather app when all is said and done. my question is twofold. now that i've explained the situation, here are my two questions:
Question 1
the background images are very grainy. what size should they be for an iphone 5? and what size for an iPhone 6? i thought retina was 640x1136, which should be the minimum size right? why is it only showing the entire image for 320x568? from what i've read, they should be the following for a 5s:
320 x 568
640 x 1136
960 x 1704
when i do that, they appear very grainy. if i do any larger than that then the pictures are cut off. the whole picture isn't being shown.
Question 2
In iOS 7, the app ran fantastically. now that iOS 8 is out, the scrolling graphics are slow and choppy. I took the background image out completely and it sped right back up. I'm wondering what i can do to speed the scrolling up again with a background image staying stationery while the control objects scroll.
any ideas for me?
Answer to the first question
apple has you design your apps at 320x568. The extra pixels are used to make the text and images look sharper. Otherwise, everything would be smaller on a retina display and not sharper.
So you don't have direct control over that extra retina space. The iPhone uses it to digitally make the images sharper and clearer.
I'd still like to know why its choppy and the graphics are poor while scrolling
I use FXBlurView as well, and found that turning the dynamic option of the blur view to OFF fixes the issue. For some reason on iOS 8 FXBlurView uses 100% CPU when dynamic is ON.
I'm updating my app for the iPhone 5. Now I've read the topics about setting the Autosize Property and I've done that.
My question is regarding some of my elements. The interface of the app is really simple. It uses a pre-defined apple background (no custom images), and has 4 labels and a Information Button.
Two of the labels are fine but the other two and the button are aligned with the bottom of the screen, but with Auto-Sizing it creates and 1/2 inch of background between them and edge of screen.
If there any way to make them stay at the bottom of the screen like that but without having to create a whole new view for iPhone 5, with them positioned right and them programmtically select it when needed, as that is a slightly too complex way for the sake of two labels and a button.
EDITED
Here is some screenshots.
Should look like this (iPhone 4S 3.5 Inch Screen)
linky
Does look like this (iPhone 5 4 Inch Screen)
linky
To get the expected behaviour while using Autolayout, in Interface Builder, you need to select the two labels in the bottom and then go to
Editor -> Pin -> Bottom Space to Superview
This will make sure that the bottom spacing is as expected.