最後幾天我們學習一下不同的新東西順便運用之前學過的一些元件(可以順帶複習)，不算特別困難但必較多所以分篇，且順帶恭喜我發到28天(❁'◡'❁)

我這次會使用到之前學到的SharedPreferences、Dialog、Intent等，還有一個新東西 Cardview，Cardview像是一個卡片介面，上面能有圖片(ImageView)、文字(TextView)等，很像我們常看到新聞上方是圖片下方為標題。

最後的APP

新增

我們這次會新增以下圖片的這些

• 運用Package 分類，才不會在之後新增太多找不到喔!
  
  新增整理完，我們先將.xml都先用好。

.xml(drawable、layout、values)

activity_main.xml

• 設計的介面會長這樣
  

• 這邊用LinearLayout進行設計布局，裡面程式碼大多都在之前介紹過了所以這裡就不加多述。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:id="@+id/main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".main.MainActivity"
    android:orientation="vertical"
    android:gravity="center|top">

    <androidx.recyclerview.widget.RecyclerView
        android:paddingTop="10sp"
        android:background="@drawable/border"
        android:id="@+id/main_list_rl"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="0.6"
        android:paddingHorizontal="30sp"
        android:paddingBottom="10dp"
        tools:listitem="@layout/recycleritem_cardview"/>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="0.04"
        android:orientation="horizontal">

        <TextView
            android:id="@+id/main_link_tv"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="@string/GoogleLink"
            android:gravity="center"
            android:textStyle="bold"
            android:textColor="#7846B0"
            android:textSize="18dp"/>

        <TextView
            android:id="@+id/main_play_tv"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="點擊小遊戲"
            android:gravity="center"
            android:textStyle="bold"
            android:textColor="#B0468E"
            android:textSize="18dp"/>
            tools:srcCompat="@drawable/img" />

    </LinearLayout>

    <Button
        android:id="@+id/main_edit_btn"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="0.07"
        android:textColor="@color/black"
        android:textSize="40sp"
        android:background="@drawable/btn_shape"
        app:backgroundTint="@null"
        android:text="輸入" />

</LinearLayout>

border.xml

• 這是之前TextView框線那天有講過，不太明白的可以去看看
  

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape>
            <stroke
                android:color="#A328D3"
                android:width="3.5dp"/>
            <corners
                android:radius="3dp"/>
            <padding
                android:left="15sp"
                android:right="15sp"/>
        </shape>
    </item>
</selector>

btn_shape.xml

• 有看過之前自訂義Button那篇就不會陌生，不太了解的可以回去看看
  

<?xml version="1.0" encoding="utf-8"?>
<!--shape提供四種基礎形狀:rectangle,oval,line,ring-->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <!--corners(產生圓角用)-->
    <corners
        android:radius="3dp"
        />

    <!--gradient(漸層顏色)-->
    <gradient
        android:angle="45"
        android:centerX="90%"
        android:startColor="#7EB0C5"
        android:endColor="#B0A2C0"
        android:type="linear"
        />

    <!--padding(內邊距)-->
    <padding
        android:left="2dp"
        android:top="2dp"
        android:right="2dp"
        android:bottom="2dp"
        />

    <!--size(大小)-->
    <size
        android:width="250dp"
        android:height="50dp"
        />
</shape>

recycleritem_cardview.xml

我這邊用的CardView很簡單，只需要顯示文字部分的TextView而已，想要更多元的可以自行加。

• 設計的畫面
  

(完整程式碼)

<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_margin="5dp"
    app:cardCornerRadius="30dp"
    app:cardBackgroundColor="#CDF3EF"
    app:cardElevation="10dp"
    app:contentPadding="10sp"
    android:layout_marginTop="20dp"
    android:layout_gravity="center_horizontal">

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


        <TextView
            android:id="@+id/rl_msg_tv"
            android:layout_width="match_parent"
            android:layout_height="150dp"
            android:text="TextView"
            android:gravity="center"
            android:textStyle="bold"
            android:textColor="@color/black"
            android:textSize="25sp" />
    </LinearLayout>
</androidx.cardview.widget.CardView>

activity_play.xml

因為我這個最後的APP中，有設計一個特別簡單的點擊小遊戲，因此這個就是用來設計小遊戲介面。

• 一樣用LinearLayout去佈局設計
  

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="0.04"
        android:orientation="horizontal">

        <TextView
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="點擊小遊戲"
            android:gravity="center_vertical"
            android:textSize="24sp"
            android:textColor="#2C1256" />

        <TextView
            android:id="@+id/play_timer_tv"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:gravity="center|bottom"
            android:layout_weight="1"
            android:text="30"
            android:textColor="#C83B3B"
            android:textSize="30sp" />

    </LinearLayout>

    <TextView
        android:id="@+id/play_clickCount_tv"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="0.1"
        android:text="0"
        android:textSize="48sp"
        android:gravity="center" />

    <TextView
        android:id="@+id/play_clickArea_tv"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="0.2"
        android:layout_margin="16dp"
        android:gravity="center"
        android:hint="點擊區域"
        android:background="@drawable/border"
        android:textSize="36sp" />

    <Button
        android:id="@+id/play_restart_btn"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="0.03"
        android:layout_margin="16dp"
        android:textSize="24sp"
        android:text="重新遊戲"
        android:visibility="gone"
        android:background="@drawable/btn_shape"
        app:backgroundTint="@null" />

    <Button
        android:id="@+id/play_back_btn"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="0.03"
        android:layout_margin="16dp"
        android:textSize="24sp"
        android:background="@drawable/btn_shape"
        app:backgroundTint="@null"
        android:text="返回" />

</LinearLayout>

strings.xml

用到它是因為CardView顯示文字、連結。

• 顯示文字部分用string-array，連結用string

<resources>
    <string name="app_name">Test</string>

    <string name="GoogleLink"><a href="https://translate.google.com/">Google翻譯</a></string>

    <string-array name="msg">
        <item>joy(樂趣)</item>
        <item>firework(煙火)</item>
        <item>overtime(加班)</item>
        <item>solve(解決)</item>
        <item>issue(議題)</item>
        <item>goodwill(善意)</item>
        <item>engineer(工程師)</item>
        <item>lifeguard(救生員)</item>
        <item>intern(實習生)</item>
        <item>stock(存貨)</item>
    </string-array>
</resources>

以上是我上篇內容，中篇會講到CardView、MainActivity與SharedPreferences部分，最終篇為小遊戲、執行畫面和一些感想(?