I have a universal application.
I have a main menu with 2 buttons. The button have a different size\shape on ipad and on iphone.
btn_main_all#2x~ipad.png
btn_main_all.png
I'm using xcode filename to get the good image from each device(work great). But the image are not resized to the good specific size. (i've try each combinaison in storyboard... top left, fit..., etc.
How can I have the button to get the real image size ?
Related
How can I change button background image - I need one for all iPhones and another (due to size) for iPads. I have square buttons imitating keyboard with smaller background image. On iPad font on buttons is twice bigger, but they are not squares anymore. So I made bigger backgroud image to make them squares again, but how can I change that image only for iPads in storyboard. Is it possible?
Thanks.
on iPhones:
on Ipads:
You can design the layout using size class. The size class for iPad is R*R.
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.
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.
I'm coding a remote control with a background (designed in Photoshop) already for the iPhone 6+ with the proper resolution, which I use with an UIImageView at full size.
I disabled Autolayout/Size Classes and set the size to Inferred. Further I uploaded all relevant LaunchImages for proper scaling.
The UIImageView scales properly for all screen sizes, but the buttons I put over the background are moving.
For example:
All buttons (over 1-9, Power Off, Menu ecc.) should always stay at the same position (in releation to the selected device and screen resolution).
I can't get it, that all buttons stay over the designed photoshop elements.
Please give me a good advice, to solve this issue.
I would recommend using size classes and Autolayout. This type of thing is exactly what they are made for.
This youtube video is a great introduction to size classes and some Autolayout:
https://www.youtube.com/watch?v=IwSTXY0awng&feature=youtu.be