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"
Related
I have to paint some pictures for a small display of a micro controller. The Display has a resolution of 128x64 Pixel. But the Pixel aren't a square. They have a width of 0.5 mm and a height of 0.75mm. All my nice drawn images in GIMP look ugly on this display.
Can i change the ratio of drawn pixel in GIMP so i can see the image the same way like on my micro controller screen? Is there a setting for this or do i need to use my imagination?
I've looked around in settings menu but found nothing ...
thx in advanced
PS: Wrong Network?
Use Image>Print size to set a different definition for the vertical and horizontal axis (don't forget to "unlink" the two entry fields otherwise changing one will change the other).
Then untick View>Dot for dot so that Gimp no longer maps image pixels to screen pixels and displays the images with their intended definition (and aspect ratio in your case).
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 want to know how can i use this property for UIImageView.
Stretching properties are pretty simple, as stated by Karol Kozub in this article:
The fraction of the original image left without stretching on the left
is specified by X
The fraction of the original image that gets stretched in the x-axis
is specified by Width
The fraction of the original image left without stretching on the
right is equal to 1 – X – Width
If we use 0 for Width the stretched area will interpolate between
the last pixel of the left part and the first pixel of the right part
The y-axis works analogously
This sets the contentStretch property for views (this is a UIView property, not specifically a UIImageView property). This property has been deprecated since iOS 6, however, so you shouldn't use it.
The replacement, specifically for images, is resizableImageWithCapInsets. The normal use of this is to create an image with a left and right side (or top and bottom), and a single-pixel wide "middle" that is stretched across the view. It's common for custom buttons both because it's flexible to a variety of widths, and because it saves some space.
See "Defining a Stretchable Image" in the UIImage docs for full details.
I have simply dragged UIImageView into storyboard and made it square. I added a pink background to show the effects of the leftover space in the ImageView. In each case I added either a taller image (1st image) and a wider image (2nd image), as well as a text label. Here are my results.
So the obvious question is....how can I get rid of this extra (pink) space and keep the integrity of the photo (that is, to not have to stretch or lose part of the image)? If I wanted to be able to scroll through photos, it would be nice to have them all the same width to the edge so they look neat and orderly (if they were portrait), and if I wanted to have text under each, I'd want the text to be closer to it, rather than have all the blank (pink) space in between if it were landscape. And obviously different size images will give different sizes of blank space.
So I'm thinking what I could do is before displaying the image, get the size of it, then just have a designated distance from either the label or the edge of screen, depending on the orientation of the picture, and then creating/changing the size of the UIImageView with a bit of math and using the image dimensions before inserting the picture into the ImageView. Is this possible? Is there another method I can't quite figure out?
Just look at any decent photo app and they are nice and neatly organized/displayed despite being different sizes, orientations, etc and I'm wondering how to pull this off. I obviously haven't gotten too deep into using images past simply showing them in a pre-determined ImageView.
Thanks for the help/suggestions!
Try this... set your UIImageView to AspectFit (not AspectFill since that will lose some of the image) and using constraints do the following:
centre the UIImageView in the container both horizontally and vertically
set the UILabel to float below the UIImageView by whatever distance you desire ("standard" is usually good)
set the left, right, and top constraints on the UIImageView to be >= whatever distance you desire
set the bottom constraint on the UILabel to be (once again) >= whatever distance you desire
The effect of this should be that the UIImageView will properly resize itself to its intrinsic size and the constraints should properly position it and the label.
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.