【DAY 25】元件整合實作:製作一個簡易的氣象資訊系統-1-登入頁面及註冊頁面

2023 iThome 鐵人賽

DAY 25

Mobile Development

Android Studio開發系列第 25 篇

【DAY 25】元件整合實作:製作一個簡易的氣象資訊系統-1-登入頁面及註冊頁面

15th鐵人賽

jeff98115

團隊nutc_imac_function

2023-10-05 13:50:33

200 瀏覽

分享至

接下來幾篇我想要做一個將之前的元件整合，做出一個簡易的氣象資訊系統。利用之前所學的元件，以及一些自己的想法，抓取中央氣象局的平台資料，下面就讓我們開始實作。

我將系統分為幾個部分，分別為:

系統登入介面
系統註冊介面
系統主介面
登入與註冊系統的SharedPreferences
抓取各縣市氣溫資料頁面
抓取各地區氣候資料頁面

今天這一篇我們就先來做登入頁面及註冊頁面。

首先我們需要拉元件:一個textview、兩個edittext分別用來輸入帳號與密碼、三個button作登入註冊等等，其中也可以設計一些先前介紹過的客製化元件方式，讓元件樣式更加美觀。

完成後大致像這樣:
這裡先把介面的程式碼放上來。
activity_login.xml:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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=".login">

    <Button
        android:id="@+id/button"
        android:layout_width="210dp"
        android:layout_height="46dp"
        android:background="@drawable/bluebtn"
        android:text="清空"
        android:textStyle="bold"
        android:textSize="20dp"
        android:textColor="@color/white"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.498"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.659" />

    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="登入"
        android:textSize="20dp"
        android:textStyle="bold"
        android:textColor="@color/white"
        android:background="@drawable/greenbtn"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.309"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.535" />

    <Button
        android:id="@+id/button4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="重新註冊"
        android:textStyle="bold"
        android:textSize="18dp"
        android:textColor="@color/white"
        android:background="@drawable/orangebtn"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.687"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.536" />

    <EditText
        android:id="@+id/editTextTextEmailAddress"
        android:layout_width="210dp"
        android:layout_height="50dp"
        android:background="@drawable/linestyle"
        android:ems="10"
        android:hint="帳號:"
        android:paddingLeft="10sp"
        android:inputType="textEmailAddress"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.497"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.313" />

    <EditText
        android:id="@+id/editTextTextPassword"
        android:layout_width="210dp"
        android:layout_height="50dp"
        android:background="@drawable/linestyle"
        android:ems="10"
        android:hint="密碼:"
        android:paddingLeft="10sp"
        android:inputType="textPassword"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.497"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.415" />

    <TextView
        android:id="@+id/textView"
        android:layout_width="141dp"
        android:layout_height="64dp"
        android:text="氣象查詢系統"
        android:textStyle="bold"
        android:textColor="@color/teal_700"
        android:background="@drawable/linestyle"
        android:gravity="center"
        android:textSize="20dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.498"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.137" />

</androidx.constraintlayout.widget.ConstraintLayout>

接下來，我們來做註冊的部分，這裡我們要用到:一個checkbox、三個edittext、三個button。
其中，第一個輸入框用來輸入註冊的帳號，第二個輸入框用來輸入註冊的密碼，第三個輸入框用來再次輸入註冊的密碼。checkbox用來辨識是否為機器人。

完成後大致像這樣:
這裡同樣先把註冊介面的程式碼放上來。
activity_enroll.xml:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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=".enroll">

    <EditText
        android:id="@+id/editTextTextEmailAddress2"
        android:layout_width="210dp"
        android:layout_height="50dp"
        android:background="@drawable/linestyle"
        android:ems="10"
        android:hint="請輸入您的email"
        android:gravity="center"
        android:inputType="textEmailAddress"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.497"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.105" />

    <EditText
        android:id="@+id/editTextTextPassword2"
        android:layout_width="210dp"
        android:layout_height="50dp"
        android:background="@drawable/linestyle"
        android:ems="10"
        android:hint="請再次輸入您的密碼"
        android:gravity="center"
        android:inputType="textPassword"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.497"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.349" />

    <EditText
        android:id="@+id/editTextTextPassword4"
        android:layout_width="210dp"
        android:layout_height="50dp"
        android:background="@drawable/linestyle"
        android:ems="10"
        android:hint="請輸入您的密碼"
        android:gravity="center"
        android:inputType="textPassword"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.497"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.225" />

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="註冊完成"
        android:background="@drawable/orangebtn"
        android:textColor="@color/white"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.681"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.731" />

    <CheckBox
        android:id="@+id/checkBox"
        android:layout_width="130dp"
        android:layout_height="38dp"
        android:text="我不是機器人"
        android:background="@drawable/linestyle"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.495"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.596" />

    <Button
        android:id="@+id/button5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="取消註冊"
        android:textColor="@color/white"
        android:background="@drawable/bluebtn"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.315"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.733" />

    <Button
        android:id="@+id/button6"
        android:layout_width="96dp"
        android:layout_height="42dp"
        android:text="驗證密碼"
        android:textColor="@color/white"
        android:background="@drawable/orangebtn"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.498"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.45" />

</androidx.constraintlayout.widget.ConstraintLayout>

元件樣式的部分在這邊也順便放上來。一共有四種:
1.藍色按鈕:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:state_pressed="false">
        <shape
            android:shape="rectangle">
            <corners
                android:radius="10dip" />
            <stroke
                android:width="3dip"
                android:color="#FFFFFFFF" />
            <gradient
                android:angle="90"
                android:startColor="#FF7D7DFF"
                android:endColor="#FF28004D"  />
        </shape>
    </item>

    <item
        android:state_pressed="true">
        <shape
            android:shape="rectangle">
            <corners
                android:radius="10dip" />
            <stroke
                android:width="3dip"
                android:color="#FFFFFFFF" />
            <gradient
                android:angle="90"
                android:startColor="#FF28004D"
                android:endColor="#FF7D7DFF"  />
        </shape>
    </item>
</selector>

2.橙色按鈕:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:state_pressed="false">
        <shape
            android:shape="rectangle">
            <corners
                android:radius="10dip" />
            <stroke
                android:width="3dip"
                android:color="#FFFFFFFF" />
            <gradient
                android:angle="90"
                android:startColor="#FFFF8040"
                android:endColor="#FF844200"  />
        </shape>
    </item>

    <item
        android:state_pressed="true">
        <shape
            android:shape="rectangle">
            <corners
                android:radius="10dip" />
            <stroke
                android:width="3dip"
                android:color="#FFFFFFFF" />
            <gradient
                android:angle="90"
                android:startColor="#FF844200"
                android:endColor="#FFFF8040"  />
        </shape>
    </item>
</selector>

3.綠色按鈕:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:state_pressed="false">
        <shape
            android:shape="rectangle">
            <corners
                android:radius="10dip" />
            <stroke
                android:width="3dip"
                android:color="#FFFFFFFF" />
            <gradient
                android:angle="90"
                android:startColor="#FF009393"
                android:endColor="#FF003E3E"  />
        </shape>
    </item>

    <item
        android:state_pressed="true">
        <shape
            android:shape="rectangle">
            <corners
                android:radius="10dip" />
            <stroke
                android:width="3dip"
                android:color="#FFFFFFFF" />
            <gradient
                android:angle="90"
                android:startColor="#FF003E3E"
                android:endColor="#FF009393"  />
        </shape>
    </item>
</selector>

4.黑色框線:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape
            android:shape="rectangle">
            <corners
                android:radius="10dip" />
            <stroke
                android:width="3dip"
                android:color="#FF000000" />
        </shape>
    </item>
</selector>

基本上介面的部分就到這裡完成了，下一篇我們來實作按鈕之間的功能~~