來證明你會了吧,Atm專案之登入功能實務

By | 2017-06-03

Atm專案之登入功能

利用前面幾篇文章之所學,完成一個網路銀行的「Atm」專案,這個專案將成為之後文章的練習範例。

主畫面-MainActivity

一開始Atm專案有兩個Activity,一個為主畫面MainActivity,另一個為登入畫面LoginActivity,一開始設計的是功能主畫面。請新增一個專案(File/New/New Project),名稱為「Atm」,套件(package)名稱為「com.tom.atm」,使用空白Activity即可(Empty Activity),如下圖:

Step1  建立Atm專案

Step2  選擇Empty Activity

Step3  建立活動

建立完成後,請開啟「MainActivity」,在類別中加入一個布林值屬性「logon」,預設為false假值,在MainActivity的onCreate方法的最後,檢查使用者是否已經登入過,若未登入,則準備開啟LoginActivity,如下圖:

新增登入畫面-LoginActivity

在這個專案中,新增第二個活動,名稱為LoginActivity,目的是提供使用者以帳號、密碼登入,點擊app後,再使用功能表「File/New/Activity/Empty Activity」新增活動的畫面如下:

接下來設計登入畫面版面「activity_login.xml」,設計如下圖的登入畫面,筆者在本例使用LinearLayout,請將LinearLayout的排列方式設定為垂直:

更換為LinearLayout請參考 3.4 上戰場了,寫個Bmi APP吧,專案Layout與元件設計

接著為兩個輸入方塊(EditText)分別設定id值為「userid」與「passwd」,此畫面的元件結構如下圖:

元件的onClick屬性

Android的元件有一個「onClick」屬性,只要在onClick中設定方法的名稱,未來執行時只要使用者按下該元件(通常是Button按鈕元件),便會自動執行該方法內的程式碼。因此,設定了onClick屬性後,應馬上到Activity中設計一個同名稱的方法,且方法的傳入值一定要有一個View元件,例如:

public void test(View v){

}

View元件的全名為android.view.View,初學者常打完上述方法後仍有錯誤訊息,原因是該Activity未import該類別,最快的解決方式是將游標移到View字上,再按下「Alt+Enter」組合鍵,Android Studio會自動加入import的語法。而最好的方法則是在鍵入指令的當下,在類別名稱還沒打完時出現選單時,按下Enter鍵選擇類別,此時會自動加入import語法,如下圖:

接下來,將進行實作按下兩個按鈕時的程式碼,請為提供使用者輸入帳號與密碼的輸入方塊(EditText)元件設定id,分別為「userid」與「passwd」,最後為登入按鈕的屬性onClick設定方法名稱「login」,再為取消按鈕設定onClick屬性值為「cancel」,再回到LoginActivity類別中設計login與cancel兩個方法,如下圖:

public class LoginActivity extends AppCompatActivity {
    ...

    public void login(View v){
        
    }
    
    public void cancel(View v){
        
    }

最後完成的activity_login.xml如下:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.tom.atm.LoginActivity"
    android:orientation="vertical">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:text="帳號"
        android:id="@+id/textView" />

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/userid" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:text="密碼"
        android:id="@+id/textView2" />

    <EditText
        android:id="@+id/passwd"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

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

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="登入"
            android:id="@+id/button"
            android:onClick="login" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="取消"
            android:id="@+id/button2"
            android:onClick="cancel" />
    </LinearLayout>
</LinearLayout>

登入判斷

在login方法中實作登入驗證功能,在此時,我們先假裝有一個帳號叫jack,密碼為1234,進行簡單的假驗證,在後續章節介紹到網路程式設計時,再真的將帳號與密碼經過網路伺服器進行驗證。

先以findViewById方法取得兩個EditText元件,再取得字串uid與pw,再判斷帳號與密碼,先以if方式設計:

    public void login(View v){
        EditText edUserid = (EditText) findViewById(R.id.userid);
        EditText edPasswd = (EditText) findViewById(R.id.passwd);
        String uid = edUserid.getText().toString();
        String pw = edPasswd.getText().toString();
        if (uid.equals("jack") && pw.equals("1234")){ //登入成功
            Toast.makeText(this, "登入成功", Toast.LENGTH_LONG).show();
            finish();
        }else{ //登入失敗
            new AlertDialog.Builder(this)
                    .setTitle("Atm")
                    .setMessage("登入失敗")
                    .setPositiveButton("OK", null)
                    .show();
        }
    }

當帳號與密碼都正確時,以Toast顯示浮動文字,並呼叫Activity類別的finish()方法以結束本活動,因為本活動的前一個是MainActivity,因此會回到MainActivity畫面。若登入失敗,以對話框告知使用者。

最後,回到MainActivity的onCreate方法,產生Intent並轉換畫面至LoginActivity,如下:

public class MainActivity extends AppCompatActivity {
    boolean logon = false;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        if (!logon){ //如果未登入, 則開啟LoginActivity
            Intent intent = new Intent(this, LoginActivity.class);
            startActivity(intent);
        }
    }
}

執行結果

一開始因為未登入(logon = false),開啟LoginActivity如下圖:

  

輸入測試帳號jack與密碼1234後,再按下登入按鈕,如下圖:

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *