I'm trying to implement a "Launch Screen" .xib so that my app will get "This app is optimized for the iPhone6 and iPhone6 Plus" denotation in the app store.
So I create a new Launch Screen .xib template, delete the included label, drop a UIImageView onto it, I push the pin button and I set all the "spacing to the nearest neighbor" constraints to 0, I set the UIImageView to aspect fit, and have it point to one of my asset catalogs.
When I run the app on my phone, I'm getting some very weird results as far as the positioning of the UIImageView and the size of the image in it (it definitely isn't filling out the screen with the image). Does anyone have anyone have any idea of what I'm doing wrong here?
You don't give any actual details of what you are doing, so one has to guess. There are, however, two things to keep in mind here:
Where the image is shown doesn't really have all that much to do with the position/size of the image view. It has something to do with it, but the most important thing is actually the Content Mode of the image view.
Image views under auto layout are tricky, because they are resized based on the image - unless your constraints completely determine the height and width of the image view in some other way. In all probability your constraints are not doing that.
So the problem I was having was I trying to link the LaunchScreen.xib to a LaunchImage asset catalog. This will not work, you have to link it to a normal image asset catalog and use the universal image grouping.
Related
I want trying to place two different UIImageView at different position in my iOS project using Storyboard. In one resolution, I can able to set this properly but if I check into other resolution then its not looking properly.
Definitely I am new in iOS application development so making small mistakes.
I have actually make my layout and graphics in iPhone8 Plus resolution and here is what I have designed page in Storyboard.
Its looking proper as per my design layout but as I switched my layout say in iPhone5s then I got horrible result.
Please check below image:
As per my best understanding, I have set few constraints too. That you can see in both images. At present I just want to worries about header and footer logo UIImageView's scaling and positioning. If these two Views get solved then I will manage other Views too.
EDIT:
Here you have Footer Constraints:
#1x,#2x and #3x image resources already exist in project but as per my thinking its not get detected.
In terms of creating UI screen, I have followed reverse path. Actually I have designed graphics in 1080x1920 resolution so its my #3x and then I have cutting down size of each object respectively for #2x and #1x resources.
Please give me some help into this.
set the size of image in 1x and add the image in 3x format, for example your image name is xyz.png then it will saved as xyz#3x.png and xcode will automatically use this image on your app. you just have to calculate the size of the image in 1x set it to the view and everything will work.
Please check this and let me know in case it doesn't work.
You only need to set the constraints for your logo UIImageView's like this:
For logo_main:
top=20 (your value), bottom=20, leading=20, and trailing=20
For MainFooterLogo:
top=0, bottom=0, leading=8, and trailing=8
and set UIImageView's Content Mode to Aspect Fit:
Your problem will be solved but you need more constraint and may be a UIScrollView for your middle container view.
I designed an interface in sketch for an iOS app that I am creating and then exported the artboard as a pdf and placed it in Assets.xcassets in Xcode. I am now trying to make that image show up on the entire screen for all screen sizes. When I created the image in sketch, I used an iPhone 6 screen size (375 by 667). In Xcode now, the image takes up the whole screen on a iPhone 6 screen, but it doesn't take up the whole screen on any other device. It is too large for an iPhone 5 screen, so only part of the image is shown, and it is too small for an iPhone 6+ screen so there is white space on the screen. How do I make Xcode scale this image for all the different screen sizes? Thanks
1) First off make sure you're actually saving the asset as a vector:
It'll say Universal under and on the very right you'll notice it says Scale Factors: Single Vector
Now if You're still having issues it probably just means you haven't added constraints to the image. So it's just using the default size (the size you exported in).
If you're using storyboard or XIB make sure the image takes up the space it wants, click on it, then press on the little triangle on the bottom right of the storyboard and under Selected Views press on 'Reset to Suggested Constraints'
This should make sure the image resizes with different views. But because you might get different dimensions you'll probably want to set the UIIImageView's mode. Again on storyboard you can click on the imageView and then:
If you want the image to keep its aspect (not stretch in any direction) but want it to fill the entire space it has, put the mode on Aspect Fill
I am currently developing an ios app and the scope is limited to iPhones only and portrait mode only.
In each screen there are images, buttons, labels and textFields. The question here is, how do I render appropriate image for device from the Images.xcassets?
What I am doing now, written below -
From Sketch design application, exporting my images for 1x, 2x and 3x (Screens designed by a UI designer)
Adding them to Xcode project (drag and drop from finder to xcode)
Add new image set in Images.xcassets (naming it as "MyImages") and drag drop my images for 1x, 2x, 3x.
In the storyboard, on a viewcontroller, adding an ImageView
For the image view, selecting Image as "MyImages" from Attribute Inspector.
Once the above steps are complete, when I test the app on simulators starting from iphone4s, iphone5, iphone5s, iphone6 and so on.. (all the simulators available on Xcode 7.3), I don't see the appropriate image is being rendered.
Is my approach correct?
Also, how do I debug a UI element on the screens? Like, how/where do I check for what image is rendered? Its size (W X H)?
Added Screenshot
#Lohith Korupolu:
The screen shot you provided is for universal size (iPhone/iPad). From the additional information provided in comments, this would lead to issues with AutoLayout constraints that would stop the image showing on screens of a smaller size than that shown in your StoryBoard.
E.g. I have replicated your issue on storyboard...
This results in the following in Simulator for iPhone 4s....
i.e. Text is there but NO IMAGE.
REASON: The autoLayout Constraints set for the larger "Universal" Screen on any of two opposite sides would make the image invisible/ disappear when viewed on a smaller screen.
SOLUTION:
1. Clear the Autolayout constraints for this selected Image in Storyboard. See next picture...
2. Add AutoLayout constraints as below x2 pictures. (Top constraint, Height + Width) (horizontally in container). Remembering to tick "Items of new constraints" for both.
3. Run Simulator for iPhone 4s... E.g.
** The same situation is occuring with the other iPhone size simulator Runs. **
****** All Working ******
They should all be 2x images for iPhones apart from the plus size iPhones which should be 3x. Is that not what you are seeing?
In terms of debugging / checking this - you can put place holder images in your assets with labels or different colour tints to distinguish them from each other and then replace them later with images that give the desired final appearance once you know that everything is working as expected.
Using 2x images for iPhones approach works fine, however, there is another more straight forward way without having to resort to multiple image files for 1x, 2x, 3x in Xcode, by use of good large quality PDF (vector).
1. Create a Large PDF of the image/Graphic image you want to use
2. Import it into 'Assets.xcassets' - drag and drop (Into Xcode)
3. Go to the utilities panel on the right for the 'Attributes Inspector' (when the image is selected)
See Screen shot (a)
Under 'Scale Factors' the selection from 'Multiple' to 'Single Vector'
Now when you got to 'StoryBoard' and add the image - Simply select the PDF's name.
Xcode will automatically render it to correct size etc at run time for you. All the work is done by Xcode.
Exceptions:
It does not work well with images for icons inside the TabBar or Navigation Bar Items.
Note:
Vector graphics are sharp and ideal for High Definition (HD), but although Xcode accepts the Image Asset as a vector from the PDF, it doesn't seem to keep the vector but converts it into an actual image with pixelation problems when zoomed in, from a HD perspective.
In order to do an initial check on a boolean on the first launch of my app, I want to have a splash screen that acts as the initial screen, then decide which screen to navigate to... I know Apple doesn't suggest splash screens, but this should only take a few milliseconds...
Anyways, I want this screen to have an ImageView that fills the entire screen, and the asset to be an exact replica of the Launch Image, so that the user doesn't know see a visible difference in the image positioning.
However, I am unable to get the exact positioning correct on a 4-inch device or larger...
I've tried both setting the mode in Storyboard and setting the image and it's contentMode programatically... but it always seems to have a slight positioning change.
I've also tried to set the Launch Screen File property in my General Target settings ( to be the first screen of the storyboard, which is the ViewController I am referring to), but that just shows a black launch image :(
Ultimately, if I was able to access the actual LaunchImage from my .xcassets, that would likely solve the problem... but, as per this post, that seems impossible.
Any ideas ?
iOS app projects come with a LaunchScreen.xib file now, so I would suggest putting the splash screen image there. Also, when I checked the Launch Screen File option in General Target Settings, it gave me an option for the LaunchScreen.xib file, so whatever file you put there probably has to be a xib or storyboard file, not an image. If you want to use only images, the Launch Images Source option above the Launch Screen File option looks like what you want.
If you want to keep implementing the splash screen dynaically, you should not have to change the contentMode. The code should be something like:
UIImageView* imageview = [[UIImageView alloc] initWithImage:[UIImage named:#"splashScreen.png"]];
[imageview setFrame:[[UIScreen mainScreen] bounds]];
It's my understanding that apps for iOS 8 should have a storyboard file as launch screen rather than an image. I've created a really simple launch screen file that has any width and any height, and has one label of plain text reading "placeholder" and set it as my launch screen. However, when I try to run my app on the iPhone 6 and 6 Plus simulators, there's black bars around the background and the buttons on the main menu are out of place. The problem doesn't seem to be present in the 5s or iPad. Most of my assets aren't optimized for the 6 and 6 Plus though, since they were created before they came out. Is that why this is happening? Or is it something else? Thanks in advance.
Edit: Apparently, putting in a launch screen stops the app from automatically scaling. Is there a way to have both a launch screen, and keep the app scaling? Or do I need to make new assets?
This is a bit of an old question, and I ended up using a launch image instead of a launch screen, but you can probably solve this by using constraints. If you set top, bottom, leading, and/or trailing constraints on an item in the view, it'll scale itself to fit those constraints (if possible). For text, it has the autoshrink property which you can change to minimum font scale (instead of fixed font size), though I'm not sure how you can scale text up. The autolayout documentation is here.
To create a launch screen from a xib file first create a new file from under “User Interface” and select the option called “Launch Screen”
Using autolayout, design the first view of you app so it scales to suit all resolutions that your app supports.
Using the new Launch Screen
Under the app setting select the newly created Launch Screen from the app options.
This is the example for using a xib file. It can also be done using storyboard as shown in Ole Begemann blog