1

I am trying to design a main screen for my app. I firstly worked on Photoshop to design the elements and tried to put them on my story board. However soon I realized that I have a problem.

The size of picture I cut from Photoshop looks big on the Storyboard preview. How should I cut the pictures from below picture, so that it layouts and looks good on all iPhone sizes? I am familiar with auto layout. However I don't know what should be the size or the ratio should I choose to resize my each icon.

Here is my prototype picture. Sorry I can't line because I don't have enough reputation. https://i.stack.imgur.com/4gop1.jpg

Cesare
  • 9,139
  • 16
  • 78
  • 130
Meanteacher
  • 2,031
  • 3
  • 17
  • 48

2 Answers2

2

Enable AutoLayout to use Size Classes and get the most out of its powerful features.

img0

iPhones and iPads use different size classes. You will be able to specifically select a size class and apply changes to it.

For example, if you want to specifically use an UIImage on a iPhone, you should sue the compactWidth/RegularHeight class.

img2

If you want an image to be placed on every device, use the AnyWidth/AnyHeight class.

Know more about AutoLayout here.

Cesare
  • 9,139
  • 16
  • 78
  • 130
  • Thanks for your answer. I already have autolayout and use size classes option selected in my project. I have trouble what size I should choose for my each icon picture that I posted. For example if I choose 92x84 as my icon, it shows OK on iPhone 5. However, it will mess up if I select iPhone 4s or iPhone 6. Because I set the size of those images as background image of my button, I don't know how can I resize those buttons. What I am trying to achieve is, create separate images for each idevice and use those icons for the buttons. – Meanteacher Jan 22 '15 at 14:26
  • I got what you mean. I had the very same issue some days ago. Yes, it's frustrating because you can't actually target a specific device using AutoLayout, but there is a workaround for that. You need to place an invisible view, set top and bottom constraints to it and place your image inside the view. This was my question: http://stackoverflow.com/questions/27989848/in-interface-builder-how-i-do-to-resize-correctly-this-image-to-make-it-device. This was the answer that solved it: http://stackoverflow.com/a/20865342/1135714. – Cesare Jan 22 '15 at 14:36
  • Sorry for being such a newbie. Buttons will resize by the help of Autolayout and size classes. However, wouldn't image look terrible if I resize it ? Should I have very big image so that it will resize automatically? Or should I make separate images for every screen size and name it 2x 3x etc. I will really appreciate if you can create just a single view app with such button structure in my picture. I just can't make head or tails of it. – Meanteacher Jan 22 '15 at 15:16
  • An image would look 'ugly' usually if you don't set the right scale mode of it. This means that you should, in the Attributes Inspector, select "Aspect Fit" instead of "Scale to fit". Was that what you were looking for? I can create a demo app for you. "Should I have very big image so that it will resize automatically?" Well, yes. Though, not because it will make the image resizing automatically, but because you need to provide the users that will use your app retina images to maximize your app's user experience. – Cesare Jan 22 '15 at 15:19
  • I will really appreciate if you can make an app similar the one I posted as image. I also wonder your approach about creating those pictures. Will you create one big image for the icons, so that it will resize because of aspect fit ? Or you will use image set and create different sizes for each icon. Thanks again once more for answering my questions. – Meanteacher Jan 22 '15 at 15:27
  • I created an app for you: https://www.dropbox.com/s/aecn78q6bsyb06g/Demo.zip?dl=0. It is just an app that demonstrates you how it's possible to create the prototype app of which you posted the screenshot of. As you can see, I am using the very same image for every device. the image looks good on every device. In order to get your app done, place many images of these boxes in the `UIView` and attach to them constraints connected to the `UIView`. Please note: don't attach the constraints to the superview (the main `UIViewController`). – Cesare Jan 22 '15 at 15:33
  • I am really trying like 4 hours now. Still can't position my icons the way they look on Photoshop. Your example, only shows how to position single icon centrally inside the view. Also rotating the device, removes the icon. However in my case I have like 11 tile buttons and, 4 socila icons, 1 logo at the top. It is all messed up :( I will really appreciate if you can at least do the first row. – Meanteacher Jan 22 '15 at 22:38
  • Please update this answer with image resources that work, thanks! – Ray Li Mar 04 '20 at 20:06
0

Be sure to also test it on the device. Just yesterday I thought I needed to resize as well, but when I loaded the app to an actual iPad the image was just right after applying the constraints to horizontally and vertically center the image.

After that I had some issues placing the other image correctly in proportion to the first one. My solution there was simply to make them one image instead of two. It was fast to do this by copying the second image from Xcode with cmd + C and copying it into the first image in Preview using cmd + V.

For simple cases this may prove easier than trying to figure out the layout correctly.

OwlOCR
  • 1,127
  • 11
  • 22