如何將UIImage添加到分組的UITableViewCell中，使其四捨五入？

8

這是我的解決方案，它可以使用一個小的重構：

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; 
     }

來源

2010-01-22 17:49:25

+0

謝謝，凱文。我已將代碼重構爲UIImage類別，因此我不必將其複製並粘貼到各處。 – 2010-01-22 18:46:48

+2

很好的答案，謝謝。一個修復：imageMasked正在泄露。您需要將最終的UIImage分配給一個變量CGImageRelease（imageMasked），然後返回UIImage。 – 2010-08-01 16:18:07

+0

.... UIImage * image = [UIImage imageWithCGImage：imageMasked]; CGImageRelease（imageMasked）; return image; } 謝謝。這就是我一直在尋找的東西。現在沒關係。大。 – 2010-08-27 06:11:27

1

沒有內置這樣做標準的方式，但它不是太難在自己的代碼來完成。有關於如何在Web上UIImage上四角的示例，請參閱http://blog.sallarp.com/iphone-uiimage-round-corners/。

來源

2010-01-22 16:27:04

+0

呵呵。我希望能有更像內置的標準方式來抓取單元格本身的形狀遮罩。但是 - 不要猜測。 – 2010-01-22 18:47:55

0

如果您只想顯示圓角，就有內置的方法。將圖像放在UIImageView中，然後設置UIImageView圖層的cornerRadius。您還需要告訴UIImageView剪輯到邊界，但會給你圓角。

UIImageView *myImageView = [[UIImageView alloc] initWithImage:...]; 
[myImageView setClipsToBounds:YES]; 
[[myImageView layer] setCornerRadius:5.0f];

來源

2010-01-22 22:30:05

+0

好的，所以我評論了凱文的解決方案，並嘗試過這一個。首先，我不得不添加QuartzCore框架 - setCornerRadius在QuartzCore中。不幸的是，setCornerRadius四捨五入。如果我想匹配分組的UITableViewCell.imageView的形狀，我需要將圖像的頂部左上角舍入在最上面 - 但其他人必須保持清晰。所以，雖然setCornerRadius很方便，但它不適合您必須挑選哪些角落進行四捨五入的應用程序。 – 2010-01-24 12:37:17

4

如果你很高興有四個邊角圖像圓潤，那麼你可以做的創建單元時注意以下事項

cell.imageView.layer.masksToBounds = YES; 
cell.imageView.layer.cornerRadius = 10.0;

如果你也想從邊界插頁圖片，我描述了simple category on UIImage to do it here。

來源

2010-03-15 19:58:42

+0

確保包含QuartzCore框架並導入以使用圖層屬性。 – Ralphleon 2011-09-28 03:59:03

+1

重擊效果 – 2014-05-15 13:29:14

1

幾個新增/變更，希望它可以幫助別人：

1）喬福和圓底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方法中，和「細胞」，是一個UITableViewCell。

無論如何，對我來說就像一個冠軍。

來源

2010-12-08 16:50:19 tbone

+0

請在您的帖子中[請勿使用簽名或標語]（http://stackoverflow.com/faq#signatures） – meagar 2010-12-08 17:01:34

如何將UIImage添加到分組的UITableViewCell中，使其四捨五入？

回答

相關問題