iT邦幫忙

2022 iThome 鐵人賽

DAY 14
0

開頭

有沒有熬夜工作後還要寫鐵人賽的八卦,昨晚只睡二小時,好想睡覺
我們在第五天已經把筆記頁和設定頁的檔案建立完成
今天來畫筆記頁顯示的部份

顏色

為了方便上色,先提供色碼表
位置在 res / values / colors.xml 裡面

十六進位值色碼

    <color name="hexColor001_DimGray">#696969</color>
    <color name="hexColor002_Gray">#808080</color>
    <color name="hexColor003_DarkGray">#a9a9a9</color>
    <color name="hexColor004_Silver">#c0c0c0</color>
    <color name="hexColor005_LightGrey">#d3d3d3</color>
    <color name="hexColor006_Gainsboro">#dcdcdc</color>
    <color name="hexColor007_White">#ffffff</color>
    <color name="hexColor008_Snow">#fffafa</color>
    <color name="hexColor009_GhostWhite">#f8f8ff</color>
    <color name="hexColor010_WhiteSmoke">#f5f5f5</color>
    <color name="hexColor011_FloralWhite">#fffaf0</color>
    <color name="hexColor012_Linen">#faf0e6</color>
    <color name="hexColor013_AntiqueWhite">#faebd7</color>
    <color name="hexColor014_PapayaWhip">#ffefd5</color>
    <color name="hexColor015_BlanchedAlmond">#ffebcd</color>
    <color name="hexColor016_Bisque">#ffe4c4</color>
    <color name="hexColor017_Moccasin">#ffe4b5</color>
    <color name="hexColor018_NavajoWhite">#ffdead</color>
    <color name="hexColor019_PeachPuff">#ffdab9</color>
    <color name="hexColor020_MistyRose">#ffe4e1</color>
    <color name="hexColor021_LavenderBlush">#fff0f5</color>
    <color name="hexColor022_Seashell">#fff5ee</color>
    <color name="hexColor023_OldLace">#fdf5e6</color>
    <color name="hexColor024_Ivory">#fffff0</color>
    <color name="hexColor025_Honeydew">#f0fff0</color>
    <color name="hexColor026_MintCream">#f5fffa</color>
    <color name="hexColor027_Azure">#f0ffff</color>
    <color name="hexColor028_AliceBlue">#f0f8ff</color>
    <color name="hexColor029_Lavender">#e6e6fa</color>
    <color name="hexColor030_LightSlateGray">#778899</color>
    <color name="hexColor031_SlateGray">#708090</color>
    <color name="hexColor032_DarkSlateGray">#2f4f4f</color>
    <color name="hexColor033_LightSteelBlue">#b0c4de</color>
    <color name="hexColor034_SteelBlue">#4682b4</color>
    <color name="hexColor035_RoyalBlue">#4169e1</color>
    <color name="hexColor036_MidnightBlue">#191970</color>
    <color name="hexColor037_Navy">#000080</color>
    <color name="hexColor038_DarkBlue">#00008b</color>
    <color name="hexColor039_MediumBlue">#0000cd</color>
    <color name="hexColor040_Blue">#0000ff</color>
    <color name="hexColor041_DodgerBlue">#1e90ff</color>
    <color name="hexColor042_CornflowerBlue">#6495ed</color>
    <color name="hexColor043_DeepSkyBlue">#00bfff</color>
    <color name="hexColor044_LightSkyBlue">#87cefa</color>
    <color name="hexColor045_SkyBlue">#87ceeb</color>
    <color name="hexColor046_LightBlue">#add8e6</color>
    <color name="hexColor047_PowderBlue">#b0e0e6</color>
    <color name="hexColor048_PaleTurquoise">#afeeee</color>
    <color name="hexColor049_LightCyan">#e0ffff</color>
    <color name="hexColor050_Cyan">#00ffff</color>
    <color name="hexColor051_Aqua">#00ffff</color>
    <color name="hexColor052_Turquoise">#40e0d0</color>
    <color name="hexColor053_MediumTurquoise">#48d1cc</color>
    <color name="hexColor054_DarkTurquoise">#00ced1</color>
    <color name="hexColor055_LightSeaGreen">#20b2aa</color>
    <color name="hexColor056_CadetBlue">#5f9ea0</color>
    <color name="hexColor057_DarkCyan">#008b8b</color>
    <color name="hexColor058_Teal">#008080</color>
    <color name="hexColor059_SeaGreen">#2e8b57</color>
    <color name="hexColor060_DarkOliveGreen">#556b2f</color>
    <color name="hexColor061_DarkGreen">#006400</color>
    <color name="hexColor062_Green">#008000</color>
    <color name="hexColor063_ForestGreen">#228b22</color>
    <color name="hexColor064_MediumSeaGreen">#3cb371</color>
    <color name="hexColor065_DarkSeaGreen">#8fbc8f</color>
    <color name="hexColor066_MediumAquamarine">#66cdaa</color>
    <color name="hexColor067_Aquamarine">#7fffd4</color>
    <color name="hexColor068_PaleGreen">#98fb98</color>
    <color name="hexColor069_LightGreen">#90ee90</color>
    <color name="hexColor070_springGreen">#00ff7f</color>
    <color name="hexColor071_MediumSpringGreen">#00fa9a</color>
    <color name="hexColor072_LawnGreen">#7cfc00</color>
    <color name="hexColor073_Chartreuse">#7fff00</color>
    <color name="hexColor074_GreenYellow">#adff2f</color>
    <color name="hexColor075_Lime">#00ff00</color>
    <color name="hexColor076_LimeGreen">#32cd32</color>
    <color name="hexColor077_YellowGreen">#9acd32</color>
    <color name="hexColor078_OliveDrab">#6b8e23</color>
    <color name="hexColor079_Olive">#808000</color>
    <color name="hexColor080_DarkKhaki">#bdb76b</color>
    <color name="hexColor081_PaleGoldenrod">#eee8aa</color>
    <color name="hexColor082_CornSilk">#fff8dc</color>
    <color name="hexColor083_Beige">#f5f5dc</color>
    <color name="hexColor084_LightYellow">#ffffe0</color>
    <color name="hexColor085_LightGoldenrodYellow">#fafad2</color>
    <color name="hexColor086_LemonChiffon">#fffacd</color>
    <color name="hexColor087_Wheat">#f5deb3</color>
    <color name="hexColor088_BurlyWood">#deb887</color>
    <color name="hexColor089_Tan">#d2b48c</color>
    <color name="hexColor090_Khaki">#f0e68c</color>
    <color name="hexColor091_Yellow">#ffff00</color>
    <color name="hexColor092_Gold">#ffd700</color>
    <color name="hexColor093_Orange">#ffa500</color>
    <color name="hexColor094_SandyBrown">#f4a460</color>
    <color name="hexColor095_DarkOrange">#ff8c00</color>
    <color name="hexColor096_Goldenrod">#daa520</color>
    <color name="hexColor097_Peru">#cd853f</color>
    <color name="hexColor098_DarkGoldenrod">#b8860b</color>
    <color name="hexColor099_Chocolate">#d2691e</color>
    <color name="hexColor100_Sienna">#a0522d</color>
    <color name="hexColor101_SaddleBrown">#8b4513</color>
    <color name="hexColor102_Maroon">#800000</color>
    <color name="hexColor103_DarkRed">#8b0000</color>
    <color name="hexColor104_Brown">#a52a2a</color>
    <color name="hexColor105_Firebrick">#b22222</color>
    <color name="hexColor106_IndianRed">#cd5c5c</color>
    <color name="hexColor107_RosyBrown">#bc8f8f</color>
    <color name="hexColor108_DarkSalmon">#e9967a</color>
    <color name="hexColor109_LightCoral">#f08080</color>
    <color name="hexColor110_Salmon">#fa8072</color>
    <color name="hexColor111_LightSalmon">#ffa07a</color>
    <color name="hexColor112_Coral">#ff7f50</color>
    <color name="hexColor113_Tomato">#ff6347</color>
    <color name="hexColor114_OrangeRed">#ff4500</color>
    <color name="hexColor115_Red">#ff0000</color>
    <color name="hexColor116_Crimson">#dc143c</color>
    <color name="hexColor117_MediumVioletRed">#c71585</color>
    <color name="hexColor118_DeepPink">#ff1493</color>
    <color name="hexColor119_HotPink">#ff69b4</color>
    <color name="hexColor120_PaleVioletRed">#db7093</color>
    <color name="hexColor121_Pink">#ffc0cb</color>
    <color name="hexColor122_LightPink">#ffb6c1</color>
    <color name="hexColor123_Thistle">#d8bfd8</color>
    <color name="hexColor124_Magenta">#ff00ff</color>
    <color name="hexColor125_Violet">#ee82ee</color>
    <color name="hexColor126_Plum">#dda0dd</color>
    <color name="hexColor127_Orchid">#da70d6</color>
    <color name="hexColor128_MediumOrchid">#ba55d3</color>
    <color name="hexColor129_DarkOrchid">#9932cc</color>
    <color name="hexColor130_DarkViolet">#9400d3</color>
    <color name="hexColor131_DarkMagenta">#8b008b</color>
    <color name="hexColor132_Purple">#800080</color>
    <color name="hexColor133_Indigo">#4b0082</color>
    <color name="hexColor134_DarkSlateBlue">#483d8b</color>
    <color name="hexColor135_BlueViolet">#8a2be2</color>
    <color name="hexColor136_MediumPurple">#9370db</color>
    <color name="hexColor137_SlateBlue">#6a5acd</color>
    <color name="hexColor138_MediumSlateBlue">#7b68ee</color>

Metro 色碼

    <color name="metroColor001_252525">#252525</color>
    <color name="metroColor002_f4b300">#f4b300</color>
    <color name="metroColor003_78ba00">#78ba00</color>
    <color name="metroColor004_2673ec">#2673ec</color>
    <color name="metroColor005_ae113d">#ae113d</color>
    <color name="metroColor006_632f00">#632f00</color>
    <color name="metroColor007_2e1700">#2e1700</color>
    <color name="metroColor008_b01e00">#b01e00</color>
    <color name="metroColor009_4e0000">#4e0000</color>
    <color name="metroColor010_4e0038">#4e0038</color>
    <color name="metroColor011_c1004f">#c1004f</color>
    <color name="metroColor012_7200ac">#7200ac</color>
    <color name="metroColor013_2d004e">#2d004e</color>
    <color name="metroColor014_4617b4">#4617b4</color>
    <color name="metroColor015_1f0068">#1f0068</color>
    <color name="metroColor016_006ac1">#006ac1</color>
    <color name="metroColor017_001e4e">#001e4e</color>
    <color name="metroColor018_008287">#008287</color>
    <color name="metroColor019_004d60">#004d60</color>
    <color name="metroColor020_199900">#199900</color>
    <color name="metroColor021_004a00">#004a00</color>
    <color name="metroColor022_00c13f">#00c13f</color>
    <color name="metroColor023_15992a">#15992a</color>
    <color name="metroColor024_ff981d">#ff981d</color>
    <color name="metroColor025_e56c19">#e56c19</color>
    <color name="metroColor026_ff2e12">#ff2e12</color>
    <color name="metroColor027_b81b1b">#b81b1b</color>
    <color name="metroColor028_ff1d77">#ff1d77</color>
    <color name="metroColor029_b81b6c">#b81b6c</color>
    <color name="metroColor030_aa40ff">#aa40ff</color>
    <color name="metroColor031_691bb8">#691bb8</color>
    <color name="metroColor032_1faeff">#1faeff</color>
    <color name="metroColor033_1b58b8">#1b58b8</color>
    <color name="metroColor034_56c5ff">#56c5ff</color>
    <color name="metroColor035_569ce3">#569ce3</color>
    <color name="metroColor036_00d8cc">#00d8cc</color>
    <color name="metroColor037_00aaaa">#00aaaa</color>
    <color name="metroColor038_91d100">#91d100</color>
    <color name="metroColor039_83ba51">#83ba51</color>
    <color name="metroColor040_e1b700">#e1b700</color>
    <color name="metroColor041_d39d09">#d39d09</color>
    <color name="metroColor042_ff76bc">#ff76bc</color>
    <color name="metroColor043_e064b7">#e064b7</color>
    <color name="metroColor044_00a4a4">#00a4a4</color>
    <color name="metroColor045_ff7d23">#ff7d23</color>
    <color name="metroColor046_696969">#696969</color>

頁面 Xml

<androidx.coordinatorlayout.widget.CoordinatorLayout 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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".NoteFragment">

    <com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:contentScrim="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed">

            <!--滑動消失區-->

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

                <androidx.appcompat.widget.Toolbar
                    android:id="@+id/toolbar"
                    android:layout_width="0dp"
                    android:layout_height="56dp"
                    android:background="@color/hexColor035_RoyalBlue"
                    app:layout_constraintBottom_toBottomOf="parent"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintHorizontal_bias="0.0"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toTopOf="parent"
                    app:layout_constraintVertical_bias="0.0" />

                <Button
                    android:id="@+id/setting"
                    android:layout_width="wrap_content"
                    android:layout_height="0dp"
                    android:layout_margin="8dp"
                    android:insetTop="0dp"
                    android:insetBottom="0dp"
                    android:text="@string/setting"
                    app:icon="@drawable/ic_baseline_settings_24"
                    app:layout_constraintBottom_toBottomOf="@+id/toolbar"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintHorizontal_bias="0.0"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toTopOf="parent" />

                <Button
                    android:id="@+id/upload"
                    android:layout_width="wrap_content"
                    android:layout_height="0dp"
                    android:layout_margin="8dp"
                    android:insetTop="0dp"
                    android:insetBottom="0dp"
                    android:text="@string/upload"
                    app:icon="@drawable/ic_baseline_cloud_upload_24"
                    app:layout_constraintBottom_toBottomOf="@+id/toolbar"
                    app:layout_constraintEnd_toStartOf="@+id/download"
                    app:layout_constraintHorizontal_bias="1.0"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toTopOf="parent" />

                <Button
                    android:id="@+id/download"
                    android:layout_width="wrap_content"
                    android:layout_height="0dp"
                    android:layout_margin="8dp"
                    android:insetTop="0dp"
                    android:insetBottom="0dp"
                    android:text="@string/download"
                    app:icon="@drawable/ic_baseline_cloud_download_24"
                    app:layout_constraintBottom_toBottomOf="@+id/toolbar"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintHorizontal_bias="1.0"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toTopOf="parent" />

            </androidx.constraintlayout.widget.ConstraintLayout>
        </com.google.android.material.appbar.CollapsingToolbarLayout>

        <!--固定顯示區-->

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:orientation="vertical">

        </LinearLayout>
    </com.google.android.material.appbar.AppBarLayout>

    <androidx.core.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fillViewport="true"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <!--上下卷動區-->

        <EditText
            android:id="@+id/editText"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:autofillHints=""
            android:background="@color/hexColor085_LightGoldenrodYellow"
            android:gravity="top"
            android:inputType="textMultiLine"
            android:padding="8dp"
            android:text="臣亮言:先帝創業未半,而中道崩殂。今天下三分,益州疲敝,此誠危急存亡之秋也!然侍衞之臣,不懈於內;忠志之士,忘身於外者,蓋追先帝之殊遇,欲報之於陛下也。誠宜開張聖聽,以光先帝遺德,恢弘志士之氣;不宜妄自菲薄,引喻失義,以塞忠諫之路也。"
            android:textColor="@color/metroColor001_252525"
            app:layout_constraintTop_toBottomOf="@+id/toolbar"
            tools:ignore="LabelFor" />

    </androidx.core.widget.NestedScrollView>
</androidx.coordinatorlayout.widget.CoordinatorLayout>

實際畫面

https://ithelp.ithome.com.tw/upload/images/20220929/20124384gDjuvT1TQ5.jpg

昨天寫到睡著,今天補完


上一篇
111/13 - Kotlin(2/2) - 迴圈
下一篇
111/15 - 資料綁定(1/2) - ViewModel、Layout 改寫
系列文
聽說 HackMD 開放 API 串接,那麼用 Kotlin 寫個筆記 App 吧!30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言