Just working on an iPad app with a significant amount of text and I was wondering if use UITextFields and UILabels was more of a performance/memory hit than simply using a UIImageView with a PNG of the text.
In some cases the text animates, but it most cases its static.
Thank you.
Update:
Taking Marc's advice I did a little digging with a new XCode project. Here are the experiement details:
Test 1:
Brand new Single View Template XCode Project for iPad (not using storyboards)
One Image view centered with a 678x828 image of the paragraph text (36k image)
The custom fonts and stylings were baked into the image.
The result:
756kb of Live Bytes & 842kb of Live Bytes w/ Retina PNG
Test 2:
added a second Image View with a different paragraph (699x749 82k)
The result:
767kb of Live Bytes & 854kb of Live Bytes w/ Retina PNG
Test 3:
Took the same copy and added 4 UILabels
Styled the fonts to match the fonts of the baked in PNG
Embedded custom fonts
The result:
965kb of Live Bytes
Test 4:
added 4 more custom text labels with the same text & style from the second image view
The result:
1024kb of Live Bytes
From this angle it appears that using PNGs with baked in copy and styling has a lower memory foot print and scales better. Obviously this is a very quick & dirty experiment.
Related
I am having an issue where the images are rendered with a strange glowing effect around them, pictured here:
It is tough to see from this close but is extremely noticeable when viewing the app. Also, taking these screenshots into a design program and using the color dropper will prove that there is a glow around these images. Each of these images are PDF files, rendered as a template image so that I can change the tintColor instead of adding more images to my assets folder for each color.
I have read some other articles and questions that says there isn't full support for vector graphics yet (here). However, that is outdated as it specifies iOS 7 as the latest version at the time of writing. Now in iOS 13, I assume there have been changes. Another article I read said to never use vector graphics as they can get messed up when Xcode generates PNGs from the PDFs (here).
Information about the assets in my Images.xcassets:
Render as: Template Image
Resizing: Preserve Vector Data
Scales: Single Scale
I also tried to implement 3 PNGs at different sizes (#1x, #2x, #3x) for each image but got the same effect.
Creating new images with a smaller border size got rid of the glow but obviously, that doesn't fit the design style style that I want in an app. I designed these Icons in Sketch and used a border size of 3, then exported as PDF.
So, as I was writing this question I seemed to have found an answer.
It turns out it had nothing to do with anything in Xcode. The problem lies with Sketch. I redesigned each element in Adobe Illustrator, exported them as PDFs, set the same settings in the assets folder like so:
Render as: Template Image
Resizing: Preserve Vector Data
Scales: Single Scale
Here are the updated screenshots:
I am using:
Sketch (Version 52.5)
Adobe Illustrator (Version 24.2.1)
I don't know why this is an issue, but I hope it can help someone who has this issue down the road. If anyone has any more information on this, please write a comment :).
I am using xcode with Swift to develop a very simple application that should only run on iphone7. I have a bunch of UIImages and UIButtons with images in my application and I have received a bunch of PNGs to use in the application.
They are named more or less image1.png, image2.png and so on.
If I check the dimension of the PNGs, they look right to me.
For example one background image has the following dimensions: 750 x 1335.
Once I add this PNG to my application, and add it to the story board, the image looks huge.
I need to manually enter the following dimensions 350 x 887 (which is half the size) in order to get the image to fit the size of the phone on the screen.
I have no idea what is going on here! It is something I am doing wrong or it there something wrong with the exported PNGs?
I think you content mode is not right. This is how to fix it:
Click to your UIImageView
Look at the right hand side and choose View -> Content Mode to Aspect Fit
This is the document about content mode of a Image View
https://useyourloaf.com/blog/stretching-redrawing-and-positioning-with-contentmode/
I hope it can help you
iPhone's physical screen resolution is rarely referenced as is, instead it is calculated in points. On the early iPhones 1 point was actually 1 pixel. On modern iPhones 1 point is actually representing 2x2 pixels, or sometimes 3x3 pixels (for Plus models). To make it all work, all the graphics for UI elements (buttons and the like) are provided in two or three resolutions:
for the case where 1point = 1pixel
in such case the image name is not postfixed with anything (image1.png)
for the case where 1point = 2x2pixels
in this case the image name is postfixed with #2x (image1#2x.png)
for the case where 1point = 3x3pixels
in this case the image name is postfixed with #3x (image1#3x.png)
You have two ways of managing this.
First goes like this:
Rename all of your images, so that they all have #2x.png at the end. Like this:
image1.png becomes image1#2x.png
image2.png becomes image2#2x.png
Drag all those images to your Assets.xcassets folder in XCode:
Now you can assign the images to buttons, backgrounds, and pretty much anything else by calling its name (omitting the #2x at the end), like this: image1, image2, etc. The resolution will fit now.
You can also choose the images in drop-down lists in your Storyboard to apply them to different elements (like said buttons).
Second way is similar.
You don't rename the images, and drag them into the Assets.xcassets folder just as they are. Then you manually drag the thumbnails of your images into 2x slots. Here's an example with an image called 'gear':
For more information on how physical screen resolution of the iOS devices differs from its internal representation (which is in points), refer to this handy guide: https://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions
I am trying to create one vector image for all screen sizes of iPhones. I created pdf file using Illustrator with size for iPhone 6 plus i.e. 1242*231 (231 is my required height of image) and Included it in image assets and changed scaling factor to Single Vector.
Now it is being displayed in iPhone 6 plus with no problem. But when i try the same Single Vector Image in iPhone 6 it is squeezed.
I found out on web that pdf image is converted to #2x and 1#x automatically. like if i have 300*300#3x it is converted to 200*200 and 100*100.
According to this then it is the right behavior because 1242/2 = 621 and it required 750 to display accurately.
But my question is that wasn't the vector image suppose to adjust it? Any other work around this problem?
Try to save it in svg format, this would be better solution.
I am new to iOS programming and programming in general so this will probably be a fairly easy question to answer for someone who is experienced.
I am making a game using sprite kit and I need to include different background image sizes for the different retina display sizes on the iPhone 4 and 5. I am using a graphics package to create the images in .png format then adding them into the project, the issue I have is that, if I make a 640x1136 size image, it works on the 5, and if I use a 640x960, it works fine on the 4 but leaves blank space around the edge on the 5. (I am running it on the simulator)
If I include two identical images with different names, one for each device, how can I load the right one in? Do I only need high resolution image and can use some code to change how it loads the image in, so that it covers the whole screen without pixelation or loss of quality on both devices?
Any help or advice is appreciated. I apologise if this is a simple question, thanks for your time.
Note:
I found out plenty on the internet about using the #2x suffix for high resolution images, but that's not what I'm looking for. I know how to code for different resolutions, just not two different screen sizes with the same resolution, if that makes any sense.
If you're on iOS 7 SDK which you most likely are, make use of the .xcassets catalogue. It has options for different screen sizes, put the different versions of your image there. And then load image in code.
I’m new in iOS and trying to make simple app with hierarchy of viewcontrollers. In the last one I wanna display scrollable image (which can also be zoomed at least x1,5), containing some small black and white picture and a piece of text. Initially I planned to make vector image, convert it to .jpg and use UIScrollView for displaying. But I found out that .jpg ( approx. 150 KB) didn’t provide a good quality for displaying text. As I have to use a lot of images I don’t want to increase image size. What is worse I also want it look good on retina display.
Can you recommend a way how to display image, containing text, with enough quality?
I mean that I don’t want the user see the separate pixels of letters in the text. Just like when you read text in your e-mail in iOS. Image size should be as small as possible. Planning physical size of image – approx. 5 cm x 15 cm.
Any help much appreciated
Thanks
To get good edges you would need to use png not jpg, which will make the image sizes much larger. I have a better suggestion, more code but better solution.
The answer is to not put the text into the image, but to draw it over it in real time.
You would:
associate text at some coordinate in the image (say a CGRect) with the image
create a uiimageview subclass that in the drawRect routine, after calling super, draws the text using the NSString categories on UIKit (which let you draw into a context)
To get going on this please create a small one vc project and get the subclass working there, then back port it to your primary project.