最近のアプリって、プロフィール画像が丸く表示されてることが多いですよね。
GoogleのMaterial Design GuideLineでも丸くなってるので、標準ライブラリとかコンポーネントが用意されているかと思いきや!無いんです。
◯くするのって需要あると思うんだけど。
ということで、色んな方法はあるけれど、ここでは2つ紹介します。
- CircleImageViewライブラリを使う
- Picassoのtransformで丸くする
CircleImageViewライブラリを使う
DataBindingを使いたいときは、レイアウトXMLで丸くなってくれてたらなーって思うこともあるでしょう。
このライブラリを使います。
- 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);
以上