2024/3/23

【Kotlin/Android】ViewOutlineProviderの使い方！輪郭を角丸などの形状にする

この記事からわかること

Android Studio/KotlinのViewOutlineProviderの使い方
Viewの輪郭を角丸などの形状にする方法
setRoundRectやsetOvalメソッドの使い方

index

[open]

＼アプリをリリースしました／

友達や家族の誕生日をメモ！通知も届く-みんなの誕生日-

posted withアプリーチ

環境

Android Studio：Flamingo
Kotlin：1.8.20

ViewOutlineProvider

公式リファレンス：ViewOutlineProvider

KotlinのViewOutlineProviderは、Viewの輪郭や形状を指定してクリッピングするためのクラスです。このクラスを使用することでViewを円形にしたり、角丸にしたりといったカスタマイズを行うことができるようになります。

例えばViewを円形にする場合の実装を参考に使い方をまとめていきます。

まずはViewOutlineProviderを継承した独自のクラスを用意します。オーバーライドしているgetOutlineメソッドはViewの輪郭(outline)を定義する役割になります。setOvalメソッドを使用して輪郭を円形にするように定義しています。

// Viewの輪郭を円形にする例
class OvalOutlineProvider : ViewOutlineProvider() {
    override fun getOutline(view: View?, outline: Outline?) {
        view?.let { v ->
            outline?.setOval(0, 0, v.width, v.height)
        }
    }
}

作成したクラスはクリッピングしたいViewのoutlineProviderに設定します。デフォルトではクリッピングがOFFになっているので反映されないので明示的にclipToOutlineプロパティにtrueを渡してクリッピングを有効にする必要があるので注意してください。

val view: View = findViewById(R.id.view)
view.outlineProvider = OvalOutlineProvider()
// クリッピングを有効にする
view.clipToOutline = true

setOvalメソッド

setOvalはOutlineクラスの持つ楕円（円または楕円）の輪郭を設定するメソッドです。各引数に指定するのは楕円の外接矩形の座標になります。

定義
public void setOval(int left, int top, int right, int bottom) {
    throw new RuntimeException("Stub!");
}

角丸を実装する：setRoundRect

円形ではなく角を丸めたような形にしたい場合はsetRoundRectメソッドを使用して以下のように実装します。

class RoundedCornerOutlineProvider(private val cornerRadius: Float) : ViewOutlineProvider() {
    override fun getOutline(view: View?, outline: Outline?) {
        view?.let { v ->
            outline?.setRoundRect(0, 0, v.width, v.height, cornerRadius)
        }
    }
}

まだまだ勉強中ですので間違っている点や至らぬ点がありましたら教えていただけると助かります。

ご覧いただきありがとうございました。

Android