20200623のAndroidに関する記事は2件です。

Androidでカレンダーを自作する【背景色編】

概要

前回カレンダーっぽくするために枠線を入れたのですが、今回はそれに加えて土日の色を少し変えていきたいと思います。

やること

  • 土曜の色を青に
  • 日曜の色を赤に

いざ、着色

実は昨日の枠線をつける段階で背景色の設定方法も調べはついていたのでそれを黙々と組み込みます。

前回のflame_style.xmlとは別にflame_style_red.xmlとflame_style_blue.xmlを用意します。
そしてそれそれに赤と青のスタイルを記述して設定するだけです。
(ホントはflame_style.xmlの中に書きたかったがレイアウトでの指定方法がわからんかった....)

flame_style_red.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <!-- 背景色 -->
    <solid android:color="#45FF0000" />

    <!-- 枠線 width:線の幅、color:線の色 -->
    <stroke
        android:width="1dp"
        android:color="#000000" />
</shape>
flame_style_blue.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <!-- 背景色 -->
    <solid android:color="#450288D1" />

    <!-- 枠線 width:線の幅、color:線の色 -->
    <stroke
        android:width="1dp"
        android:color="#000000" />
</shape>

そしてこの2つを特定のマスのみ適用します。

activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity">

        <!--縦分割のガイドライン-->
        <androidx.constraintlayout.widget.Guideline
            android:id="@+id/youbi"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            app:layout_constraintGuide_percent="0.1" />

        <androidx.constraintlayout.widget.Guideline
            android:id="@+id/line_1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            app:layout_constraintGuide_percent="0.25" />

        <androidx.constraintlayout.widget.Guideline
            android:id="@+id/line_2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            app:layout_constraintGuide_percent="0.40" />

        <androidx.constraintlayout.widget.Guideline
            android:id="@+id/line_3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            app:layout_constraintGuide_percent="0.55" />

        <androidx.constraintlayout.widget.Guideline
            android:id="@+id/line_4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            app:layout_constraintGuide_percent="0.70" />

        <androidx.constraintlayout.widget.Guideline
            android:id="@+id/line_5"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            app:layout_constraintGuide_percent="0.85" />

        <androidx.constraintlayout.widget.Guideline
            android:id="@+id/line_6"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            app:layout_constraintGuide_percent="1" />

        <!--横分割のガイドライン-->
        <androidx.constraintlayout.widget.Guideline
            android:id="@+id/row1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            app:layout_constraintGuide_percent="0.14" />

        <androidx.constraintlayout.widget.Guideline
            android:id="@+id/row2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            app:layout_constraintGuide_percent="0.28" />

        <androidx.constraintlayout.widget.Guideline
            android:id="@+id/row3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            app:layout_constraintGuide_percent="0.42" />

        <androidx.constraintlayout.widget.Guideline
            android:id="@+id/row4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            app:layout_constraintGuide_percent="0.56" />

        <androidx.constraintlayout.widget.Guideline
            android:id="@+id/row5"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            app:layout_constraintGuide_percent="0.70" />

        <androidx.constraintlayout.widget.Guideline
            android:id="@+id/row6"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            app:layout_constraintGuide_percent="0.84" />

        <androidx.constraintlayout.widget.Guideline
            android:id="@+id/row7"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            app:layout_constraintGuide_percent="1" />


        <TextView
            android:id="@+id/sunday"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:background="@drawable/flame_style_red"
            android:gravity="center_horizontal|center_vertical"
            android:text="Sun"
            app:layout_constraintBottom_toBottomOf="@id/youbi"
            app:layout_constraintEnd_toEndOf="@id/row1"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />


        <TextView
            android:id="@+id/monday"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:background="@drawable/flame_style"
            android:gravity="center_horizontal|center_vertical"
            android:text="Mon"
            app:layout_constraintBottom_toBottomOf="@id/youbi"
            app:layout_constraintEnd_toEndOf="@id/row2"
            app:layout_constraintStart_toEndOf="@+id/row1"
            app:layout_constraintTop_toTopOf="@+id/sunday" />

        <TextView
            android:id="@+id/tuesday"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:background="@drawable/flame_style"
            android:gravity="center_horizontal|center_vertical"
            android:text="Tue"
            app:layout_constraintBottom_toBottomOf="@id/youbi"
            app:layout_constraintEnd_toEndOf="@id/row3"
            app:layout_constraintStart_toEndOf="@+id/row2"
            app:layout_constraintTop_toTopOf="@+id/sunday" />

        <TextView
            android:id="@+id/wednesday"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:background="@drawable/flame_style"
            android:gravity="center_horizontal|center_vertical"
            android:text="Wed"
            app:layout_constraintBottom_toBottomOf="@id/youbi"
            app:layout_constraintEnd_toEndOf="@id/row4"
            app:layout_constraintStart_toEndOf="@+id/row3"
            app:layout_constraintTop_toTopOf="@+id/sunday" />

        <TextView
            android:id="@+id/thursday"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:background="@drawable/flame_style"
            android:gravity="center_horizontal|center_vertical"
            android:text="Thu"
            app:layout_constraintBottom_toBottomOf="@id/youbi"
            app:layout_constraintEnd_toEndOf="@id/row5"
            app:layout_constraintStart_toEndOf="@+id/row4"
            app:layout_constraintTop_toTopOf="@+id/sunday" />

        <TextView
            android:id="@+id/friday"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:background="@drawable/flame_style"
            android:gravity="center_horizontal|center_vertical"
            android:text="Fri"
            app:layout_constraintBottom_toBottomOf="@id/youbi"
            app:layout_constraintEnd_toEndOf="@id/row6"
            app:layout_constraintStart_toEndOf="@+id/row5"
            app:layout_constraintTop_toTopOf="@+id/sunday" />

        <TextView
            android:id="@+id/saturday"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:background="@drawable/flame_style_blue"
            android:gravity="center_horizontal|center_vertical"
            android:text="Sat"
            app:layout_constraintBottom_toBottomOf="@id/youbi"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toEndOf="@id/row6"
            app:layout_constraintTop_toTopOf="@+id/sunday" />


        <TextView
            android:id="@+id/cell_1"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:background="@drawable/flame_style_red"
            android:gravity="center_horizontal|center_vertical"
            android:text="26"
            app:layout_constraintBottom_toBottomOf="@id/line_1"
            app:layout_constraintEnd_toEndOf="@id/row1"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="@id/youbi" />


        <TextView
            android:id="@+id/cell_2"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:background="@drawable/flame_style"
            android:gravity="center_horizontal|center_vertical"
            android:text="27"
            app:layout_constraintBottom_toBottomOf="@id/line_1"
            app:layout_constraintEnd_toEndOf="@id/row2"
            app:layout_constraintStart_toEndOf="@+id/row1"
            app:layout_constraintTop_toTopOf="@id/youbi" />

        <TextView
            android:id="@+id/cell_3"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:background="@drawable/flame_style"
            android:gravity="center_horizontal|center_vertical"
            android:text="28"
            app:layout_constraintBottom_toBottomOf="@id/line_1"
            app:layout_constraintEnd_toEndOf="@id/row3"
            app:layout_constraintStart_toEndOf="@+id/row2"
            app:layout_constraintTop_toTopOf="@id/youbi" />

        <TextView
            android:id="@+id/cell_4"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:background="@drawable/flame_style"
            android:gravity="center_horizontal|center_vertical"
            android:text="29"
            app:layout_constraintBottom_toBottomOf="@id/line_1"
            app:layout_constraintEnd_toEndOf="@id/row4"
            app:layout_constraintStart_toEndOf="@+id/row3"
            app:layout_constraintTop_toTopOf="@id/youbi" />

        <TextView
            android:id="@+id/cell_5"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:background="@drawable/flame_style"
            android:gravity="center_horizontal|center_vertical"
            android:text="30"
            app:layout_constraintBottom_toBottomOf="@id/line_1"
            app:layout_constraintEnd_toEndOf="@id/row5"
            app:layout_constraintStart_toEndOf="@+id/row4"
            app:layout_constraintTop_toTopOf="@id/youbi" />

        <TextView
            android:id="@+id/cell_6"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:background="@drawable/flame_style"
            android:gravity="center_horizontal|center_vertical"
            android:text="31"
            app:layout_constraintBottom_toBottomOf="@id/line_1"
            app:layout_constraintEnd_toEndOf="@id/row6"
            app:layout_constraintStart_toEndOf="@+id/row5"
            app:layout_constraintTop_toTopOf="@id/youbi" />

        <TextView
            android:id="@+id/cell_7"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:background="@drawable/flame_style_blue"
            android:gravity="center_horizontal|center_vertical"
            android:text="1"
            app:layout_constraintBottom_toBottomOf="@id/line_1"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toEndOf="@id/row6"
            app:layout_constraintTop_toTopOf="@id/youbi" />

        <TextView
            android:id="@+id/cell_21"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:background="@drawable/flame_style_red"
            android:gravity="center_horizontal|center_vertical"
            android:text="2"
            app:layout_constraintBottom_toBottomOf="@id/line_2"
            app:layout_constraintEnd_toEndOf="@id/row1"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="@id/line_1" />


        <TextView
            android:id="@+id/cell_22"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:background="@drawable/flame_style"
            android:gravity="center_horizontal|center_vertical"
            android:text="3"
            app:layout_constraintBottom_toBottomOf="@id/line_2"
            app:layout_constraintEnd_toEndOf="@id/row2"
            app:layout_constraintStart_toEndOf="@+id/row1"
            app:layout_constraintTop_toTopOf="@id/line_1" />

        <TextView
            android:id="@+id/cell_23"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:background="@drawable/flame_style"
            android:gravity="center_horizontal|center_vertical"
            android:text="4"
            app:layout_constraintBottom_toBottomOf="@id/line_2"
            app:layout_constraintEnd_toEndOf="@id/row3"
            app:layout_constraintStart_toEndOf="@+id/row2"
            app:layout_constraintTop_toTopOf="@id/line_1" />

        <TextView
            android:id="@+id/cell_24"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:background="@drawable/flame_style"
            android:gravity="center_horizontal|center_vertical"
            android:text="5"
            app:layout_constraintBottom_toBottomOf="@id/line_2"
            app:layout_constraintEnd_toEndOf="@id/row4"
            app:layout_constraintStart_toEndOf="@+id/row3"
            app:layout_constraintTop_toTopOf="@id/line_1" />

        <TextView
            android:id="@+id/cell_25"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:background="@drawable/flame_style"
            android:gravity="center_horizontal|center_vertical"
            android:text="6"
            app:layout_constraintBottom_toBottomOf="@id/line_2"
            app:layout_constraintEnd_toEndOf="@id/row5"
            app:layout_constraintStart_toEndOf="@+id/row4"
            app:layout_constraintTop_toTopOf="@id/line_1" />

        <TextView
            android:id="@+id/cell_26"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:background="@drawable/flame_style"
            android:gravity="center_horizontal|center_vertical"
            android:text="7"
            app:layout_constraintBottom_toBottomOf="@id/line_2"
            app:layout_constraintEnd_toEndOf="@id/row6"
            app:layout_constraintStart_toEndOf="@+id/row5"
            app:layout_constraintTop_toTopOf="@id/line_1" />

        <TextView
            android:id="@+id/cell_27"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:background="@drawable/flame_style_blue"
            android:gravity="center_horizontal|center_vertical"
            android:text="8"
            app:layout_constraintBottom_toBottomOf="@id/line_2"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toEndOf="@id/row6"
            app:layout_constraintTop_toTopOf="@id/line_1" />

        <TextView
            android:id="@+id/cell_31"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:background="@drawable/flame_style_red"
            android:gravity="center_horizontal|center_vertical"
            android:text="9"
            app:layout_constraintBottom_toBottomOf="@id/line_3"
            app:layout_constraintEnd_toEndOf="@id/row1"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="@id/line_2" />


        <TextView
            android:id="@+id/cell_32"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:background="@drawable/flame_style"
            android:gravity="center_horizontal|center_vertical"
            android:text="10"
            app:layout_constraintBottom_toBottomOf="@id/line_3"
            app:layout_constraintEnd_toEndOf="@id/row2"
            app:layout_constraintStart_toEndOf="@+id/row1"
            app:layout_constraintTop_toTopOf="@id/line_2" />

        <TextView
            android:id="@+id/cell_33"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:background="@drawable/flame_style"
            android:gravity="center_horizontal|center_vertical"
            android:text="11"
            app:layout_constraintBottom_toBottomOf="@id/line_3"
            app:layout_constraintEnd_toEndOf="@id/row3"
            app:layout_constraintStart_toEndOf="@+id/row2"
            app:layout_constraintTop_toTopOf="@id/line_2" />

        <TextView
            android:id="@+id/cell_34"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:background="@drawable/flame_style"
            android:gravity="center_horizontal|center_vertical"
            android:text="12"
            app:layout_constraintBottom_toBottomOf="@id/line_3"
            app:layout_constraintEnd_toEndOf="@id/row4"
            app:layout_constraintStart_toEndOf="@+id/row3"
            app:layout_constraintTop_toTopOf="@id/line_2" />

        <TextView
            android:id="@+id/cell_35"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:background="@drawable/flame_style"
            android:gravity="center_horizontal|center_vertical"
            android:text="13"
            app:layout_constraintBottom_toBottomOf="@id/line_3"
            app:layout_constraintEnd_toEndOf="@id/row5"
            app:layout_constraintStart_toEndOf="@+id/row4"
            app:layout_constraintTop_toTopOf="@id/line_2" />

        <TextView
            android:id="@+id/cell_36"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:background="@drawable/flame_style"
            android:gravity="center_horizontal|center_vertical"
            android:text="14"
            app:layout_constraintBottom_toBottomOf="@id/line_3"
            app:layout_constraintEnd_toEndOf="@id/row6"
            app:layout_constraintStart_toEndOf="@+id/row5"
            app:layout_constraintTop_toTopOf="@id/line_2" />

        <TextView
            android:id="@+id/cell_37"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:background="@drawable/flame_style_blue"
            android:gravity="center_horizontal|center_vertical"
            android:text="15"
            app:layout_constraintBottom_toBottomOf="@id/line_3"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toEndOf="@id/row6"
            app:layout_constraintTop_toTopOf="@id/line_2" />

        <TextView
            android:id="@+id/cell_41"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:background="@drawable/flame_style_red"
            android:gravity="center_horizontal|center_vertical"
            android:text="16"
            app:layout_constraintBottom_toBottomOf="@id/line_4"
            app:layout_constraintEnd_toEndOf="@id/row1"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="@id/line_3" />

        <TextView
            android:id="@+id/cell_42"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:background="@drawable/flame_style"
            android:gravity="center_horizontal|center_vertical"
            android:text="17"
            app:layout_constraintBottom_toBottomOf="@id/line_4"
            app:layout_constraintEnd_toEndOf="@id/row2"
            app:layout_constraintStart_toEndOf="@+id/row1"
            app:layout_constraintTop_toTopOf="@id/line_3" />

        <TextView
            android:id="@+id/cell_43"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:background="@drawable/flame_style"
            android:gravity="center_horizontal|center_vertical"
            android:text="18"
            app:layout_constraintBottom_toBottomOf="@id/line_4"
            app:layout_constraintEnd_toEndOf="@id/row3"
            app:layout_constraintStart_toEndOf="@+id/row2"
            app:layout_constraintTop_toTopOf="@id/line_3" />

        <TextView
            android:id="@+id/cell_44"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:background="@drawable/flame_style"
            android:gravity="center_horizontal|center_vertical"
            android:text="19"
            app:layout_constraintBottom_toBottomOf="@id/line_4"
            app:layout_constraintEnd_toEndOf="@id/row4"
            app:layout_constraintStart_toEndOf="@+id/row3"
            app:layout_constraintTop_toTopOf="@id/line_3" />

        <TextView
            android:id="@+id/cell_45"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:background="@drawable/flame_style"
            android:gravity="center_horizontal|center_vertical"
            android:text="20"
            app:layout_constraintBottom_toBottomOf="@id/line_4"
            app:layout_constraintEnd_toEndOf="@id/row5"
            app:layout_constraintStart_toEndOf="@+id/row4"
            app:layout_constraintTop_toTopOf="@id/line_3" />

        <TextView
            android:id="@+id/cell_46"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:background="@drawable/flame_style"
            android:gravity="center_horizontal|center_vertical"
            android:text="21"
            app:layout_constraintBottom_toBottomOf="@id/line_4"
            app:layout_constraintEnd_toEndOf="@id/row6"
            app:layout_constraintStart_toEndOf="@+id/row5"
            app:layout_constraintTop_toTopOf="@id/line_3" />

        <TextView
            android:id="@+id/cell_47"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:background="@drawable/flame_style_blue"
            android:gravity="center_horizontal|center_vertical"
            android:text="22"
            app:layout_constraintBottom_toBottomOf="@id/line_4"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toEndOf="@id/row6"
            app:layout_constraintTop_toTopOf="@id/line_3" />

        <TextView
            android:id="@+id/cell_51"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:background="@drawable/flame_style_red"
            android:gravity="center_horizontal|center_vertical"
            android:text="23"
            app:layout_constraintBottom_toBottomOf="@id/line_5"
            app:layout_constraintEnd_toEndOf="@id/row1"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="@id/line_4" />

        <TextView
            android:id="@+id/cell_52"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:background="@drawable/flame_style"
            android:gravity="center_horizontal|center_vertical"
            android:text="24"
            app:layout_constraintBottom_toBottomOf="@id/line_5"
            app:layout_constraintEnd_toEndOf="@id/row2"
            app:layout_constraintStart_toEndOf="@+id/row1"
            app:layout_constraintTop_toTopOf="@id/line_4" />

        <TextView
            android:id="@+id/cell_53"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:background="@drawable/flame_style"
            android:gravity="center_horizontal|center_vertical"
            android:text="25"
            app:layout_constraintBottom_toBottomOf="@id/line_5"
            app:layout_constraintEnd_toEndOf="@id/row3"
            app:layout_constraintStart_toEndOf="@+id/row2"
            app:layout_constraintTop_toTopOf="@id/line_4" />

        <TextView
            android:id="@+id/cell_54"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:background="@drawable/flame_style"
            android:gravity="center_horizontal|center_vertical"
            android:text="26"
            app:layout_constraintBottom_toBottomOf="@id/line_5"
            app:layout_constraintEnd_toEndOf="@id/row4"
            app:layout_constraintStart_toEndOf="@+id/row3"
            app:layout_constraintTop_toTopOf="@id/line_4" />

        <TextView
            android:id="@+id/cell_55"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:background="@drawable/flame_style"
            android:gravity="center_horizontal|center_vertical"
            android:text="27"
            app:layout_constraintBottom_toBottomOf="@id/line_5"
            app:layout_constraintEnd_toEndOf="@id/row5"
            app:layout_constraintStart_toEndOf="@+id/row4"
            app:layout_constraintTop_toTopOf="@id/line_4" />

        <TextView
            android:id="@+id/cell_56"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:background="@drawable/flame_style"
            android:gravity="center_horizontal|center_vertical"
            android:text="28"
            app:layout_constraintBottom_toBottomOf="@id/line_5"
            app:layout_constraintEnd_toEndOf="@id/row6"
            app:layout_constraintStart_toEndOf="@+id/row5"
            app:layout_constraintTop_toTopOf="@id/line_4" />

        <TextView
            android:id="@+id/cell_57"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:background="@drawable/flame_style_blue"
            android:gravity="center_horizontal|center_vertical"
            android:text="29"
            app:layout_constraintBottom_toBottomOf="@id/line_5"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toEndOf="@id/row6"
            app:layout_constraintTop_toTopOf="@id/line_4" />

        <TextView
            android:id="@+id/cell_61"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:background="@drawable/flame_style_red"
            android:gravity="center_horizontal|center_vertical"
            android:text="30"
            app:layout_constraintBottom_toBottomOf="@id/line_6"
            app:layout_constraintEnd_toEndOf="@id/row1"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="@id/line_5" />

        <TextView
            android:id="@+id/cell_62"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:background="@drawable/flame_style"
            android:gravity="center_horizontal|center_vertical"
            android:text="1"
            app:layout_constraintBottom_toBottomOf="@id/line_6"
            app:layout_constraintEnd_toEndOf="@id/row2"
            app:layout_constraintStart_toEndOf="@+id/row1"
            app:layout_constraintTop_toTopOf="@id/line_5" />

        <TextView
            android:id="@+id/cell_63"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:background="@drawable/flame_style"
            android:gravity="center_horizontal|center_vertical"
            android:text="2"
            app:layout_constraintBottom_toBottomOf="@id/line_6"
            app:layout_constraintEnd_toEndOf="@id/row3"
            app:layout_constraintStart_toEndOf="@+id/row2"
            app:layout_constraintTop_toTopOf="@id/line_5" />

        <TextView
            android:id="@+id/cell_64"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:background="@drawable/flame_style"
            android:gravity="center_horizontal|center_vertical"
            android:text="3"
            app:layout_constraintBottom_toBottomOf="@id/line_6"
            app:layout_constraintEnd_toEndOf="@id/row4"
            app:layout_constraintStart_toEndOf="@+id/row3"
            app:layout_constraintTop_toTopOf="@id/line_5" />

        <TextView
            android:id="@+id/cell_65"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:background="@drawable/flame_style"
            android:gravity="center_horizontal|center_vertical"
            android:text="4"
            app:layout_constraintBottom_toBottomOf="@id/line_6"
            app:layout_constraintEnd_toEndOf="@id/row5"
            app:layout_constraintStart_toEndOf="@+id/row4"
            app:layout_constraintTop_toTopOf="@id/line_5" />

        <TextView
            android:id="@+id/cell_66"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:background="@drawable/flame_style"
            android:gravity="center_horizontal|center_vertical"
            android:text="5"
            app:layout_constraintBottom_toBottomOf="@id/line_6"
            app:layout_constraintEnd_toEndOf="@id/row6"
            app:layout_constraintStart_toEndOf="@+id/row5"
            app:layout_constraintTop_toTopOf="@id/line_5" />

        <TextView
            android:id="@+id/cell_67"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:background="@drawable/flame_style_blue"
            android:gravity="center_horizontal|center_vertical"
            android:text="6"
            app:layout_constraintBottom_toBottomOf="@id/line_6"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toEndOf="@id/row6"
            app:layout_constraintTop_toTopOf="@id/line_5" />

    </androidx.constraintlayout.widget.ConstraintLayout>
</layout>

これで設定は完了です。

実行結果

スクリーンショット 2020-06-22 2.25.19.png

思った20倍それっぽくなりました笑

予約投稿:2020-06-23

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

[Modern Android] Jetpack Compose その3

JetNewsのサンプルコード見ながら、
Jetpack Composeについて、理解や分析のメモです。
Flutterと似ているので、比べてながらメモします。

Theme

private val LightThemeColors = lightColorPalette(
    primary = Red700,
    primaryVariant = Red900,
    onPrimary = Color.White,
    secondary = Red700,
    secondaryVariant = Red900,
    onSecondary = Color.White,
    error = Red800
)

private val DarkThemeColors = darkColorPalette(
    primary = Red300,
    primaryVariant = Red700,
    onPrimary = Color.Black,
    secondary = Red300,
    onSecondary = Color.White,
    error = Red200
)

@Composable
val ColorPalette.snackbarAction: Color
    get() = if (isLight) Red300 else Red700

@Composable
fun JetnewsTheme(
    darkTheme: Boolean = isSystemInDarkTheme(),
    content: @Composable() () -> Unit
) {
    MaterialTheme(
        colors = if (darkTheme) DarkThemeColors else LightThemeColors,
        typography = themeTypography,
        shapes = shapes,
        content = content
    )
}

lightColorPalette

/**
 * Creates a complete color definition for the
 * [Material color specification](https://material.io/design/color/the-color-system.html#color-theme-creation)
 * using the default light theme values.
 *
 * @see darkColorPalette
 */
fun lightColorPalette(
    primary: Color = Color(0xFF6200EE),
    primaryVariant: Color = Color(0xFF3700B3),
    secondary: Color = Color(0xFF03DAC6),
    secondaryVariant: Color = Color(0xFF018786),
    background: Color = Color.White,
    surface: Color = Color.White,
    error: Color = Color(0xFFB00020),
    onPrimary: Color = Color.White,
    onSecondary: Color = Color.Black,
    onBackground: Color = Color.Black,
    onSurface: Color = Color.Black,
    onError: Color = Color.White
): ColorPalette = ObservableColorPalette(
    primary,
    primaryVariant,
    secondary,
    secondaryVariant,
    background,
    surface,
    error,
    onPrimary,
    onSecondary,
    onBackground,
    onSurface,
    onError,
    true
)

darkColorPalette

/**
 * Creates a complete color definition for the
 * [Material color specification](https://material.io/design/color/the-color-system.html#color-theme-creation)
 * using the default dark theme values.
 *
 * @see lightColorPalette
 */
fun darkColorPalette(
    primary: Color = Color(0xFFBB86FC),
    primaryVariant: Color = Color(0xFF3700B3),
    secondary: Color = Color(0xFF03DAC6),
    background: Color = Color(0xFF121212),
    surface: Color = Color(0xFF121212),
    error: Color = Color(0xFFCF6679),
    onPrimary: Color = Color.Black,
    onSecondary: Color = Color.Black,
    onBackground: Color = Color.White,
    onSurface: Color = Color.White,
    onError: Color = Color.Black
): ColorPalette = ObservableColorPalette(
    primary,
    primaryVariant,
    secondary,
    // Secondary and secondary variant are the same in dark mode, as contrast should be
    // higher so there is no need for the variant.
    secondary,
    background,
    surface,
    error,
    onPrimary,
    onSecondary,
    onBackground,
    onSurface,
    onError,
    false
)

Flutterでは?

ThemeData({Brightness brightness, 
VisualDensity visualDensity, 
MaterialColor primarySwatch, 
Color primaryColor, 
Brightness primaryColorBrightness, 
Color primaryColorLight, 
Color primaryColorDark, 
Color accentColor, 
Brightness accentColorBrightness, 
Color canvasColor, 
Color scaffoldBackgroundColor, 
Color bottomAppBarColor, 
Color cardColor, 
Color dividerColor,
 Color focusColor, 
Color hoverColor, 
Color highlightColor, 
Color splashColor, 
InteractiveInkFeatureFactory splashFactory, 
Color selectedRowColor, 
Color unselectedWidgetColor,
 Color disabledColor, 
Color buttonColor, 
ButtonThemeData buttonTheme, 
ToggleButtonsThemeData toggleButtonsTheme, 
Color secondaryHeaderColor, 
Color textSelectionColor, 
Color cursorColor, 
Color textSelectionHandleColor, 
Color backgroundColor, 
Color dialogBackgroundColor, 
Color indicatorColor, 
Color hintColor,
 Color errorColor, 
Color toggleableActiveColor,
 String fontFamily,
 TextTheme textTheme, 
TextTheme primaryTextTheme, 
TextTheme accentTextTheme, 
InputDecorationTheme inputDecorationTheme,
 IconThemeData iconTheme, 
IconThemeData primaryIconTheme, 
IconThemeData accentIconTheme,
 SliderThemeData sliderTheme, 
TabBarTheme tabBarTheme, TooltipThemeData tooltipTheme, CardTheme cardTheme, ChipThemeData chipTheme, TargetPlatform platform, MaterialTapTargetSize materialTapTargetSize, bool applyElevationOverlayColor, PageTransitionsTheme pageTransitionsTheme, AppBarTheme appBarTheme, BottomAppBarTheme bottomAppBarTheme, ColorScheme colorScheme, DialogTheme dialogTheme, FloatingActionButtonThemeData floatingActionButtonTheme, NavigationRailThemeData navigationRailTheme, Typography typography, CupertinoThemeData cupertinoOverrideTheme, SnackBarThemeData snackBarTheme, BottomSheetThemeData bottomSheetTheme, PopupMenuThemeData popupMenuTheme, MaterialBannerThemeData bannerTheme, DividerThemeData dividerTheme, ButtonBarThemeData buttonBarTheme})

HomeScreenを分析する。

  • HomeScreenのComposable関数はFlutterでよく見るScaffoldがある。
@Composable
fun HomeScreen(
    postsRepository: PostsRepository,
    scaffoldState: ScaffoldState = remember { ScaffoldState() }
) {
    Scaffold(
        scaffoldState = scaffoldState,
        drawerContent = {
            AppDrawer(
                currentScreen = Screen.Home,
                closeDrawer = { scaffoldState.drawerState = DrawerState.Closed }
            )
        },
        topAppBar = {
            TopAppBar(
                title = { Text(text = "Jetnews") },
                navigationIcon = {
                    IconButton(onClick = { scaffoldState.drawerState = DrawerState.Opened }) {
                        Icon(vectorResource(R.drawable.ic_jetnews_logo))
                    }
                }
            )
        },
        bodyContent = { modifier ->
            HomeScreenContent(postsRepository, modifier)
        }
    )
}

ComposeのScaffold

* Scaffoldはマテリアルデザインの基本レイアウトだと理解してもいい

  • Scaffold implements the basic material design visual layout structure. *
    • This component provides API to put together several material components to construct your
    • screen, by ensuring proper layout strategy for them and collecting necessary data so these
    • components will work together correctly.
@Composable
fun Scaffold(
    scaffoldState: ScaffoldState = remember { ScaffoldState() },
    topAppBar: @Composable (() -> Unit)? = null,
    bottomAppBar: @Composable ((FabConfiguration?) -> Unit)? = null,
    floatingActionButton: @Composable (() -> Unit)? = null,
    floatingActionButtonPosition: FabPosition = FabPosition.End,
    drawerContent: @Composable (() -> Unit)? = null,
    bodyContent: @Composable (Modifier) -> Unit
) {
    val child = @Composable {
        Surface(color = MaterialTheme.colors.background) {
            Column(Modifier.fillMaxSize()) {
                if (topAppBar != null) {
                    ScaffoldSlot(Modifier.zIndex(TopAppBarZIndex), topAppBar)
                }
                Stack(Modifier.weight(1f, fill = true)) {
                    ScaffoldContent(Modifier.fillMaxSize(), scaffoldState, bodyContent)
                    ScaffoldBottom(
                        Modifier.gravity(Alignment.BottomCenter),
                        scaffoldState = scaffoldState,
                        fabPos = floatingActionButtonPosition,
                        fab = floatingActionButton,
                        bottomBar = bottomAppBar
                    )
                }
            }
        }
    }

    if (drawerContent != null) {
        ModalDrawerLayout(
            drawerState = scaffoldState.drawerState,
            onStateChange = { scaffoldState.drawerState = it },
            gesturesEnabled = scaffoldState.isDrawerGesturesEnabled,
            drawerContent = { ScaffoldSlot(content = drawerContent) },
            bodyContent = child
        )
    } else {
        child()
    }
}

FlutterのScaffold

image.png

お互い比べてみる。

Scaffoldはこんな感じ。

  • Jetpack Compose <--> Flutter
  • topAppBar == appBar
  • drawerContent == drawer
  • bodyContent == body
  • bottomAppBar == bottomNavigationBar
  • floatingActionButtonPosition == floatingActionButtonLocation

drawerContentのAppDrawer

AppDrawerはなに?

  • AppDrawerはComposable関数です。
  • ColumnはFlutterと同じ
  • Modifierについては後でみなす。
  • SpacerはFlutterのSpacerの同じな感じ
  • DividerはFlutterのSpacerの同じな感じ
@Composable
fun AppDrawer(
    currentScreen: Screen,
    closeDrawer: () -> Unit
) {
    Column(modifier = Modifier.fillMaxSize()) {
        Spacer(Modifier.preferredHeight(24.dp))
        JetNewsLogo(Modifier.padding(16.dp))
        Divider(color = MaterialTheme.colors.onSurface.copy(alpha = .2f))
        DrawerButton(
            icon = Icons.Filled.Home,
            label = "Home",
            isSelected = currentScreen == Screen.Home,
            action = {
                navigateTo(Screen.Home)
                closeDrawer()
            }
        )

        DrawerButton(
            icon = Icons.Filled.ListAlt,
            label = "Interests",
            isSelected = currentScreen == Screen.Interests,
            action = {
                navigateTo(Screen.Interests)
                closeDrawer()
            }
        )
    }
}

image.png

ComposeのDivider

/**
 * A divider is a thin line that groups content in lists and layouts
 *
 * @param color color of the divider line
 * @param thickness thickness of the divider line, 1 dp is used by default
 * @param startIndent start offset of this line, no offset by default
 */
@Composable
fun Divider(
    modifier: Modifier = Modifier,
    color: Color = MaterialTheme.colors.onSurface.copy(alpha = DividerAlpha),
    thickness: Dp = 1.dp,
    startIndent: Dp = 0.dp
) {
    val indentMod = if (startIndent.value != 0f) {
        Modifier.padding(start = startIndent)
    } else {
        Modifier
    }
    Box(modifier.plus(indentMod).fillMaxWidth().preferredHeight(thickness).drawBackground(color))
}

private const val DividerAlpha = 0.12f


FlutterのDivider

//A thin horizontal line, with padding on either side.

//In the material design language, this represents a divider. Dividers can be used in lists, Drawers, and elsewhere to separate content.

//To create a divider between ListTile items, consider using ListTile.divideTiles, which is optimized for this case.

//The box's total height is controlled by height. The appropriate padding is automatically computed from the height.


const Divider({
  Key key,
  this.height,
  this.thickness,
  this.indent,
  this.endIndent,
  this.color,
}) : assert(height == null || height >= 0.0),
     assert(thickness == null || thickness >= 0.0),
     assert(indent == null || indent >= 0.0),
     assert(endIndent == null || endIndent >= 0.0),
     super(key: key);

終わりに

今回はここまでメモします。
次はDrawerButtonとtopAppBarについて、
つづく。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む