- 投稿日:2020-06-23T21:16:58+09:00
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>これで設定は完了です。
実行結果
思った20倍それっぽくなりました笑
予約投稿:2020-06-23
- 投稿日:2020-06-23T21:11:08+09:00
[Modern Android] Jetpack Compose その3
JetNewsのサンプルコード見ながら、
Jetpack Composeについて、理解や分析のメモです。
Flutterと似ているので、比べてながらメモします。Theme
- theme PackageのTheme.ktを見るとこんな感じ。
- lightColorPaletteとdarkColorPaletteの関数はなんだろう?
- https://material.io/design/color/the-color-system.html#color-theme-creation
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というのがあります。
- https://api.flutter.dev/flutter/material/ThemeData-class.html
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
お互い比べてみる。
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() } ) } }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.12fFlutterの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について、
つづく。