Как добавить UIImage в сгруппированный UITableViewCell, чтобы он округлял углы?
Я пытаюсь добавить изображения в ячейки таблицы в сгруппированном UITableView, но углы изображений не обрезаются. Каков наилучший способ обрезать их (кроме того, чтобы обрезать их в Photoshop? Содержимое таблицы является динамическим.)
Например, для первого изображения в таблице нужен только верхний левый угол.
Ответы
Ответ 1
Это было мое решение, которое могло бы использовать небольшой рефакторинг:
void addRoundedRectToPath(CGContextRef context, CGRect rect, float ovalWidth, float ovalHeight, BOOL top, BOOL bottom)
{
float fw, fh;
if (ovalWidth == 0 || ovalHeight == 0) {
CGContextAddRect(context, rect);
return;
}
CGContextSaveGState(context);
CGContextTranslateCTM (context, CGRectGetMinX(rect), CGRectGetMinY(rect));
CGContextScaleCTM (context, ovalWidth, ovalHeight);
fw = CGRectGetWidth (rect) / ovalWidth;
fh = CGRectGetHeight (rect) / ovalHeight;
CGContextMoveToPoint(context, fw, fh/2);
CGContextAddArcToPoint(context, fw, fh, fw/2, fh, 0);
NSLog(@"bottom? %d", bottom);
if (top) {
CGContextAddArcToPoint(context, 0, fh, 0, fh/2, 3);
} else {
CGContextAddArcToPoint(context, 0, fh, 0, fh/2, 0);
}
if (bottom) {
CGContextAddArcToPoint(context, 0, 0, fw/2, 0, 3);
} else {
CGContextAddArcToPoint(context, 0, 0, fw/2, 0, 0);
}
CGContextAddArcToPoint(context, fw, 0, fw, fh/2, 0);
CGContextClosePath(context);
CGContextRestoreGState(context);
}
- (UIImage *)roundCornersOfImage:(UIImage *)source roundTop:(BOOL)top roundBottom:(BOOL)bottom {
int w = source.size.width;
int h = source.size.height;
CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
CGContextRef context = CGBitmapContextCreate(NULL, w, h, 8, 4 * w, colorSpace, kCGImageAlphaPremultipliedFirst);
CGContextBeginPath(context);
CGRect rect = CGRectMake(0, 0, w, h);
addRoundedRectToPath(context, rect, 4, 4, top, bottom);
CGContextClosePath(context);
CGContextClip(context);
CGContextDrawImage(context, CGRectMake(0, 0, w, h), source.CGImage);
CGImageRef imageMasked = CGBitmapContextCreateImage(context);
CGContextRelease(context);
CGColorSpaceRelease(colorSpace);
return [UIImage imageWithCGImage:imageMasked];
}
Внедрите эти функции, затем проверьте indexPath
в методе делегата cellForRowAtIndexPath
, чтобы определить, какой угол округлить.
if (indexPath.row == 0) {
cell.imageView.image = [self roundCornersOfImage:coverImage roundTop:YES roundBottom:NO];
} else if (indexPath.row == [indexPath length]) {
cell.imageView.image = [self roundCornersOfImage:coverImage roundTop:NO roundBottom:YES];
} else {
cell.imageView.image = coverImage;
}
Ответ 2
Если вы счастливы, что все четыре угла изображения округлены, вы можете просто сделать следующее при создании ячейки:
cell.imageView.layer.masksToBounds = YES;
cell.imageView.layer.cornerRadius = 10.0;
Если вы также хотите вставить изображение с границы, я описал простую категорию в UIImage, чтобы сделать это здесь.
Ответ 3
Существует не встроенный стандартный способ сделать это, но это не очень сложно сделать в вашем собственном коде. Существуют примеры того, как круглые углы на UIImage в Интернете, например, http://blog.sallarp.com/iphone-uiimage-round-corners/.
Ответ 4
Пара дополнений/изменений, надеюсь, что это кому-то поможет:
1) roundTop и roundBottom impl слегка изменились.
2) сделал метод класса в отдельном классе, поэтому повторное использование проще, чем копировать/вставлять всюду.
Во-первых, новые сведения о классе:
#import <Foundation/Foundation.h>
#import <QuartzCore/QuartzCore.h>
@interface RoundedImages : NSObject {
}
+(UIImage *)roundCornersOfImage:(UIImage *)source roundTop:(BOOL)top roundBottom:(BOOL)bottom;
@end
И его реализация:
#import "RoundedImages.h"
@implementation RoundedImages
void addRoundedRectToPath(CGContextRef context, CGRect rect, float ovalWidth, float ovalHeight, BOOL top, BOOL bottom)
{
float fw, fh;
if (ovalWidth == 0 || ovalHeight == 0) {
CGContextAddRect(context, rect);
return;
}
CGContextSaveGState(context);
CGContextTranslateCTM (context, CGRectGetMinX(rect), CGRectGetMinY(rect));
CGContextScaleCTM (context, ovalWidth, ovalHeight);
fw = CGRectGetWidth (rect) / ovalWidth;
fh = CGRectGetHeight (rect) / ovalHeight;
CGContextMoveToPoint(context, fw, fh/2);
if (top) {
CGContextAddArcToPoint(context, fw, fh, fw/2, fh, 3);
CGContextAddArcToPoint(context, 0, fh, 0, fh/2, 3);
CGContextAddArcToPoint(context, 0, 0, fw/2, 0, 0);
CGContextAddArcToPoint(context, fw, 0, fw, fh/2, 0);
} else {
CGContextAddArcToPoint(context, fw, fh, fw/2, fh, 0);
CGContextAddArcToPoint(context, 0, fh, 0, fh/2, 0);
CGContextAddArcToPoint(context, 0, 0, fw/2, 0, 3);
CGContextAddArcToPoint(context, fw, 0, fw, fh/2, 3);
}
CGContextClosePath(context);
CGContextRestoreGState(context);
}
+(UIImage *)roundCornersOfImage:(UIImage *)source roundTop:(BOOL)top roundBottom:(BOOL)bottom {
int w = source.size.width;
int h = source.size.height;
CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
CGContextRef context = CGBitmapContextCreate(NULL, w, h, 8, 4 * w, colorSpace, kCGImageAlphaPremultipliedFirst);
CGContextBeginPath(context);
CGRect rect = CGRectMake(0, 0, w, h);
//addRoundedRectToPath(context, rect, 4, 4, top, bottom);
addRoundedRectToPath(context, rect, 5, 5, top, bottom);
CGContextClosePath(context);
CGContextClip(context);
CGContextDrawImage(context, CGRectMake(0, 0, w, h), source.CGImage);
CGImageRef imageMasked = CGBitmapContextCreateImage(context);
CGContextRelease(context);
CGColorSpaceRelease(colorSpace);
//return [UIImage imageWithCGImage:imageMasked];
UIImage *image = [UIImage imageWithCGImage:imageMasked];
CGImageRelease(imageMasked);
return image;
}
@end
Чтобы использовать в другом классе (например, контроллер просмотра):
#import "RoundedImages.h"
... и позже мы используем его так:
UIImageView *imageView = nil;
UIImage *img = [UIImage imageNamed:@"panel.png"];
if (indexPath.row == 0) {
imageView = [[UIImageView alloc]initWithImage:[RoundedImages roundCornersOfImage:img roundTop:YES roundBottom:NO]];
}
else if (indexPath.row == ([choices count]-1))
{
imageView = [[UIImageView alloc]initWithImage:[RoundedImages roundCornersOfImage:img roundTop:NO roundBottom:YES]];
}
else {
imageView = [[UIImageView alloc]initWithImage:img];
}
cell.backgroundColor = [UIColor clearColor];
imageView.clipsToBounds = NO;
cell.backgroundView = imageView;
cell.backgroundView = [[UIView alloc] initWithFrame:CGRectZero];
[cell.backgroundView addSubview:imageView];
[imageView release];
Обратите внимание, что "выбор" выше был всего лишь изменчивым массивом, который я использовал на этой странице, содержащей данные для таблицы.
Я должен добавить, что вышеприведенный фрагмент использования используется внутри вашего метода cellForRowAtIndexPath, а "cell" - это uitableviewcell.
Во всяком случае, работает для меня чемпионом.
Ответ 5
Существует встроенный способ, если вы хотите просто отображать закругленные углы. Поместите изображение в UIImageView, а затем установите cornerRadius слоя UIImageView. Вам также нужно будет сообщить UIImageView обрезать границы, но это даст вам закругленные углы.
UIImageView *myImageView = [[UIImageView alloc] initWithImage:...];
[myImageView setClipsToBounds:YES];
[[myImageView layer] setCornerRadius:5.0f];