iPhoneアプリ上に表示する画像の角を丸くする方法

iPhone Objective-C

iPhoneアプリを開発していると、画像をアプリ上で表示するというというケースがあると思うのだが、「iphone - Rounded Corners on UIImage - Stack Overflow」という記事に、下図のように画像の角を丸くする簡単な方法が書かれていたので、メモとして記載しておく（注：本手法はiPhone SDK 3.0以上でしか使えない）。

[準備]
画像の角を丸くするために、QuartzCoreフレームワークに含まれるCALayerクラスを利用するため、XCodeのメニューの「追加」ー「既存のフレームワーク」を選択し、QuartzCore.frameworkをプロジェクトに追加する。準備は以上で終わりである。


[実装方法]
UIImageViewを1つ用意して、そこに画像を表示させる場合を例にする。

@interface RoundedCornerImageTestViewController : UIViewController {
    UIImageView *roundedView;
}
@property (nonatomic, retain) IBOutlet UIImageView *roundedView;


画像の角を丸くするために必要なコードはわずか3行である。

#import "RoundedCornerImageTestViewController.h"
#import "QuartzCore/CALayer.h"

@implementation RoundedCornerImageTestViewController
@synthesize roundedView;

- (void)viewDidLoad {
    [super viewDidLoad];
    roundedView.image = [UIImage imageNamed:@"test.jpg"];
    
    // 画像の角を丸くする処理
    CALayer *layer = [roundedView layer];
    [layer setMasksToBounds:YES];
    [layer setCornerRadius:50.0f];
}

- (void)dealloc {
    [roundedView release];
    [super dealloc];
}
@end


またCALayerを使うと画像に枠線を引く事も簡単に出来る。
例えば上図のように角を丸めた画像を、更に青い枠線で囲む場合には以下のようなコードになる。

- (void)viewDidLoad {
    [super viewDidLoad];
    roundedView.image = [UIImage imageNamed:@"test.jpg"];
    
    // 画像の角を丸くする処理
    CALayer *layer = [roundedView layer];
    [layer setMasksToBounds:YES];
    [layer setCornerRadius:50.0f];
    
    // 青い線で枠を囲む処理
    [layer setBorderWidth:10.0f];
    [layer setBorderColor:[[UIColor blueColor] CGColor]];
}


結果以下のような感じになる。


なおiPhone SDK 3.0より古いバージョンのSDKを使う場合には、以下の記事に書かれた方法で出来ると思われる（自分では試してません）。