ConstraintLayoutのCircular positioningでアナログ時計を作った

はじめに

この記事はConstraintLayoutのCircular positioningを使って円状にViewを配置してみるの続編です。

2018年4月にConstraintLayout 1.1がリリースされました。
この記事では正式にリリースされた機能の1つであるCircular positioningとそれを使ったサンプルについて書いていきます。

Circular positioningって？

"はじめに"で紹介した記事で触れていますが、View Aの中心を原点としてView Bを極座標で配置できるものです。
https://developer.android.com/reference/android/support/constraint/ConstraintLayout

iOSのAutoLayoutとConstraintLayoutは似ていますが、この極座標配置はiOSには無い(はず)です。

今回はCircular positioningの活用について探っていきましょう。
サンプルを作ったのでそちらで紹介します。

実装サンプル

Kotlinで実装しています(初めてKotlinで書いたので拙い部分はご容赦を...)。
ソースコードは以下に置いたので手元で実行して見てください。
https://github.com/taletail/CircularPositioning

環境

ConstraintLayout 1.1
Android Studio 3.0.1

サンプル: アナログ時計

真っ先に浮かんだCicular positioningの使い道は「アナログ時計を作る」ことでした。
時計の文字盤の配置は円状ですので、1から12までの文字のTextViewを等間隔に並べれば作れそうです。

良いですね！シンプルなアナログ時計を表示できました。ちゃんと針も動いてくれます。これはRxJavaのintervalで定期実行しています。
(正直文字盤より短針長針の実装の方が時間かかった)

ClockFragment.kt

class ClockFragment : Fragment() {

    // 時間の分割数
    private val PARTITIONS = 12

    private lateinit var binding: FragmentClockBinding
    private lateinit var hourHand: ImageView
    private lateinit var minuteHand: ImageView

    private val observer: Observable<DateTime> =
            Observable.interval(20, TimeUnit.SECONDS)
                    .map { DateTime(System.currentTimeMillis(), DateTimeZone.forOffsetHours(9)) }
                    .subscribeOn(Schedulers.io())
                    .observeOn(AndroidSchedulers.mainThread())

    private val compositeDisposable = CompositeDisposable()


    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
    }

    override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?,
                              savedInstanceState: Bundle?): View? {
        // Inflate the layout for this fragment
        return inflater.inflate(R.layout.fragment_clock, container, false)
    }

    override fun onActivityCreated(savedInstanceState: Bundle?) {
        super.onActivityCreated(savedInstanceState)

        binding = FragmentClockBinding.bind(view!!)
        hourHand = binding.hourHand
        minuteHand = binding.minuteHand

        val root = binding.root
        val centralView = binding.centralView

        val radius = resources.getDimensionPixelSize(R.dimen.circle_radius)

        // 文字盤をTextViewで作っていく
        for (i in 1..PARTITIONS) {
            val textView = TextView(context)
            textView.setTextSize(TypedValue.COMPLEX_UNIT_PX, resources.getDimension(R.dimen.text_size))

            val layoutParams = ConstraintLayout.LayoutParams(
                    ConstraintLayout.LayoutParams.WRAP_CONTENT,
                    ConstraintLayout.LayoutParams.WRAP_CONTENT)

            layoutParams.circleConstraint = centralView.id
            layoutParams.circleAngle = CircleUtil.computeAngleByIndex(PARTITIONS, i)
            layoutParams.circleRadius = radius
            textView.layoutParams = layoutParams

            textView.text = i.toString()

            root.addView(textView)
        }

        // 時針、分針の角度の初期値設定
        val now = DateTime(System.currentTimeMillis(), DateTimeZone.forOffsetHours(9))
        setClockSetting(now.hourOfDay, now.minuteOfHour)
    }

    override fun onStart() {
        super.onStart()

        val disposable = observer.subscribe(
                {
                    Log.i(TAG, "hour: " + it.hourOfDay + " minute: " + it.minuteOfHour)
                    setClockSetting(it.hourOfDay, it.minuteOfHour)
                },
                {
                    it.printStackTrace()
                },
                {
                    Log.i(TAG, "complete")
                }
        )

        compositeDisposable.add(disposable)
    }

    override fun onStop() {
        super.onStop()

        compositeDisposable.clear()
    }

    // 時針、分針を時間に合わせて回転させる
    private fun setClockSetting(hour: Int, minute: Int) {
        // hourは12時間に丸める
        val hour12 = hour % 12

        hourHand = binding.hourHand
        minuteHand = binding.minuteHand

        // 時針、分針を回転させる
        hourHand.rotation = CircleUtil.computeAngleByHour(hour12, minute)
        minuteHand.rotation = CircleUtil.computeAngleByMinite(minute)
    }
}

CircleUtil.kt

object CircleUtil {
    private const val CIRCLE_RADIUS = 360

    /**
     * index番目の要素の角度を計算して返す
     *
     * @param partition 分割数
     * @param index
     */
    fun computeAngleByIndex(partitions: Int, index: Int): Float {
        val angleUnit = (CIRCLE_RADIUS / partitions).toFloat()
        return index * angleUnit
    }

    fun computeAngleByMinite(minute: Int): Float {
        val angleUnit = (CIRCLE_RADIUS / 60).toFloat()
        return minute * angleUnit
    }

    fun computeAngleByHour(hour: Int, minute: Int): Float {
        val angleUnit = CIRCLE_RADIUS.toFloat() / (12 * 60)
        return (hour * 60 + minute) * angleUnit
    }
}

ちなみにアナログ時計を作るならAnalogClockというコンポーネントを使った方が楽...と言いたかったのですが、API level 23からdeprecatedになっていました。
代替できるクラスとかあるんでしょうか？

おまけ1: こいつ、回るぞ

アクションバーのメニューから「Rolling」をタップすると開けます。

なんと時計の文字盤が回転します！時計として使えねぇ！
一応短針長針は正しい時間を指したままにしてありますので時間はなんとなく分かります。

実装としては数字のTextViewの角度をValueAnimatorを使って定期的に変化させています。

RollingClockFragment.kt

class RollingClockFragment : Fragment() {

    private val PARTITIONS = 12

    private lateinit var binding: FragmentRollingClockBinding
    private lateinit var hourHand: ImageView
    private lateinit var minuteHand: ImageView

    private val numberAnimators: MutableList<ValueAnimator> = ArrayList()

    private val observer: Observable<DateTime> =
            Observable.interval(20, TimeUnit.SECONDS)
                    .map { DateTime(System.currentTimeMillis(), DateTimeZone.forOffsetHours(9)) }
                    .subscribeOn(Schedulers.io())
                    .observeOn(AndroidSchedulers.mainThread())

    private val compositeDisposable = CompositeDisposable()

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
    }

    override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?,
                              savedInstanceState: Bundle?): View? {
        // Inflate the layout for this fragment
        return inflater.inflate(R.layout.fragment_rolling_clock, container, false)
    }

    override fun onActivityCreated(savedInstanceState: Bundle?) {
        super.onActivityCreated(savedInstanceState)

        binding = FragmentRollingClockBinding.bind(view!!)
        hourHand = binding.hourHand
        minuteHand = binding.minuteHand

        val root = binding.root
        val centralView = binding.centralView

        val radius = resources.getDimensionPixelSize(R.dimen.circle_radius)

        for (i in 1..PARTITIONS) {
            val textView = TextView(context)
            textView.setTextSize(TypedValue.COMPLEX_UNIT_PX, resources.getDimension(R.dimen.text_size))

            val layoutParams = ConstraintLayout.LayoutParams(
                    ConstraintLayout.LayoutParams.WRAP_CONTENT,
                    ConstraintLayout.LayoutParams.WRAP_CONTENT)

            layoutParams.circleConstraint = centralView.id
            layoutParams.circleAngle = CircleUtil.computeAngleByIndex(PARTITIONS, i)
            layoutParams.circleRadius = radius
            textView.layoutParams = layoutParams

            textView.text = i.toString()

            root.addView(textView)

            numberAnimators.add(animateNumber(textView, layoutParams.circleAngle))
        }

        // 時針、分針の角度の初期値設定
        val now = DateTime(System.currentTimeMillis(), DateTimeZone.forOffsetHours(9))
        setClockSetting(now.hourOfDay, now.minuteOfHour)
    }

    override fun onStart() {
        super.onStart()

        val disposable = observer.subscribe(
                {
                    Log.i(TAG, "hour: " + it.hourOfDay + " minute: " + it.minuteOfHour)
                    setClockSetting(it.hourOfDay, it.minuteOfHour)
                },
                {
                    it.printStackTrace()
                },
                {
                    Log.i(TAG, "complete")
                }
        )

        compositeDisposable.add(disposable)

        // 文字盤を回転させるアニメーション
        numberAnimators.forEach {
            it.start()
        }
    }

    override fun onStop() {
        super.onStop()

        numberAnimators.forEach {
            it.cancel()
        }
        compositeDisposable.clear()
    }

    // 時針、分針を時間に合わせて回転させる
    private fun setClockSetting(hour: Int, minute: Int) {
        // hourは12時間に丸める
        val hour12 = hour % 12

        hourHand = binding.hourHand
        minuteHand = binding.minuteHand

        // 時針、分針を回転させる
        hourHand.rotation = CircleUtil.computeAngleByHour(hour12, minute)
        minuteHand.rotation = CircleUtil.computeAngleByMinite(minute)
    }

    private fun animateNumber(number: TextView, initAngle: Float): ValueAnimator {
        val animator = ValueAnimator.ofInt(0, 359)

        animator.addUpdateListener { valueAnimator ->
            val value = valueAnimator.animatedValue as Int
            val layoutParams = number.layoutParams as ConstraintLayout.LayoutParams
            layoutParams.circleAngle = initAngle + value
            number.layoutParams = layoutParams
        }

        animator.duration = TimeUnit.SECONDS.toMillis(5)
        animator.interpolator = LinearInterpolator()
        animator.repeatMode = ValueAnimator.RESTART
        animator.repeatCount = ValueAnimator.INFINITE

        return animator
    }
}

(レイアウトファイルは同じなので省略)

アニメーションの実装はこちらの記事を大変参考にさせていただきました。

おまけ2: 2重に回るぞ

アクションバーのメニューから「Double Rolling」をタップすると開けます。

内側のViewが回転し、制約をつけておいた外側のViewも一緒に動きます。
真ん中のボタンを押すと外側のViewも回転します。
こういうの見ると2重振り子とかできそうですよね。多分大変なのでやらないですけど。

DoubleRollingFragment.kt

class DoubleRollingFragment : Fragment() {

    private lateinit var binding: FragmentDoubleRollingBinding

    private lateinit var rollButton: Button

    private lateinit var firstAnimator: ValueAnimator
    private lateinit var secondAnimator: ValueAnimator

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
    }

    override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?,
                              savedInstanceState: Bundle?): View? {
        return inflater.inflate(R.layout.fragment_double_rolling, container, false)
    }

    override fun onActivityCreated(savedInstanceState: Bundle?) {
        super.onActivityCreated(savedInstanceState)

        binding = FragmentDoubleRollingBinding.bind(view!!)
        binding.fragment = this

        rollButton = binding.rollButton
        val firstView = binding.first
        val secondView = binding.second

        val firstLayoutParams = firstView.layoutParams as ConstraintLayout.LayoutParams
        val secondLayoutParams = secondView.layoutParams as ConstraintLayout.LayoutParams

        firstAnimator = animateView(firstView, firstLayoutParams.circleAngle, TimeUnit.SECONDS.toMillis(5))
        secondAnimator = animateView(secondView, secondLayoutParams.circleAngle, TimeUnit.SECONDS.toMillis(2))
    }

    override fun onStart() {
        super.onStart()

        firstAnimator.start()
    }

    override fun onStop() {
        super.onStop()

        firstAnimator.cancel()
        secondAnimator.cancel()
    }

    private fun animateView(view: View, initAngle: Float, duration: Long): ValueAnimator {
        val animator = ValueAnimator.ofInt(0, 359)

        animator.addUpdateListener { valueAnimator ->
            val value = valueAnimator.animatedValue as Int
            val layoutParams = view.layoutParams as ConstraintLayout.LayoutParams
            layoutParams.circleAngle = initAngle + value
            view.layoutParams = layoutParams
        }

        animator.duration = duration
        animator.interpolator = LinearInterpolator()
        animator.repeatMode = ValueAnimator.RESTART
        animator.repeatCount = ValueAnimator.INFINITE

        return animator
    }

    fun onClick(view: View) {
        secondAnimator.start()
    }
}

おわりに

サンプルではCircular positioningの使い方が"はじめに"で紹介した実装と同じになってしまったので新規性が薄いのですが...おまけ1ではアニメーションとの組み合わせ、おまけ2では制約をつけた先のView(赤)が動くと、何もしなくても元のView(青)も合わせて動くという知見がありました(Constraintの性質を考えたら当然ではあるのですが)。

最初にCircular positioningの活用方法について探ると言っておいてなんですが、やはり円形のレイアウトを組むのに使う以外に思いつきませんでした。
ですがちゃんと計算式を組めば楕円形の配置にすることもできるでしょうし、あるいはゲーム的な動きを持たせるのにも使えるかも...。
アニメーションと組み合わせるというのも1つのヒントかもしれません。

何かCircular positioningの良い使い方があればコメントお待ちしています！