I am trying to figure out how to use the xcassets folder in Xcode 6 and I have to say Apple could have done a way better job. I'm a big fan of Xcode but their images storage per type of screen / phone is a nightmare.
First, in my application I am using images which will have a height of half their width. From what I understood, taking pictures of around 1200x600px should do for all types of iphones (full width minus small margin). So I put them in 3x universal, right? If I gave the maximum size why would apple need 1x and 2x ...? Just resize it yourself, no? Is it compulsory for me to give something or will it work by itself? Images are not vector but simple PNGs. In the simulator nothing is complaining and it works well for all types of iphones. Is it okay to leave the other two empty? From I see from the simulator iphone 6 will use downsized #3x images so what is the point of having two images? Only ratio is important and they have the same ...
Secondly, I just added today a launch screen for retina hd 5.5 / 4.7 and now when I run the app in the simulator my uitableviews only take around 4/5 of the full width instead of full width .... can't figure out why adding a launch screen would modify layout of my uitableviews ....? Navigation bar and other screens seem untouched though ...
Any help appreciated.
you need to add the images for the 2x & 3x because when you add large size image then at the run time this image get resize as per the actual width of the image it utilize memory lots of memory to do this & some time if your application have too many images then you will get memory issues
if you want to test this then run your application in iPhone 5 then see the memory utilisation by first keeping the high resolution image now take image which will be of appropriate size to iPhone 5 & then run again you will see the difference
so the best practice is to use different image for different size & not images in this fashion.
The answer to your second Question
if you are not adding the splash screen for iPhone 6/6+ then iOS stretches your UI of iphone 5 to fit into the size of the iPhone 6/6+.
But when you add splash screen it stops doing that.
late to the party but yes you need to manage all this resolution by yourself. Otherwise it will consume more memory.
but yes there is one tool which will make your work less by generating all assets for you
AVXCassets Generator
Related
I want to set a background image to my app but the image is not centered. The resolution is 640x1136, I have only one size, do I need more ? What is #2x and #3x ?
EDIT
I ended up spending ~ an hour in chat with the OP, and the solution to their problem was ultimately to remove all launch screen assets from the xc bundle and instead just put a UIImageView on the launch screen storyboard, anchor each side of it to the sides of the view, and set fill mode to aspect fill. That said, the below information is more likely to solve the problem for the majority of people who run into this, I think.
You need different sized images for the different screen sizes & aspect ratios. From the Apple docs:
It’s best to use an Xcode storyboard for your launch screen, but you can provide a set of static images if necessary. Create static images in different sizes for different devices, and be sure to include the status bar region.
The documentation includes a large table with all possible screen sizes one might support.
Many tutorials exist on the topic, and they may be a good place to start. This similar SO question also has a number of useful and informative answers.
Personally, I make one high-resolution image and then drop it into a tool which automatically generates all necessary screen sizes for me. I do the same thing for all the app icon sizes. Many such tools exist; SO is not an appropriate place to pontificate on which tools are better than others, so I will leave that choice (and research) up to you.
As far as where to put the images, the following instructions from Matthew Palmer's tutorial should be sufficient to get you started:
1 In Xcode, Click on your Assets file (Images.xcassets) in the left sidebar. It should open in the main pane.
2 In the left sidebar of the main pane (where AppIcon, LaunchImage, etc. are), right click
3 Select New Launch Image
4 Add your new launch images as normal. If you want something quick and easy to use, Paul Haddad recommends taking a screenshot in the iPhone 6 simulator and using that, or DavidSmith has created some default ones.
5 Change the Launch Images Source from your Target’s settings.
I found a useful list of launch screen resolution sizes here, which I will quote below:
Image Resolution Image name
320x480 Default.png
640x960 Default#2x.png
640x1136 Default-568h#2x.png
750x1334 Default-667h#2x.png
1242x2208 Default-736h#3x.png
768x1024 Default-Portrait.png
1024x768 Default-Landscape.png
1536x2048 Default-Portrait#2x.png
2048x1536 Default-Landscape#2x.png
The link where the above table was quoted from is also probably the best tutorial I was able to find on the topic. Note that, if you make the larger sizes first and drag them into Xcode, Xcode and auto-generate many of the smaller resolutions for you. (For example, providing one iPad resolution will typically be sufficient for all iPad resolutions.)
Ok let's take this one question at a time...
Background Image not being centered, I assume you have an ImageView containing that image... If so you should be able to do something like imageView.contentMode = .center
The #2x and #3x are for the newer phones with higher resolution. It is advised to have all 3. Also if you could show any code that would help.
I am trying to make my app universal so now I have universal image sets but apparently I need to make separate iPad sets. I have images in my Assets that fit an iPhone the way I want, and I can scale up for 2x and 3x, etc. but when I go to iPad what would be the size comparison for the first (standard) iPad image? I just don't know, relatively which of my iPhone images I should use and how much to increase it by for my starting point on iPads.
As of yesterday I had an app using mostly static sizes to fit an iphone 5 screen (320 points width). It was working fine in iphone 6 as well thanks to the system scaling up automatically.
Then I decided to add a retina hd launch image and everything became a lot smaller on iphone 6. So I decided to modify my whole application to use dynamic sizes and fonts so that it would fit the two iphone types the same way. And now it is working quite good.
But after these few hours of extra work, I keep asking myself the same question... what was the point? Why would you want to use dynamic sizes that fit both iphones when you can make it work for iphone 5 and let the system scale up automatically?
the use is: more screen estate. You can fit more on the screen.. at the least images or maps could be bigger while buttons retain there size -- they normally don't need to be bigger :) same for the keyboard.
you don't just get everything scaled but you can decide what is scaled and what isnt
is it not enough to supply just 3x resolution image (e.g for a view or button) in Xcode so that it looks good on iPhone 5,6,and 6plus devices
( i.e leaving 1x and 2x in an image set blank )
My reasoning is that 1x image may look blurry on 6 plus but 3x image should look fine on 5
Basically i am asking so that i can communicate the same to my graphic designer and he should be fine with supplying a singe size rather than three sizes for all images
This got asked and answered many times regarding 2x assets, and the answer hasn't really changed (but it's hard to track down duplicate questions when I'm posting from my phone).
If you ship assets with a higher scale factor than the target device, they will display just fine. But downscaling them in real time has performance costs—they use more memory, they take longer to upload to the GPU, they take GPU time to render. Some of these costs are trivial, others aren't. (Remember, a 2x image is 4x the data of a 1x one, and a 3x image is 2.25x the data of a 2x one.) And they add up for every image in your app.
Most importantly, the devices with lower scale factors are the ones with less CPU/GPU/memory resources to spend on downscaling.
So, what to do? Well, if you don't want to have your artist deal with multiple scale factors, just order the 3x artwork and scale it yourself in Photoshop (or heck, even Preview) before you ship. It might not look as nice as if your artist tweaked it for each size, but it'll look about as good as real-time scaling without the run-time performance costs.
Or, with Xcode 6, you can put a PDF in your asset catalog, and Xcode will automatically generate PNGs for each size at build time. (This is an Xcode feature, not an iOS one, so it works even if you're targeting iOS 7.)
The problem with this idea is that in iOS 8 the iphone 4S is still supported and it has a different aspect ratio than every other iPhone. It renders at 320x480 at 2x so creating images to fit this wouldn't look grainy. The other 3 screen sizes would work if you go with the 3x scale which would be 1920x1080 for every page and just downscale the size for the 4in and 4.7in screens. You will likely need 2 story boards for the app (one for 3.5in and then the other for the 3 other screen sizes). Auto-sizing wouldn't really work in this case unless you changed the image of the UIImage because it would have a shortened length while maintaining the same width.
EDIT: changed the iPhone 6+ screen size to account for the 1.15x down scaling
and changed the rendering factor to match the comment below
I Just started developing an Universal iOS app for which I need to set the Background image.
Instead of using 3~4 different size images for iPhone, iPhone-retina, iPhone5 , iPhone5-retina & iPad, iPad-retina , I Just want to take one Highest resolution Image (say 1024*780), Which I want to use to fit all the above mentioned devices. How???
self.view.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:#"sfond-appz.png"]];
& it is not occupying the exact screen size for smaller devices. it is shrinking.
Please Advice!!!
If Apple suggests to use different images for each kind of display there is a specific reason, and that reason is memory.
As display size increases it increases also the memory available on the device that's because bigger images require more memory. Even if you want to resize (not stretching) them at runtime, the first time you open it will occupy that memory until you release it. The memory occupied it doesn't have to deal with the file size.
If you still want to try take a look at this library that will help you to resize (not stretch) images at runtime NYXImagesKit
I'm doing the same thing in one of my apps in the App Store. On the main menu view, I use a UIImaveView as the background and set the mode to Aspect Fit in Interface Builder. I use struts and springs to keep it aligned to the edges.
For a universal app, you'll create this UIImageView on both the iPhone and iPad story board (or .xib files) and use the same image file.
However, I still have a 2x version for retina displays. So, I use just two images to cover all devices, orientations, and resolutions.
It will consume less memory if you create a background image to fit each device, but you will obviously increase the bundle size. In my case, the goal was to keep the bundle size small (under 50 MB for cellular delivery), and I had memory to spare.