Android開發之簡單登入介面

摘要： 使用者介面基礎 Android系統的四大元件分別是活動(Activity)、服務(Service)、廣播接收器(Broadcast Receiver)、內容提供器(Content Provider)。 其中，活動算是一個程式的門面，活動通過onCreate()方法來對使用者介面(...

使用者介面基礎

• Android系統的四大元件分別是活動(Activity)、服務(Service)、廣播接收器(Broadcast Receiver)、內容提供器(Content Provider)。

  其中，活動算是一個程式的門面，活動通過onCreate()方法來對使用者介面(UI)進行初始化。而使用者介面的建立則分為靜態和動態兩種方式：

1. 靜態方式即以XML佈局檔案來定義使用者介面，通過XML佈局檔案中的相關屬性進行控制，我將使用這種方式來實現簡單的登入介面。
2. 動態方式是指通過Java程式碼來開發使用者介面，動態地控制介面中的元件。我沒有嘗試過這種開發方式。

• Android專案工程的結構：

  

  Android專案工程結構

• 補充：

1. 其中java資料夾下儲存有主活動檔案MainActivty.java。
2. layout資料夾下儲存有佈局檔案activity_main.xml。

簡單登入介面的實現

• 準備完成的功能：

1. 介面包含兩個編輯框，一個用於輸入使用者名稱；一個用於輸入密碼。
2. 點選登入按鈕，若使用者名稱和密碼均和點選登入按鈕方法中定義的相同，則顯示登入成功的提示框，若不同，則提示登入失敗。

• 按照要求，實現兩個輸入框，這裡我們就需要在XML檔案中進行佈局，使用EditText控制元件進行設定。

  XML佈局程式碼如下：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_height="match_parent"
android:layout_width="match_parent">

<TextView
android:id="@+id/edit_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="使用者登入介面"
android:textAlignment="center"
android:textSize="24sp" />

<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="使用者名稱"
android:textAlignment="center"
android:textSize="24sp" />

<EditText
android:id="@+id/username"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="請輸入您的使用者名稱"/>

<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="密碼"
android:textAlignment="center"
android:textSize="24sp" />

<EditText
android:id="@+id/password"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="請輸入您的密碼"/>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_height="match_parent"
android:layout_width="match_parent">

<Button
android:id="@+id/login"
android:layout_height="60dp"
android:layout_width="wrap_content"
android:text="登入"
android:layout_gravity="center"
android:textAlignment="center"
android:textSize="18sp" />

</LinearLayout>


</LinearLayout>

• 效果如下：

  

  登入介面

• 補充：

1. LinearLayout代表當前佈局方式為線性佈局。
2. TextView為顯示字串的控制元件，例如介面上的“使用者登入介面”、“使用者名稱”、“密碼”就是用TextView實現的。
3. Button為按鈕控制元件，即為使用者介面新增一個可供點選的按鈕，並可在主活動中新增相應的方法實現點選按鈕後要進行的操作。

• 接下來我們開始編寫活動頁面的程式碼，完成點選按鈕後的匹配使用者名稱和密碼的操作。

1. 為獲取到的Button物件繫結一個監聽器button.setOnClickListener()。
2. 使用介面方式實現監聽事件。
3. 最後在onClick()方法中實現監聽事件要實現的邏輯即可。
   程式碼如下：

public class MainActivity extends AppCompatActivity implements View.OnClickListener{
Button button;
EditText username;
EditText password;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

button = (Button)findViewById(R.id.login);
username = (EditText)findViewById(R.id.username);
password = (EditText)findViewById(R.id.password);
button.setOnClickListener(this);
}

@Override
public void onClick(View v) {
String username1 = username.getText().toString();
String password1 = password.getText().toString();
String ok = "登入成功";
String fail = "登入失敗";
if (username1.equals("lhk") && password1.equals("123456")) {
Toast.makeText(MainActivity.this,ok,Toast.LENGTH_SHORT).show();
}else {
Toast.makeText(MainActivity.this,fail,Toast.LENGTH_SHORT).show();
}

}
}

• 登陸成功效果如下：

  

  登陸成功

• 登入失敗效果如下：

  

  登入失敗

Github地址

• 活動頁面程式碼 ofollow,noindex">https://github.com/0xmxhnc/LoginTestDemo/blob/master/app/src/main/java/com/example/test/MainActivity.java
• 佈局頁面程式碼 https://github.com/0xmxhnc/LoginTestDemo/blob/master/app/src/main/res/layout/activity_main.xml