接下來幾篇我想要做一個將之前的元件整合,做出一個簡易的氣象資訊系統。利用之前所學的元件,以及一些自己的想法,抓取中央氣象局的平台資料,下面就讓我們開始實作。
我將系統分為幾個部分,分別為:
今天這一篇我們就先來做登入頁面及註冊頁面。
首先我們需要拉元件:一個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>
基本上介面的部分就到這裡完成了,下一篇我們來實作按鈕之間的功能~~