I have a UIImageView in my Nib file that stretches the width of the screen. What I'd like to do is have the middle third of the image remain the same height and width when autoresizing is done (with device rotation) and have only the 1st and 3rd thirds of the image stretched.
Any ideas how to do this?
There is no straight-forward way to do this as far as I know. Here is one way to do it:
Instead of one ImageView, create 3 UIImageView with equal width and height(1/3rd of original image). Upper and lower ImageView will stick to the top and bottom edge respectively, middle ImageView will have flexible bottom and top margin. You need to set the contentMode property of middle ImageView to UIViewContentModeScaleAspectFit(or UIViewContentModeCenter based on how you want to handle rotation) and the other ones to UIViewContentModeScaleToFill. You can set all these property from IB.
Now you need to to set the image source of each one from code. In the viewDidLoad method slice the UIImage into 3 parts using the solutions from this post or using the following code snippet:
-(NSMutableArray *)getImagesFromImage:(UIImage *)image withRow:(NSInteger)rows withColumn:(NSInteger)columns
{
NSMutableArray *images = [NSMutableArray array];
CGSize imageSize = image.size;
CGFloat xPos = 0.0, yPos = 0.0;
CGFloat width = imageSize.width/rows;
CGFloat height = imageSize.height/columns;
for (int y = 0; y < columns; y++) {
xPos = 0.0;
for (int x = 0; x < rows; x++) {
CGRect rect = CGRectMake(xPos, yPos, width, height);
CGImageRef cImage = CGImageCreateWithImageInRect([image CGImage], rect);
UIImage *dImage = [[UIImage alloc] initWithCGImage:cImage];
[images addObject:dImage];
xPos += width;
}
yPos += height;
}
return images;
}
You may need to tweak a few things, but hopefully you get the idea.
If you have the option, you can pre-split the image into 3 parts using photoshop/gimp and place them into the bundle. In that case you don't need to do image splitting in the code and everything can be done from IB.
Hope this helps :)
Related
I have an application like photo share in which i need to display images in tile view like GOOGLE IMAGE SEARCH.
Photos should be arranged in tile manner depending upon the size of an image
For better explanation i have attached example of google image search..
And
If you have any idea about this, Please share your knowledge.
Here is the source code of an iOS library similar to what you are asking for. You can get the basic idea about how this can be done from the Source Code.
Use Scrollview.
Set two parameters, called xOffset and yOffset and UIScrollview *scrollView
int yOffset = 0;
int xOffset = 0;
for (int height=0; height < [y count]; height++)
{
for (int width=0; width < [x count]; width++)
{
NSString *imageName =
UIImage *image = [UIImage imageNamed:imageName];
UIImageView *imageView = [[UIImageView alloc] initWithImage:image];
imageView.frame = CGRectMake(xOffset, yOffset, imageView.frame.size.width, imageView.frame.size.height);
[scrollView addSubview:imageView];
xOffset += imageView.frame.size.width;
}
yOffset += imageView.frame.size.height;
}
[scrollView setContentSize:CGSizeMake(xOffset,yOffset)];
Hope this helps...
I'm trying to create gaps between the UIImageViews, which are subviews added into a UIScrollView.
And I thought I could do the following by modifying the CGRect of the UIImageView.
CGRect frame = imageView.frame;
frame.origin.x = <some values>
frame.origin.y = 0
imageView.frame = frame;
By modifying the x values, I assumed it will help me with the position of the UIImageViews inside the UIScrollView.
However, I realized whichever values I set for the frame.origin.x does not really matter. As each UIImageView inside the UIScrollView will be positioned side by side without any empty space.
I think you're doing it in the wrong way. You can't edit view's position by
view.frame.origin.x = something;
You should assign a new frame, like this:
view.frame = CGRectMake(x, y, w, h);
In your case it will look like this:
CGRect frame = imageView.frame;
CGFloat frameX = frame.origin.x;
CGFloat frameY = frame.origin.y;
CGFloat frameW = frame.size.width;
CGFloat frameH = frame.size.height;
frameX = <some values>
frameY = 0;
imageView.frame = CGRectMake(frameX, frameY, frameW, frameH);
Is it possible to draw a UIImage on top of the CATiledLayer. The main idea is to note the position on the view. I have used PhotoScroller example from Apple Library and I am trying to add an UIImage on top of the tileRect. Any help will be appreciated.
- (void)drawRect:(CGRect)rect {
CGContextRef context = UIGraphicsGetCurrentContext();
/**** Trying to add UIImage on top of CGRect rect. But not working.****/
CGRect pointRect = CGRectMake(100,100,32,32);
UIImage *image = [UIImage imageNamed:#"map-pointer32.png"];
[image drawInRect:pointRect];
// get the scale from the context by getting the current transform matrix, then asking for
// its "a" component, which is one of the two scale components. We could also ask for "d".
// This assumes (safely) that the view is being scaled equally in both dimensions.
CGFloat initialScale = CGContextGetCTM(context).a;
NSString *value = [NSString stringWithFormat:#"%.3f", initialScale];
CGFloat scale = [value floatValue];
CATiledLayer *tiledLayer = (CATiledLayer *)[self layer];
CGSize tileSize = tiledLayer.tileSize;
// Even at scales lower than 100%, we are drawing into a rect in the coordinate system of the full
// image. One tile at 50% covers the width (in original image coordinates) of two tiles at 100%.
// So at 50% we need to stretch our tiles to double the width and height; at 25% we need to stretch
// them to quadruple the width and height; and so on.
// (Note that this means that we are drawing very blurry images as the scale gets low. At 12.5%,
// our lowest scale, we are stretching about 6 small tiles to fill the entire original image area.
// But this is okay, because the big blurry image we're drawing here will be scaled way down before
// it is displayed.)
tileSize.width /= scale;
tileSize.height /= scale;
// calculate the rows and columns of tiles that intersect the rect we have been asked to draw
int firstCol = floorf(CGRectGetMinX(rect) / tileSize.width);
int lastCol = floorf((CGRectGetMaxX(rect)-1) / tileSize.width);
int firstRow = floorf(CGRectGetMinY(rect) / tileSize.height);
int lastRow = floorf((CGRectGetMaxY(rect)-1) / tileSize.height);
for (int row = firstRow; row <= lastRow; row++) {
for (int col = firstCol; col <= lastCol; col++) {
UIImage *tile = [self tileForScale:scale row:row col:col];
CGRect tileRect = CGRectMake(tileSize.width * col, tileSize.height * row,
tileSize.width, tileSize.height);
// if the tile would stick outside of our bounds, we need to truncate it so as to avoid
// stretching out the partial tiles at the right and bottom edges
tileRect = CGRectIntersection(self.bounds, tileRect);
[tile drawInRect:tileRect];
if (self.annotates) {
// [[UIColor whiteColor] set];
CGContextSetLineWidth(context, 6.0 / scale);
CGContextStrokeRect(context, tileRect);
}
}
}
}
Probably the best solution would be to add the image in separate view, without any catiledlayer.
You can add an empty view, and add the view with the the catiledlayer an the uiimageview to that view.
I am working on Interior Decoration Application, we can add Sofa, Table, Chair Table Lamp on Camera screen then can scale UIImage with touch to zoom picture. But by zooming we don't want to increase UIImage Size greater then 320 x 480, I mean want to restrict in iphone Boundary.
any suggestion, I had implemented and tried, but couldn't get exact solution. I use to check on base of center but this approach is not working, want some thing like Edge detection may be that would be exact solution,
Already Thanks, looking forwards
here is some code that I am using to Resize my UIImageView
-(BOOL)isValidSizeForView:(UIView *)myView forSize:(CGSize)size
{
BOOL Decision = NO;
CGRect rect = myView.frame;
CGRect BoundRect = CGRectMake(0, 0, 320, 480);
float MinX = (BoundRect.origin.x+(myView.frame.size.width/2));
float MaxX = ((BoundRect.origin.x+BoundRect.size.width)-(myView.frame.size.width/2));
float MinY = (BoundRect.origin.y+(myView.frame.size.height/2));
float MaxY = ((BoundRect.origin.y+BoundRect.size.height)-(myView.frame.size.height/2));
if(rect.origin.x > MinX && rect.origin.x< MaxX && rect.origin.y> MinY && rect.origin.y<MaxY)
{
Decision = YES;
}
else
{
printf(":( no sorry \n");
}
return Decision;
}
You could get the maximum zoomed size for your image by doing something like this:
- (CGSize)zoomedSizeForImage:(UIImage *)image constrainedTo:(CGSize)maxSize {
CGFloat width = image.size.width;
CGFloat height = image.size.height;
if (width > maxSize.width) {
width = maxSize.width;
height = height * maxSize.width / width;
}
if (height > maxSize.height) {
width = width * maxSize.height / height;
height = maxSize.height;
}
return CGSizeMake(width, height);
}
I have different number of photos in tableview custom cell.Now i want to display that photos
on next page.4 photos per line.how can i do that?
You can use a UIScrollView for this...
Each item in your grid is a UIImageView which you add as subviews to your UIScrollView.
The following code can be insterted in viewDidLoad inside your view controller and assumes that you have setup your UISCrollView in interface builder, otherwise you would need to allocate your scroll view inside viewDidLoad.
The code will add a variable number of image items to a UIScrollView with 4 columns.
UIImageView *imageView = nil;
//The x and y view location coordinates for your menu items
int x = 0, y = 0;
//The number of images you want
int numOfItemsToAdd = 10;
//The height and width of your images are the screen width devided by the number of columns
int imageHeight = 320/4, imageWidth = 320/4;
int numberOfColumns = 4;
//The content seize needs to refelect the number of items that will be added
[scrollView setContentSize:CGSizeMake(320, imageHeight*numOfItemsToAdd];
for(int i=0; i<numOfItemsToAdd; i++){
if(i%numberOfColumns == 0){//% the number of columns you want
x = 0;
if(i!=0)
y += imageHeight;
}else{
x = imageHeight;
}
imageView = [[UIImageView alloc] initWithFrame: CGRectMake(x, y, imageWidth, imageHeight)];
//set the center of the image in the scrollviews coordinate system
imageView.center = CGPointMake(x, y);
imageView.image = [UIImage imageNamed:#"my_photo.png"];
//Finaly add the image to the scorll view
[scrollView addSubview:imageView];