カレンダー＆色分けを実装！

今回はタイトルの通り、カレンダー＆色分けを実装しました。今の私にかかればこんなの朝飯前・・・

いや、カレンダーに関しては完全にQiitaに頼りk

色分け

期限とタイトルが意味不明

まず、色分けについて。赤枠部分の丸い部分をタップすることでカラーピッカーが表示され、色を選べます。カラーピッカーに関しては、前回紹介したものと全く同じものです。ちなみに、以下にソースコードを貼っておきますが、丸く囲ってある線と真ん中の色はCanvasとPaintを使って描画しています。先に線の色で円を描画しておき、その後、中心の色で半径が5dp小さい円を描画します。

CanvasBasicView.kt

package net.chikach.smmanager

import android.content.Context
import android.graphics.Canvas
import android.graphics.Color
import android.graphics.Paint
import android.util.AttributeSet
import android.view.View
import com.flask.colorpicker.builder.ColorPickerDialogBuilder
import org.jetbrains.anko.alert

class CanvasBasicView(context: Context, attributeSet: AttributeSet) : View(context, attributeSet) {
    private var mPaint: Paint = Paint()
    var color: Int = Color.WHITE
    override fun onDraw(canvas: Canvas?) {
        super.onDraw(canvas)
        mPaint.color = Color.LTGRAY
        mPaint.strokeWidth = 10F
        mPaint.style = Paint.Style.FILL

        // width, heightで幅と高さを出し、それぞれ2で割って中心に来るように。
        // 半径はdipでdp指定したほうが良かったかも
        canvas!!.drawCircle(width.toFloat() / 2, height.toFloat() / 2, 45F, mPaint)

        mPaint.color = color
        canvas.drawCircle(width.toFloat() / 2, height.toFloat() / 2, 40F, mPaint)

        setOnClickListener {
            ColorPickerDialogBuilder.with(context)
                    .setTitle("提出物の色分け")
                    .density(6)
                    .initialColor(color)
                    .setPositiveButton(context!!.getString(android.R.string.yes)) { dialogInterface, i, ints ->
                        dialogInterface.dismiss()
                        try {
                            color = i
                            invalidate()
                        } catch (e: Exception) {
                            e.printStackTrace()
                        }

                    }
                    .setNegativeButton(context!!.getString(android.R.string.cancel)) { dialog, which ->  }
                    .build()
                    .show()
        }
    }
}

こちらのサイト様を参考にして、チョチョイと弄った。

で、タップするとこんな画面が表示されます。

カラーピッカーを表示させた

テーマカラー設定よりもカラーピッカーの密度(density)を小さくした。色分けなので多すぎると困ると思ったので。

こういうカラーピッカーはデザイン性もあって好きですね。明度をゼロに(ry

トップ画面

色を設定すると、こんなふうに背景色が変わります。背景色に合わせて文字色も見やすい色になるとかはありませんのでご注意ください。黒文字で見にくくなる色が少ないからあのカラーピッカーを選んだっていうのもありますね。

また、リストのデザインも少し変えました。残り日数を大きくして見やすくしました。