I'm using slicing in the asset catalog to make my image stretch vertically, which seems to work fine if I have the view mode set to Scale to Fill
But when I change the mode to Aspect Fit, it only shows the caps of the slicing like this
I want to use Aspect Fit to keep the round shape of the circular top. How would I make this work with slicing?
For reference, this is my slicing:
One approach would be to slice the image into three pieces:
A top which has a fixed height in order to keep the proportions of the shape.
A body which stretches in height according to the content.
A bottom which also has a fixed height, again in order to keep the proportions.
By slicing like this, you have full flexibility of the height of your content. You would then align these three pieces e.g. by using auto layout.
Related
Here's the Sample Project
Problem
I want to make an image to have a fixed top half part and a stretched bottom half part which to make it properly resized in any height.
And I use image slicing in Assets.xcassets to achieve that. The image can be resized properly, however, it displays slightly different in different sizes.
The Original Image
Image Slicing
Just simply slice the image from the vertical center.
Storyboard
Content Mode is set to Scale to Fill
Height constraint is equal to its width constraint multiplied by 0.8
Result
I think it should display nearly the same images in different devices. Because everything is the same except for the image assets(2x, 3x).
However, the result is not what I expect. The image seems a bit squashed on iPhone 8 PLUS.
At Last
I'm using Mojave with Xcode 10.1 (10B61).
Anyone knows what is the cause. And how to make the image vertically stretched properly?
The reason it looks "squashed" is because the image is being stretched horizontally.
Your slicing allows the top portion to remain a constant height, but not a constant (or proportional) width.
Here, I use your original image without any slicing... each image view is the same height (201-pts), so you know it's not scaling vertically, but different widths so you can see the result of horizontal stretching:
What you may want to try is clipping your original image to only the top portion. Setup the constraints on that image view to stay proportional, and then use a solid color image view (or just a UIView with matching background color), as the lower "vertical stretch" section.
i wonder what is the best practice for ui design for iOS regarding ui element sizing, especially buttons. In my example all buttons are based on images, no text.
I see two approaches
Absolute Sizes
PRO:
image based buttons do not need rescaling, avoids blurriness
simple setup in interface designer
CON:
buttons look smaller on bigger displays (ipad2 vs. iphone 4) relative to other ui elements
Relative Sizes
PRO:
buttons look better in whole ui appearance across all display resolutions and densities
CON:
buttons may look blurry
interface builder constraints will get a bit more complex
Did i forgot something? Or did i get it wrong?
For now i was designing the ui completely relative to the screen. So lets say a button had the width of 10% of the screen width and an aspect ratio of 1:1. When the ui was completely relative, everything seemed consistent across all devices. But my questions started in the scenario of #2x density buttons. The iphone 4 has a width (portrait mode) of 640 while the ipad2 has an width of 768. Should i create my #2x, 10% button image with a width of 77px or 68px? I would say 77 because downscaling is better than upscaling.
Well, this leads me to my question:
What is the best practice to design the UI? How should we handle the image design for buttons?
Usually the problem is the text got stretched.
You can set the strech area by following this:
https://developer.apple.com/library/ios/recipes/xcode_help-image_catalog-1.0/chapters/SlicinganImage.html
If you use gradient and it became blur when stretched, you need to draw the gradient using Core Graphics.
I'd say there's no ultimate approach for laying out image buttons in iOS and it always depends on what you're trying to achieve.
In your case I would recommend the following approach:
Use layout constraints to position your buttons properly. Use only
spacing constraints, no width or height constraints!
Set the images for your buttons (either in Interface Builder or in code). Make sure to provide each image asset in all three resolutions #1x, #2x, #3x.
If you have multiple buttons in a row give each of them a different horizontal compression resistance priority. This ensures that in case your buttons don't all fit on screen one (or more of them) will be scaled down to fit.
When assigning an image to a UIButton, that image will determine the button's intrinsicContentSize. Thus, the button will automatically take the size of the image (if no other constraints with a higher priority are present) and it will only scale down if absolutely necessary (see number 3. above).
This approach is only possible if you still leave flexible spaces next to the buttons. If you intend to split the screen equally into three columns for example and each button should take the whole width of a column you have no other choice but do let the system scale down the images for devices with a smaller screen size. It always depends on whether you can allow the buttons to size themselves or if you need to force a width (or height) on the buttons from their superview.
I'm new to iOS development and am struggling with interface builder to layout a view that has 3 images. I want three images going across the view. So the images will need to be scaled a little differently for different devices. I am hoping to do this with constraints. I am fairly close. Here is a screenshot:
The images are actually resizing and becoming bigger on the larger device screens which is what I want and the spacing is working to stop them from overlapping each other on small devices. I just need to stop the two side images from being stretched tall. I don't want to specify a height constraint because they do need to resize for specific devices sizes. Any help to add a constraint that will make the outer images not stretch tall is much appreciated.
Set the UIImageView 's content mode to be aspect fit. It will be always stretched in it's correct aspect ratio
Instead of Scale to Fill select Aspect Fit
I am developing a universal app for iOS-7. this particular question is specific to iPad only. I want to place an image as background of root view of a View Controller i.e. the image should fill the whole screen. The 1x image has size:768x1024. This works for Portrait orientations as non-retina resolution of iPad is also 768x1024 in portrait. In Landscape however the image does not fit. I have tried using ScaleToFit but since aspect ratio of image is not preserved I can not use ScaleToFit(their are things in image which look odd when not scaled proportionally in both axis). AspectFill resizing seems most suitable for my need, but their is a small problem. As defined in Apple Documentation "The content is resized to completely fill the bounds rectangle, while still preserving the aspect of the content. The content is centered in the axis it exceeds.". I do not want the content to be centered in axis in which it exceeds, I want it to be aligned to top/left edge.
So basically I want two things:
Aspect Fill
The content remains aligned on the Left/Top edge.
Is it possible to achieve this. Any code-snippet will be great.
Thanks
You will have to subclass the View Controller's view and manually scale and align.
Look at the code snippets in THIS answer.
Adjust imageViewXOrigin and imageViewYOrigin to align however you want.
Really the only way to get around the content fill mode is to have two different images, one for each orientation. I'd suggest changing the image in the view controllers willAnimateToOrientation: method so that you can put the image changes inside UIKit's animation block.
I'm trying to slice an image in assets Xcode 5. I don't know if what I'm trying to do is possible with slicing.
The image looks like this:
I need to change the width and the height of the image, although not at the same time. The closest I've got is when I use Horizontal for the height and Vertical for the width. The problem is when I change the width, the left side of the image starts as a straight line and the skews and change to the original shape.
I'm about to give up on the idea of slicing and just create three images, left, center and right. Is that the only way to go?
This is how my current slice looks like:
Is there any way to change it so it works at least for the width?
UPDATE
Instead of slicing the image I used a mask and moved the mask.
Slicing works by taking the center section, and stretching it to fill the required space and then putting on the image end caps.
Because your button has a continuous diagonal line you will not be able to slice it. It will stretch the image out like so:
In fact even if you make a centre section and end caps you will still have the same issue as this image can only be scaled.
If you only need a finite set of heights then you should create individual assets for each height that can be sliced horizontally. If you need N heights then you should look into using core graphics to draw your shape in code in a -drawRect: method for arbitrary dimensions.
P.S. if you want to horizontally slice so you can grow the width its most optimal to have only 1 pixel width of image that will be stretched out so your button image resources would look a bit like this:
Aha. TIL: You can change the slicing options from the attributes inspector in the right hand pane in Xcode. To make your slicing work choose only "Horizontal"