2

I am attempting to replicate Facebook's News Feed for an app, and will have images that should be displayed. The images will be a variety of sizes, so how should I properly scale them to fit the cell without looking weird?

The cell contains a UIButton which then has the image set to it. I am using a button as I want to open the full size image when it is pressed. If it is better to change to a UIImageView with a tap gesture I can do that too, just thought the button was simpler.

Ideas?

JimmyJammed
  • 9,598
  • 19
  • 79
  • 146
  • Are you actually reading Facebook's news feed, or just want something that looks similar? – lnafziger Feb 19 '13 at 20:01
  • No, not reading in facebook data. Just mimicking their News Feed table to display my own custom data. However, I like how clean their "image cells" are and want to mimic that while allowing the image to be clickable in order to bring up the full size image. – JimmyJammed Feb 19 '13 at 21:24

4 Answers4

0
+ (UIImage *)imageWithImage:(UIImage *)image scaledToSize:(CGSize)newSize {

UIGraphicsBeginImageContextWithOptions(newSize, NO, 0.0);
[image drawInRect:CGRectMake(0, 0, newSize.width, newSize.height)];
UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();    
UIGraphicsEndImageContext();
return newImage;

}

Use this to scale the image based on size.

kaar3k
  • 994
  • 7
  • 15
  • While this is a simple way of doing this, it has a few potential issues: 1) It does not maintain the aspect ratio of the image. 2) If you save the resulting `UIImage` to disk (to cache a thumbnail for instance) it will save the full resolution image and not the scaled image. – lnafziger Feb 19 '13 at 20:11
  • try the method used in [this](http://stackoverflow.com/questions/5545600/iphone-cgcontextref-cgbitmapcontextcreate-unsupported-parameter-combination).Also set the Interpolationlevel to the Context. – kaar3k Feb 19 '13 at 20:41
0

I assume that you are going to be using a UITableView in order to show these images.

This is going to create problems when you scroll the table view because the images get resized as the rows are loaded and it takes too much processing time, causing the scrolling to not be smooth.

There are two ways around this:

  1. Create images that are appropriately sized when you create the full-sized images, and save them to disk that way. If these are static photos, then you would create the thumbnails in an image editing program (i.e. Photoshop) and include them along with the full resolution photos. If the photos are downloaded/generated dynamically, then you would need to create the smaller version when you save the full-size image. This is actually more complicated than it sounds, and I can provide some code if this is the route that you need to go. The key point is that you will not need to resize the images while the tableview rows are being loaded, saving a lot of time.

  2. Resize the images in a background thread and add them to the table view rows as the processing finishes. There are numerous examples around of doing this, including the following example project from Apple: https://developer.apple.com/library/ios/#samplecode/LazyTableImages/Introduction/Intro.html

The best possible performance would be to do both, but from my experience, only one or the other is really needed.

lnafziger
  • 25,760
  • 8
  • 60
  • 101
0

Why not just handle all the image sizing through the built in functions of a UIImageView and then put a transparent button over them that is the same size (frame) as them... (*To make a UIButton transparent just the background color to clear and the button type to Custom (I think the default is rounded rect or something)

On a different note if you wanted to just detect clicks on a UIImageView without putting a transparent UIButton over the images just use touchesBegan and detect if the touch was on a UIImage in your array.

Albert Renshaw
  • 17,282
  • 18
  • 107
  • 195
0

You can use [CGAffineTransformMakeScale][1] in Quartz 2D framework to scale view very easily.

#define X_SCALE_FACTOR 2.5
#define Y_SCALE_FACTOR 2.5
UIImageView *imageView = [[UIImageView alloc]initWithImage:[UIImage imageNamed:@"myimage.png"]];
imageView.transform = CGAffineTransformMakeScale(X_SCALE_FACTOR, Y_SCALE_FACTOR);
Aruna
  • 701
  • 10
  • 26