Image at the top of the tableview - cocoa-touch

Hey I am making an app that has to show a big image at the top of the grouped tableview, I don't want the image to be in tablecell because it looks stupid that way. I just want the image to float there, but I have no idea how to do it? Thanks!

Use the table view's tableHeaderView property, like this:
UIImageView *topImage = [[UIImageView alloc] initWithImage:[UIImage imageNamed:#"my logo.png"];
topImage.backgroundColor = [UIColor clearColor];
topImage.frame = CGRectMake(0, 0, theTableView.bounds.size.width, 100); // replace 100 with the height of your image, plus a bit if you want it to have a margin
topImage.contentMode = UIViewContentModeCenter;
theTableView.tableHeaderView = topImage;
[topImage release];

Related

Animating a UIImageView with a mask but the mask is static

I am trying to have an animation in which a mask is placed in the center of the view. Any image view that passes behind the mask appears. So here is my code so far, but the problem with this code is that it animates the mask with the image view.
UIView *maskView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, self.worldImageView.frame.size.height, self.worldImageView.frame.size.height)];
// ...position maskView...
maskView.layer.position = CGPointMake(CGRectGetMidX([self.view bounds]), CGRectGetMidY([self.view bounds]));
maskView.layer.backgroundColor = [UIColor blackColor].CGColor;
maskView.layer.cornerRadius = 90;
self.worldImage = [[UIImageView alloc] init];
self.worldImage.frame = self.worldImageView.frame;
self.worldImage.image = [UIImage imageNamed:#"continents.png"];
[maskView addSubview:self.worldImage];
[self.view addSubview:maskView];
CABasicAnimation* worldAnimation = [[CABasicAnimation alloc] init];
[worldAnimation setFromValue:[NSValue valueWithCGPoint:CGPointMake(self.view.frame.size.width + 50, CGRectGetMidY([maskView bounds]))]];
[worldAnimation setToValue:[NSValue valueWithCGPoint:CGPointMake(-50, CGRectGetMidY([maskView bounds]))]];
worldAnimation.keyPath = #"position";
worldAnimation.duration = 6.0f;
worldAnimation.repeatCount = HUGE_VALF;
[[self.worldImage layer] addAnimation:worldAnimation forKey:nil];
I don't know if I explained this well enough. Please tell me if you need more info. Thank you in advance!
Your issue here is that the mask property of UIView is attached to that UIView - they can't move separately. Technically, it's actually attached to the view's underlying layer, but whatever.
If you want the image to appear as if it's passing in front of a circular window (so that you can see it as it goes by) you'll need to add it as a subview of the view with the mask. So, you might do something like this:
UIView *maskView = [[UIView alloc] init];
// ...position maskView...
maskView.layer.cornerRadius = 90;
maskView.clipsToBounds = YES;
self.worldImage = [[UIImageView alloc] init];
self.worldImage.frame = self.worldImageView.frame;
self.worldImage.image = [UIImage imageNamed:#"continents.png"];
[maskView addSubview:self.worldImage];
[self.view addSubview:maskView];
// ...animate worldImage back and forth...
Note that instead of using a CAShapeLayer, I simply put rounded corners on maskView; since you want a circular mask, it's a much simpler trick. Also, when animating worldImage, consider using one of UIView's block-based animation methods – they're a lot easier to handle for simple stuff like this.

Best way to place a larger UIView inside smaller one by scaling the larger one to fit

I am grabbing a screen shot (as UIView object) of the view of my next controller and would like to place that screenshot inside a small rectangle in my preceeding controller's view (like a preview). What is the best way to place a large UIView object inside smaller one?
This did not work:
UIView *screenshot = .... // screenshot from the next controller's view
smallViewBox.contentMode = UIViewContentModeScaleAspectFit;
[smallViewBox addSubView:screenshot];
Try setting the bounds of the larger view to match the bounds of the smaller one. I just whipped up a quick example:
UIView *largeView = [[UIView alloc] initWithFrame:CGRectMake(40, 40, 60, 60)];
largeView.backgroundColor = [UIColor redColor];
[self.view addSubview:largeView];
UIView *smallView = [[UIView alloc] initWithFrame:CGRectMake(50,50,40,40)];
smallView.backgroundColor = [UIColor greenColor];
[self.view addSubview:smallView];
largeView.bounds = smallView.bounds;
If you comment out the largeView.bounds = smallView.bounds the green (smaller) box will be the only one visible because it is being drawn over the red box in the controller's view (The two views are siblings in this instance). To make the larger view a subview of the smaller one and restrict it to the smaller one's area you can do this:
UIView *largeView = [[UIView alloc] initWithFrame:CGRectMake(40, 40, 60, 60)];
largeView.backgroundColor = [UIColor redColor];
UIView *smallView = [[UIView alloc] initWithFrame:CGRectMake(50,50,40,40)];
smallView.backgroundColor = [UIColor greenColor];
[self.view addSubview:smallView];
largeView.frame = CGRectMake(0, 0, smallView.bounds.size.width, smallView.bounds.size.height);
[smallView addSubview:largeView];
This will result in the larger view's red color visible - covering the green smaller view's background. In this instance the large view is a child of the small view and occupies its entire area.
You could set a scale transform on it.
screenshot.transform = CGAffineTransformMakeScale(0.5, 0.5);

ios tableviewcell several objects one a cell programatically , setting prototype cell programatically , custom table view cell style,

hello I built this tableview using the InterfaceBuilder and storyboard I used custom for the style of the cell and content prototype of the table view, this is the image:
custom tableview
but now I need to redo everything programmatically I tried insert an imageview in the cell using this code
UIImageView *imgView = [[UIImageView alloc] initWithFrame:
CGRectMake(300, 0, 80, 80)];
imgView.image = [UIImage imageNamed:#"esquina_estrella.png"];
cell.imageView.image = imgView.image;`
but the image stays static unresponsive to CGRectMake thanks for you help
Use this code to the Cell:
// Make your frame origin 0,0 as below done.
UIImageView *imgView = [[UIImageView alloc] initWithFrame:
CGRectMake(0, 0, 80, 80)];
imgView.image = [UIImage imageNamed:#"esquina_estrella.png"];
[cell addSubview:imgView];
[imgView release];
imgView = nil;
Add
imgView.clipsToBounds = YES;
To limit display of the image to the frame of the image view.
Also, you are adding the image of the image view to the cell's image view, which is a different object, without using your image view and its frame. You actually do not need an image view if you are just using the image. What you want is
cell.imageView = imgView;
or
[cell.contentView addSubview:imgView];
The latter will be preferable if you want to place it exactly and add more image views as in your screen shot.

UIImage in UITableViewCell

I'm trying to put image in UITableViewCell. I use SSMessages style for my messages.
Tried something like cell.imageView.image = [UIImage imageNamed:message.messageText]; but it isn't work. Any suggestions? Maybe need my other code?
Use SSMessageTableViewCellBubbleView's leftBackgroundImage and add it this way to your table view
SSMessageTableViewCellBubbleView *imageBubbleView = [SSMessageTableViewCellBubbleView alloc] init];
imageBubbleView. leftBackgroundImage = [UIImage imageNamed:message.messageText];
[cell.contentView addSubview:imageBubbleView];
I expect this to work!
First set the background color of the image view for troubleshooting:
cell.imageView.backgroundColor = [UIColor colorWithRed:(255.0f/255.0f) green:(0.0f/255.0f) blue:(0.0f/255.0f) alpha:1.0f];
Set the image:
cell.imageView.image = ...;
Set the image view frame:
cell.imageView.frame = CGRectMake(x, y, cell.imageView.image.size.width, cell.imageView.image.size.height);
Add the image view as a subview of the cell.
Bring this subview to the front:
[cell bringSubviewToFront:[cell.imageView superview]];
You may need to call [cell setNeedsLayout] or [cell setNeedsDisplay] in order to get the cell to update the frame of the UIImageView for the new image. Simply setting image on the UIImageView will do nothing if the frame of the UIImageView is CGRectZero.
To see if the frame is zero, try adding a background color or a layer border using:
cell.imageView.layer.borderWidth = 1.f;
cell.imageView.layer.borderColor = [UIColor redColor].CGColor;

Resize UIImageView in UITableViewCell

I have a 16x16 pixel image that I want to display in an UIImageView. So far, no problem, however 16x16 is a bit small so I want to resize the image view to 32x32 and thus also scale the image up.
But I can't get it to work, it always shows the image with 16x16, no matter what I try. I googled a lot, and found many snippets here on Stack Overflow, but its still doesn't work.
Here is my code so far:
[[cell.imageView layer] setMagnificationFilter:kCAFilterNearest];
[cell.imageView setAutoresizingMask:UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight];
[cell.imageView setClipsToBounds:NO];
[cell.imageView setFrame:CGRectMake(0, 0, 32, 32)];
[cell.imageView setBounds:CGRectMake(0, 0, 32, 32)];
[cell.imageView setImage:image];
I don't want to create a new 32x32 pixel image because I already have some memory problems on older devices and creating two images instead of having just one looks like a very bad approach to me (the images can be perfectly scaled and it doesn't matter if they lose quality).
I have successfully made it using CGAffineTransformMakeScale!
cell.imageView.image = cellImage;
//self.rowWidth is the desired Width
//self.rowHeight is the desired height
CGFloat widthScale = self.rowWidth / cellImage.size.width;
CGFloat heightScale = self.rowHeight / cellImage.size.height;
//this line will do it!
cell.imageView.transform = CGAffineTransformMakeScale(widthScale, heightScale);
I think you need to set the contentMode:
cell.imageView.contentMode = UIViewContentModeScaleAspectFit;
In context:
UIImage *image = [UIImage imageWithContentsOfFile:[[NSBundle mainBundle] pathForResource:#"slashdot" ofType:#"png"]];
imageView = [[UIImageView alloc] initWithImage:image];
[imageView setBackgroundColor:[UIColor greenColor]];
[imageView setFrame:CGRectMake(x,y,32,32)];
imageView.contentMode = UIViewContentModeScaleAspectFit;
[self.view addSubview:imageView];
Note: I've set a background colour so you can debug the on-screen boundaries of the UIImageView. Also x and y are arbitrary integer coordinates.
Using CGAffineTransformMakeScele as #ahmed said is valid and do not seems to be duck type solution at al! For instance, if you have a large image and put it into a UITableViewCell (say the image is 2x larger than the one that fits into a table cell. If you scale by 0.9 you don't see any result. Only if you scale by less than 0.5 (because 0.5*2.0 = 1.0 that is the size of the cell). So it seems that inside the api, apple is doing exactly that.
You need to override the layoutSubviews method. By default, it's resizing the imageview based on the cell height size.
-(void)layoutSubviews
{
[super layoutSubviews];
self.imageView.frame = CGRectMake(self.imageView.frame.origin.x,
self.imageView.frame.origin.y,
MY_ICON_SIZE,
MY_ICON_SIZE);
}
You'll probably want to recalculate the origin as well so it's vertically centered.