rescue => MissingNutrient::VitaminE

Picasso で角丸なImageを描画する

Mar 26, 2015 | 1 minute read

Picassoを使って、カジュアルに写真を表示させ、ついでに角も丸めちゃおう！ と思っていたのですが、iOS的な気持ちでいたのが大間違い。

というのも、iOSでは

view.layer.cornerRadius = 5.0;
view.layer.masksToBounds = YES;

的なことをすれば、ImageViewの角が丸くなってくれて、実に楽。

Androidもそんな感じでいけちゃいそう〜。と思っていたけど、ないんすよね。そういうの。

ということで、 Picasso では Transformation のクラスを拡張して、処理を渡してあげるオプションがあるので、それを使って角丸を実現する模様。

RoundedTransformation

https://gist.github.com/aprock/6213395

ここのgistが全てですが、直後に付いているお兄さんのコメント通り

@Override
public String key() {
    return "rounded(radius=" + Integer.toString(radius) + ", margin=" + Integer.toString(margin) + ")"
}

というメソッドに書き換えてあげたほうがよさげ。

この RoundedTransformation というクラスを作った後に、

RoundedTransformation transform = new RoundedTransformation(15, 0);
Picasso.with(context).load(photo).resize(width, height).
    centerCrop().transform(transform).into(imageView);

的なことをしてあげればOK。

一瞬面倒だと思ったけど、大変助けられた。

Related Posts