I'm trying to display a top portion of an UIImage.
I know I can use the following code and display the middle portion. I'm just trying to figure out how to do the same for the top portion:
imageView.contentMode = UIViewContentModeScaleAspectFill;
imageView.clipsToBounds = YES;
The UIImage I get from the server is not necessarily the same size, so I cannot use UIViewContentModeTopLeft. I want a way to scale the image and show the top portion.
Thanks.
You want to display an arbitrary rectangle of your image, so the easiest way to go will to be to put your imageView inside a regular view. You can set the frame of the image view to display the bit you want and set the enclosing view to do the clipping.
e.g. you have a 1000 x 1000 px image and you want to display the rectangle 200,200 to 400,400
UIImageView* imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:#"SomeImage"]];
imageView.frame = CGRectMake( -200, -200, 1000, 1000);
UIView* enclosingView = [[UIView alloc] initWithFrame:CGRectMake( 0, 0, 200, 200);
enclosingView.clipsToBounds = YES;
[enclosingView addSubview: imageView];
Content mode doesn't matter much in this case, since you're setting the dimension of the image view to match the image.
One way is to call CGImageCreateWithImageInRect on your original image to create a new image with just the top portion.
Something like:
CGImageRef newImageRef = CGImageCreateWithImageInRect( oldImage.CGImage, CGRectMake(0,0,50,50) );
UIImage *newImage = [UIImage imageWithCGImage:newImageRef];
CGImageRelease( newImageRef );
then display newImage rather than oldImage.
Related
Could any one help me i want to add same image multiple times horizontally with same height and width. Important thing is i am creating image view dynamically i want to use same image view for all images! This is image i want to make horizontally like this but only one row needed like this.
You could achieve this by using stretchableImageWithLeftCapWidth:
UIImage *backgroundImage = [[UIImage imageNamed:#"SheetBackground.png"] stretchableImageWithLeftCapWidth:0.5 topCapHeight:0];
As per your request:
UIImage *backgroundImage = [[UIImage imageNamed:#"q4Ses.png"] stretchableImageWithLeftCapWidth:0.5 topCapHeight:0];
[_scro setBackgroundColor:[UIColor colorWithPatternImage:backgroundImage]];
And using your image:
The output is:
You can set this image on top of either UIScrollview, UIView and buttons. You do not need a for loop for that.
UPDATE:
The above code is for filling the entire background. If you wish to add only for one row then you have to create one UIView and set its colorWithPatternImage like below:
UIImage *backgroundImage = [[UIImage imageNamed:#"q4Ses.png"]
stretchableImageWithLeftCapWidth:1 topCapHeight:0];
UIView *v=[[UIView alloc]
initWithFrame:CGRectMake(0, 0, _scro.frame.size.width, 45)];
[v setBackgroundColor:[UIColor
colorWithPatternImage:backgroundImage]];
[_scro addSubview:v];
And the output:
Make a view of the height of image. But this view can have any width.
Then set your tile image in this view with following code.
UIImage *tiledImage = [UIImage imageNamed:#"myTiledImage.png"];
self.view.backgroundColor = [UIColor colorWithPatternImage:tiledImage];
This will get you the image tiled multiple times horizontally.
If the view spreads the image everywhere on screen then you'll have to add the following code to your view
self.view.clipToBounds = YES;
UIScrollView *myScrollView=[[UIScrollView alloc]initWithFrame:CGRectMake(0, 0, 320, 480)];
CGFloat scrollWidth = 0.f;
for (int i=0;i<10;i++)//i=10,put as many image number u want to display
{
imageView = [[UIImageView alloc] initWithFrame:
CGRectMake(scrollWidth, 0, 80, 60.f)];
imageView.image=[UIImage imageNamed:#"urimagename"];
imageView.tag=i;
[myScrollView addSubview:imageView];
scrollWidth += 100;
}
myScrollView.contentSize = CGSizeMake(scrollWidth, 100);
EDIT:
You can achieve this in one more way.
CodenameLambda1's answer is better than the above one.But still some changes needs to be done in the #CodenameLambda1's answer..as the SOP's requirement is to display it in scrollview.So instead of self.view use scrollview.
UIScrollView *vie=[[UIScrollView alloc]initWithFrame:CGRectMake(0, 0, 320, 60)];
UIImage *tiledImage = [UIImage imageNamed:#"login"];
vie.backgroundColor = [UIColor colorWithPatternImage:tiledImage];
vie.contentSize=CGSizeMake(1400,60);
vie.clipsToBounds = YES;
[self.view addSubview:vie];
I have UIImageView in which I'm showing 50x100 image.
I want to show only a part of image 50x50 (top part)?
How can I do that?
The very simple way to move big image inside UIImageView as follows.
Let we have the image of size (100, 400) representing 4 states of some picture one below another. We want to show the 2nd picture having offsetY = 100 in square UIImageView of size (100, 100).
The solution is:
UIImageView *iView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 100, 100)];
CGRect contentFrame = CGRectMake(0, 0.25, 1, 0.25);
iView.layer.contentsRect = contentFrame;
iView.image = [UIImage imageNamed:#"NAME"];
Here contentFrame is normalized frame relative to real UIImage size.
So, "0" means that we start visible part of image from left border,
"0.25" means that we have vertical offset 100,
"1" means that we want to show full width of the image,
and finally, "0.25" means that we want to show only 1/4 part of image in height.
Thus, in local image coordinates we show the following frame
CGRect visibleAbsoluteFrame = CGRectMake(0*100, 0.25*400, 1*100, 0.25*400)
or CGRectMake(0, 100, 100, 100);
You can crop the image by using CGImageCreateWithImageInRect, which is Quartz primitive working on CGImageRef, so you would have something like:
CGImageRef imageRef = CGImageCreateWithImageInRect(originalImage.CGImage, cropRect);
UIImage* outImage = [UIImage imageWithCGImage:imageRef scale:originalImage.scale orientation:originalImage.imageOrientation]];
CGImageRelease(imageRef);
When calculation cropRect, keep in mind that it should be given in pixels, not in points, i.e.:
float scale = originalImage.scale;
CGRect cropRect = CGRectMake(0, 0,
originalImage.size.width * scale, originalImage.size.height * 0.5 * scale);
where the 0.5 factor accounts for the fact that you want the top half only.
If you do not want to go low-level, you could add your image to a UIView as a background color and use the clipToBounds CALayer property to make the clipping:
myView.backgroundColor = [UIColor colorWithBackgroundPattern:myImage];
myView.layer.clipToBounds = YES;
also, set myView bounds accordingly.
I might have a solution for you. See if this works. In Interface Builder there is an option about Image content fill properties. You can set it to top-left. Follow the image in interface builder -
After this set the size of UIImageView to 50x50 with "clip-subviews" checked...
Let me start with my code:
UIImage *tempImage = [UIImage imageNamed:#"TileMap.gif"];
[tempImage drawInRect:CGRectMake(0, 0, tileSize, tileSize)];
mapLabels[w][h] = [[UILabel alloc] initWithFrame:CGRectMake(cursor.x, cursor.y, tileSize, tileSize)];
mapLabels[w][h].text = [NSString stringWithFormat:#"%d", map[w][h]];
mapLabels[w][h].backgroundColor = [UIColor colorWithPatternImage: tempImage];
mapLabels[w][h].textAlignment = UITextAlignmentCenter;
[self.view addSubview:mapLabels[w][h]];
I made a map of tiles out of UILabels. I wanted to put an Image on the labels so I used the colorWithPatternImage. It works but my tile pictures are very high resolution and my UILabel tiles can be any size so I need the image to be the same size. What I am currently trying to do to scale it with the drawInRect is not working, any tips?
There is a scale property for UIImages. You could try something like:
tempImage.scale = mapLabels[w][h].tileSize.x / tempImage.tileSize.x
I have a Background.png image with size of 200*100, and i set background image for a uiview as:
UIView view= UIView alloc] initWithFrame:CGRectMake(50, 100, 200, 100)];
view.backgroundColor = [[UIColor alloc] initWithPatternImage:[UIImage imageNamed:#"Background.png"]];
Now, I reset the frame UIView by:
[view setFrame:CGRectMake(50,100,400,200)];
I need to resize the background image in proportion of the uiview, but i have only one fixed size Background.png image. what shall i do.
Take your size accordingly
UIGraphicsBeginImageContext( newSize );
[image drawInRect:CGRectMake(0,0,newSize.width,newSize.height)];
UIImage* newImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
UIView view= UIView alloc] initWithFrame:CGRectMake(50, 100, 200, 100)];
view.backgroundColor = [[UIColor alloc] initWithPatternImage:newImage];
Else take an imageview and set contentMode, If u dont want to tile images
Depending on what your needs are, it might be simplest just to add a UIImageView as a subview of your view, and set its image, letting it handling the resizing for you. Otherwise, you'll probably have some complex resizing and drawing code to write.
I've read various posts on here asking similar questions... I've tried various ways that were posted including bounds and frames etc. including the following:
myImage.frame = CGRectMake(0.0f, 0.0f,50.0f, 50.0f);
and:
myImage.bounds = CGRectMake(0.0f, 0.0f,50.0f, 120.0f);
neither of those work.
However, I find it interesting that the following code let's me move the Image around but doesn't change the width:
CGRect frameRect = myImage.frame;
frameRect.size.width = 50.0f;
frameRect.origin.x += 10.5f;
myImage.frame = frameRect;
So why don't any of these change the width/height of my ImageView?
I found another post on here that basically states I have to right a small book of code to get it resize my image... is that true?
Such as this one:
UIImage: Resize, then Crop
certainly this is simpler than that??
The following will change the size of the UIImaveView, clipping the underlying image without resizing it and keeping it aligned to bottom left of view:
imageView.frame = CGRectMake(
imageView.frame.origin.x,
imageView.frame.origin.y, newWidth, newHeight);
imageView.contentMode = UIViewContentModeBottomLeft; // This determines position of image
imageView.clipsToBounds = YES;
First off, you can't set the frame or bounds of the UIImage - that will only work on a UIImageView.
I've found that changing the frame of a UIImageView causes the Image to be scaled to the new size. Sometimes, that's undesirable - and you want instead to crop the image.
I can't tell if this is what you're asking for, but here's some code to crop an image to a specific size in a UIImageView:
UIImage *myImage = [UIImage imageNamed:#"photo.png"];
CGRect cropRect = CGRectMake(0.0, 0.0, 320.0, 44.0));
CGImageRef croppedImage = CGImageCreateWithImageInRect([myImage CGImage], cropRect);
UIImageView *myImageView = [[UIImageView alloc] initWithFrame:cropRect];
[myImageView setImage:[UIImage imageWithCGImage:croppedImage]];
CGImageRelease(croppedImage);
From what I get of the question, the OP wanted to change the size of the UIImageView when the size of the container UIView is changed. The code below will do it...
UIView * foo = [[[UIView alloc] initWithFrame:CGRectMake(0, 0, 25, 25)] autorelease];
foo.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
UIImageView * bar = [[UIImageView alloc] initWithImage:
[UIImage imageNamed:#"test.png"]];
bar.autoresizingMask = foo.autoresizingMask;
[foo addSubview:bar];
[self.view addSubview:foo];
The key here are the foo.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight and the bar.autoresizingMask = foo.autoresizingMask; lines. Forget either of these, and the whole jigmarole will stop working.
Well, if your read the documentation about UIIMage you can notice that is impossible to change any parameter of an UIImage after create it, the solution I've implemented for use high quality images for change some parameter of (for example) the SliderControl as Screw Image, is the next one:
UIImage *tumbImage= [UIImage imageNamed:#"screw.png"];
UIImage *screw = [UIImage imageWithData:UIImagePNGRepresentation(tumbImage) scale:2];
With that, I can to use 100x100 px image in my apps scaled to 50%.
Kind regards.
Try Using a UIScrollView. Add the UIImageView to the UIScrollView in Interface Builder you can then control the position and size of the image as follows:
CGRect rect = [scrollView frame];
rect.origin.x = 50.0f;
rect.origin.y = 0.0f;
rect.size.width = 320.0f;
rect.size.height = 150.0f;
[scrollView setFrame:rect];
If you tried those methods cannot work, the only way to do it is to add the constraint of width and height to the UIImageView.
// Create the constraint in code
NSLayoutConstraint *constraint0 = [NSLayoutConstraint constraintWithItem: myImage attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeWidth multiplier:1.0f constant: yourNewsWidth];
NSLayoutConstraint *constraint1 = [NSLayoutConstraint constraintWithItem: myImage attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeHeight multiplier:1.0f constant: yourNewsHeight];
[myImage addConstraint:constraint0];
[myImage addConstraint:constraint1];
Use myImageView.frame = myNewPosAndSize; to resize or reposition your image view (as with any other view). It might confuse you that the image view draws its image with its original size, possibly exceeding its own dimensions. To disable this use myImageView.clipsToBounds = NO;
You don't have to write a whole book, you can copy that code.
I believe the UIImageView always draws the image at 0,0 at a 1.0 scale. You'll need to resize the image if you want to continue using the UIImageView.