I need to create table cells with a very complicated background image for each: http://i.stack.imgur.com/PBL0S.png
There is a transparent circle in the center of it. And height of my cell depends from its content - it may vary. But I need this circle to always be in the center of background image and have a constant size.
My solution is: cut the image along for 2 parts and then, using the method resizableImageWithCapInsets: create two UIImageView's and locate them one below the other. There is the problem: this method is only availible since iOS 5, but my app needs to run under iOS 4.3. Unfortunatelly, I can't use method stretchableImageWithLeftCapWidth:topCapHeight: because top and bottom caps on my half-images obtained with different heights.
Please, help me to create the method with the same functionality resizableImageWithCapInsets: Or, if there is any better solution, tell it to me, please.
The straight-forward approach can involve three imageviews:
top imageview: stretchable image with the top part of your tag image
center imageview: non-stretchable fixed size image with the center part of your tag image including the white hole
bottom imageview: stretchable image with the bottom part of your tag image
subclass UITableViewCell and override layoutSubviews such that the top image view are always the same size and the center image view preserves its size and center position.
EDIT:
You can also use the stretchableImageWithLeftCapWidth:topCapHeight: method with different cap heights for different images. I don't see a reason why your approach should not work as well.
Related
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 have an image of the UiPopOver
I want to make it bigger or smaller based on the text that i want to display in this. My plan is that i will adda text view inside the image view and scale it accordingly. I am facing difficulty in scaling the image to bigger or smaller.
For example if i know that the text that will fit in it have size of CGSize(80, 100), the how i can scale this image view to a specified size without pixelation.
Any help will be highly appreciated.
you can make the resizable image with the following insets (their positions marked by the colourful lines below), that will do the job for you:
you can find more information about how you can me a resizable image in the UIImage Class Reference, the related method's name is –resizableImageWithCapInsets:.
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"
This seems like a silly question, but I have a UITableView and each row has a UIImageView with a dimension of 80x80. The actual content of the image is either 80x80 or 80x64. I recently added some new 80x64 images and the heights of those are being stretched whereas the old 80x64 images are not (they are simply centered within the 80x80 frame).
I vaguely remember setting some kine of xattr on my images a while back, but I can't seem to find what it was. Would this have something to do with my new images being stretched vertically?
You might want to look at the contentMode for your image view, specifically try UIViewContentModeScaleAspectFit. I notice this, especially, when I set image properties for UITableViewCell cells asynchronously. But if I have the routine that is setting the image to also set the contentMode, and all is well.