読者です 読者をやめる 読者になる 読者になる

UIImageViewを丸くトリミングする

TweetBotのサムネイル表示のように、画像を丸くトリミングする方法を紹介します。
CALayerを使うと数行で実装出来るので便利です。

とりあえずサンプルコード

UIImage *circleImage = [UIImage imageNamed:@"test.png"];
UIImageView *circleImageView = [[UIImageView alloc] initWithImage:circleImage];
if (circleImage.size.width != circleImage.size.height) {
    CGFloat smallerSideLength = (circleImage.size.width < circleImage.size.height) ? circleImage.size.width : circleImage.size.height;
    circleImageView.frame = CGRectMake((circleImage.size.width - smallerSideLength) * 0.5f,
                                       (circleImage.size.height - smallerSideLength) * 0.5f,
                                       circleImage.size.width, circleImage.size.height);
} else {
    circleImageView.frame = CGRectMake(0.0f, 0.0f, circleImage.size.width, circleImage.size.height);
}
circleImageView.layer.cornerRadius = circleImageView.frame.size.width * 0.5f;
circleImageView.clipsToBounds = YES;
[self addSubview:circleImageView]

iOS Circler masked UIImageView


上のコードで、四角形のUIImageViewを正円にトリミング出来ます。
元の画像の縦横比が違うときは、短い辺を基準に、真ん中でトリミングしています。


大切なのは

circleImageView.layer.cornerRadius = circleImage.size.width * 0.5f;
circleImageView.clipsToBounds = YES;

この2行だけです。

元の画像としてtwitter等の正方形の画像を用意すれば、面倒な分岐も必要ないので、単純に円形に切り抜きたいという時に使えるかと。