カレンダー&色分けを実装!

公開 2019-05-01 / 最終更新 2021-05-05 12:07
カテゴリー Androidアプリ

Google Play で手に入れよう

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

いや、カレンダーに関しては完全に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

トップ画面

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

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

カレンダー

カレンダーは上の画像で言うと右上のアイコンから起動できます。アイコンはもちろんicooon mono様から。このアプリで使っているアイコンはAndroid標準のものを除いて全てこのサイトから頂いています。

カレンダー

https://qiita.com/SAB/items/0993c489e7ef1c0f969d

こちらを参考にして土台は作りました。(矢印アイコンもicooon mono様から。)手を加えた点としては、今月であったら年月のテキストを赤にし、今日のセルの背景を赤っぽくしました。いずれはViewPagerを使ってスワイプできるようにしたり、年ごとに移動できるようにしたりする予定。

で、提出期限がある日には先程色分けで設定した色で丸いマークが表示されます。ちなみに、その日が提出期限の提出物が2つ以上あった場合、プログラム上で先に見つかったものの色が反映されます。多分登録順ですが、たまにバラバラになったりする。

でで、丸いマークがある日付をタップすると、

こんなダイアログが表示されます。ここから提出物をタップすると詳細画面に飛べます。ちなみに背景色はもちろん色分けで設定した色。

このあたりはファイル数が多いため、GitHubへのリンクで勘弁してください。

CalendarActivity.kt

CalendarAdapter.kt

CalendarDateManager.kt

CalendarCanvasBasicView.kt

activity_calendar.xml

calendar_cell.xml


まとめ

やっぱりAndroidアプリ開発は楽しい。

騙されたと思ってAndroidアプリ開発の世界に一度だけ足を踏み入れてみるのもいいと思いますよ。(感染者を増やしていくスタイル

タグ:
カラーピッカー
カレンダー
コメント
コメントする

※ニックネームの変更はCookieを削除することで行えます。(ただし、過去に書き込んだコメントの編集・削除はできなくなります。)

コメント本文

※reCAPTCHAによるボット判定を行っているため、送信に少々時間がかかる場合があります。ご了承ください。

送信しました。

確認

コメントを削除しますか?

返信

返信を入力

arrow_upward