Zenn
🙌

[Android][Kotlin]レーダーViewを作ってみた。

に公開
Android
Kotlin
view
tech

https://github.com/aaaa1597/AndKot-RadarViewSample/tree/main

Abstract

  • 一般的なイメージのレーダーをandroid Viewとして作ってみた。
  • 使い方の説明
  • ソースコードの説明

概要

BLEアプリを作ってて、レーダー画面を表示したかったので、ないかな～と探したんだけど意外になかったので作ってみた。レーダー画面は何となく緑っぽいのイメージなのでそのイメージを大事に。
ソースコードはページ上部のgithubリンクに配置済。

使い方

  • レイアウトXMLに適当に配置して頂ければ。
  • 画面サイズは縦横固定値を想定しています。
  • レーダー内の点は、RadarView.kt(69): radarPointsに適当に追加しているだけですので、適宜追加削除して頂ければ。
  • 円弧形と円形と切り替えれる様にしています。(app:sweepRangeにfloat値を設定　)
  • レーダー線の動きは時計方向に回転し続けるパターンと、折り返すパターンの2種類です。(app:isSweepWrappedにboolean値を設定)

レイアウト属性の説明

説明というほどでもないけど一応。

属性 型 値 説明
sweepRange float 0-359° 円弧の角度
isSweepWrapped boolean true/false 折り返すかどうか

ソースコードのポイント

  • Android Viewを継承して作ったんだけど、Kotlinって下記の型だけOverrideすればいいという。
    View(context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0)
    すごい便利。
RadarView.kt(16-18)
class RadarView @JvmOverloads constructor(
    context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0
) : View(context, attrs, defStyleAttr) {
  • カスタム属性
    カスタム属性作れるって知らんかった。いい勉強になった。
    先にres/values/attrs.xmlを作成しとく方が作りやすい。
    withStyledAttributes()を使えば、attrs.xmlから値が取れる。
attrs.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="RadarView">
        <attr name="sweepRange" format="float"/> <!-- angle: 0-359°-->
        <attr name="isSweepWrapped" format="boolean"/>
    </declare-styleable>
</resources>
RadarView.kt(24-32)
init {
    attrs?.let {
        context.withStyledAttributes(it, R.styleable.RadarView) {
            D_SWEEP_RANGE = getFloat(R.styleable.RadarView_sweepRange, 360f)
            D_START_ANGLE = -D_SWEEP_RANGE / 2f
            D_IS_SWEEP_WRAPPED = getBoolean(R.styleable.RadarView_isSweepWrapped, false)
        }
    }
}
  • レーダーの描画
    onDraw()の中で描いてます。円弧/円を描いて、レーダー線を描いている。あとレーダーの尾も。苦労したところではあるけど、もっと簡潔に書けるんだろうなとは思う。

Discussion