Android
Picasso

ImageViewを丸くする

More than 1 year has passed since last update.

最近のアプリって、プロフィール画像が丸く表示されてることが多いですよね。
GoogleのMaterial Design GuideLineでも丸くなってるので、標準ライブラリとかコンポーネントが用意されているかと思いきや!無いんです。
◯くするのって需要あると思うんだけど。

ということで、色んな方法はあるけれど、ここでは2つ紹介します。

  • CircleImageViewライブラリを使う
  • Picassoのtransformで丸くする

CircleImageViewライブラリを使う

DataBindingを使いたいときは、レイアウトXMLで丸くなってくれてたらなーって思うこともあるでしょう。

このライブラリを使います。

  1. build.gradleに定義する
build.gradle
dependencies {
    ...
    compile 'de.hdodenhof:circleimageview:2.1.0'
}

2. レイアウトXMLに定義する

layout.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <de.hdodenhof.circleimageview.CircleImageView
        android:layout_width="180dp"
        android:layout_height="180dp"
        android:src="@drawable/hoge" />

</RelativeLayout>

終わりです。
ImageViewを継承しているようですので、もし何かJavaで制御したい場合はImageViewと同じように扱えば大丈夫です。

Picassoのtransformで丸くする

これを持ってきたら利用可能です。

レイアウトXMLでは普通にImageViewを設置しましょう。

layout.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

</RelativeLayout>

あとはPicassoのtransformで指定したら丸くなります。

MainActivity.java
Picasso.with(context).load(url)
                .transform(new CircleTransform()).into(imageView);

以上