Android開發人員教程1: 實現一個登入對話方塊

轉　：http://hi.baidu.com/android_fans/blog/item/1e203ad8878d182b10df9b3c.html

 

難度：
適合人員：剛接觸Android的開發人員

簡述：對網路應用來說“登入框”還是蠻常見的，Code上沒有太複雜的東西，基本都是UI設計，很適合練手，代碼登入後可下載。

需求分析：
1.實現使用者名稱和密碼的輸入
2.提取使用者名稱和密碼資訊
3.登入時有進度條
4.逾時處理
5.登入成功跳轉
6.（不都列舉了， 大家根據實際情況自己添上吧）

Step 1：
目標：設計UI

1.1 編寫Layout XML login_view.xml

這種四方規整的布局自然是TableLayout合適了。值得說明的是，每行用一個TableRow標籤標識。論壇貼代碼太難看了，所以只貼關鍵的了。完整代碼教程寫完後會提供下載的。

 

<TableRow>

<TextView android:text="@string/username"

android:layout_width="wrap_content"

android:layout_height="wrap_content" />

<EditText android:layout_width="fill_parent"

android:layout_height="wrap_content"
android:layout_weight="1.0" />

</TableRow>

增加Layout_weight屬性是為了要EditText能延伸到最右側

 

<LinearLayout>

<Button android:text="@string/login"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_weight="1.0" />

<Button android:text="@string/cancel"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_weight="1.0" />

</LinearLayout>

這裡的Layout_weight屬性是為了要兩個Button的寬度相等，同時又能填充滿一行。因為1.0 ：1.0 == 1：1. 所以寬度相等了。

 

在Eclipse中看下效果吧
[attach]501[/attach]

效果貌似還不錯。

1.2 寫個類測試一下

Dialog 與 Activity都可以載入這個Layout。

TestLoginView.java

package org.androidin.tutorial;

import android.app.Activity;
import android.app.Dialog;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;

public class TestLoginView extends Activity {
    /** Called when the activity is first created. */
    public static Button btnActivity;
    public static Button btnDialog;
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        btnActivity = (Button)findViewById(R.id.test_activity);
        btnActivity.setOnClickListener(new BtnActivityOnclikListener());

        btnDialog = (Button)findViewById(R.id.test_dialog);
        btnDialog.setOnClickListener(new BtnDialogOnClickListener());
    }
   
    private class BtnDialogOnClickListener implements OnClickListener {
   
        public void onClick(View v) {
            Dialog dialog = new Dialog(TestLoginView.this);
            dialog.setContentView(R.layout.login_view);
            dialog.setTitle(getString(R.string.address));
            dialog.show();
        }
    }
   
    private class BtnActivityOnclikListener implements OnClickListener {
   
        public void onClick(View v) {
            Intent intent = new Intent();
            intent.setClass(TestLoginView.this, LoginVIewOnActivity.class);
            startActivity(intent);
        }
    }
}

LoginViewOnActivity.java

package org.androidin.tutorial;
import android.app.Activity;
import android.os.Bundle;

public class LoginVIewOnActivity extends Activity {
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setTitle(getString(R.string.address));
        setContentView(R.layout.login_view);
    }
}

   device1.png (7.76 KB)

2008-10-2 19:58   device2.png (10.39 KB)

2008-10-2 19:58   建立 BMP 映像.JPG (16.9 KB)

2008-10-2 19:58
Step 2：
目標 加入Progress UI，登入控制項的架構設計（登入邏輯，失敗或成功處理）。

首先加入Progress, 預設時Progress是不可見的，所以在android:visibility的屬性上設定“gone”，該參數會讓控制項不顯示且不佔位，其他資訊請參考官方文檔。

<LinearLayout android:id="@+id/login_view_progress"
        android:visibility="gone">
        <rogressBar android:layout_width="wrap_content"
                android:layout_height="wrap_content"
        />
        <TextView android:text="@string/is_logining"
                android:textSize = "17.5sp"
                android:layout_width="wrap_content"
                android:layout_height="fill_parent"
                android:gravity = "center"
        />
</LinearLayout> 接下來終於到關鍵區段了。每個應用的登入邏輯是不一樣的，所以寫一個介面

public interface OnLoginListener {       
        public boolean onLogin(View v, String username, String password);
        // View v就是調用該方法的View，其他倆參數不說了
        public void onLoginSuccess(View v);
        public void onLoginFailed(View v);
}

接下來就要對整個LoginView進行封裝了，因為要把XML中的View加入到LoginView中，所以繼承了FrameLayout

public class LoginView extends FrameLayout {
        protected Button btnLogin;
        protected Button btnCancel;
        protected EditText edtUsername;
        protected EditText edtPassword;
       
        protected View progress;
        private OnLoginListener onLoginListener;
        LoginView(Context context);//對屬性進行初始化
       
        public void setOnLoginListener(OnLoginListener l); //設定登入邏輯監聽
        public void setCancelOnClickListener(OnClickListener l); //設定Cancel按鈕的監聽
        public void setLoginOnClickListener(OnClickListener l) ; //設定Login按鈕的監聽
}

 

接下來我們逐個實現方法。

 

這裡只重載了一個構造方法，實際上可能需要重載多個，所以單獨寫一個初始化View的函數

 

private void initViews() {
        inflate(getContext(), R.layout.login_view, this);
        btnLogin = (Button) findViewById(R.id.login_view_login);
        btnCancel = (Button) findViewById(R.id.login_view_cancel);
        edtUsername = (EditText)findViewById(R.id.login_view_username);
        edtPassword = (EditText)findViewById(R.id.login_view_password);
        btnLogin.setOnClickListener(new LoginButtonListener()); //預設的處理邏輯監聽 下文再說。
       
        progress = findViewById(R.id.login_view_progress);
       
}
public LoginView(Context context) {
        super(context);
        initViews();
}
public void setOnLoginListener(OnLoginListener l) {
        onLoginListener = l;
}
public void setCancelOnClickListener(OnClickListener l) {
        btnCancel.setOnClickListener(l);
}
public void setLoginOnClickListener(OnClickListener l) {
        btnLogin.setOnClickListener(l);
}

回過頭來，研究上文加入的預設處理邏輯。

 

private class LoginButtonListener implements OnClickListener

 

一般的應用，登入都需要通過Socket遠端連線，或者本機資料庫串連。讀取本機資料還好，可是用Socket通訊的話，估計要等一段時間。遇到網路阻塞，登入過程更是漫長。其次，Socket是一種阻塞的方式，也就是說，如果沒有申請到串連，調用Socket的線程也屬於等待狀態。程式不會往下運行。

 

所以解決辦法就是要建立個Thread來處理這個登入過程了。

 

 

private class LoginButtonListener implements OnClickListener {
    public void onClick(View v) {
        if (onLoginListener != null) {
            loginThread = new LoginThread();
            loginThread.start();
        }
    }
}

 

protected class LoginThread extends Thread {
    public void run() {
        handler.sendEmptyMessage(SET_ONLOGIN_TRUE); //設定控制項不可用
        boolean flag = onLoginListener.onLogin(
        LoginView.this,
        edtUsername.getText().toString(),
        edtPassword.getText().toString());

 

        if (flag)
            onLoginListener.onLoginSuccess(LoginView.this);
        else
            onLoginListener.onLoginFailed(LoginView.this);
               
        handler.sendEmptyMessage(SET_ONLOGIN_FALSE); //設定控制項可用
    }
};

 

這裡的handler是用來在非主程式線程改變控制項屬性。Android規定，在其他非主線程裡不可以改變控制項屬性。但可以用Handler來處理類似情況。具體資訊請參考官方文檔。

 

基本的架構就是這樣，接下來說明此LoginView如何使用。

 

當然，首先要實現一個OnLoginListener

 

package org.androidin.tutorial.view;

 

import org.androidin.tutorial.LoginSuccessActivity;
import org.androidin.tutorial.R;

 

import android.content.Context;
import android.content.Intent;
import android.os.Handler;
import android.view.View;
import android.widget.Toast;

 

public class OnLoginListenerImpl implements OnLoginListener{
       
        protected Object session; //用來儲存一些登入狀態的傳回值，可以是HashMap，大家自己根據實際應用發揮了
       
        protected Handler handler; //所有的這些方法都是在另一線程調用，所以Handler用來改變一些控制項的屬性。
       
        public OnLoginListenerImpl(Handler handler) {
                this.handler = handler;
        }

 

        public boolean onLogin(View v, String username, String password) {
                for (int i=0; i<10000000; i++) //此方法來類比阻塞的Socket
                ;
                if(username.equals("androidin")) return true; //登入成功
                return false; //登入失敗
        }

 

        public void onLoginFailed(final View v) {
                handler.post(new Runnable() { //失敗顯示一個Toast
                        public void run() {
                                Toast.makeText(
                                v.getContext(),
                                v.getContext().getText(R.string.login_failed),
                                Toast.LENGTH_LONG).show();
                        }
                });
        }

 

        public void onLoginSuccess(View v) {
                Context context = v.getContext();
                context.startActivity(new Intent(context,
                LoginSuccessActivity.class)); //跳轉到成功頁面
        }
}

 

現在來組裝起來吧，以在Activity中顯示此控制項為例。

package org.androidin.tutorial;

 

import org.androidin.tutorial.view.LoginView;
import org.androidin.tutorial.view.OnLoginListenerImpl;

 

import android.app.Activity;
import android.os.Bundle;
import android.os.Handler;
import android.view.View;
import android.view.View.OnClickListener;

 

public class LoginViewOnActivity extends Activity {
   
    private LoginView logV;

 

    public void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setTitle(getString(R.string.address));
            logV = new LoginView(this);
            logV.setOnLoginListener(new OnLoginListenerImpl(new Handler()));
            logV.setCancelOnClickListener(new OnClickListener() {
                public void onClick(View v) {
                    finish();
                }
            });
            setContentView(logV);
    }
}
So，easy！！

 

device3.png (9.82 KB)

2008-10-2 19:58

 

 

此時還有個小BUG，不知道大家發現沒有，這個BUG修複留在Step 3裡講了。
Step 3：

目標：修複BUG，加入逾時處理

在step2中遺留下來一個小BUG，當點擊Login按鈕後，在登入狀態返回前，如果強行終止（比如按Back鍵）。登入邏輯是無法終止的，因為登入邏輯在一個新的線程裡。所以必須能夠終止登入邏輯線程。終止線程可以調用Thread.stop() Thread.interrupt(),stop方法並不是安全的，可能會產生死結。而interrupt只是改變線程狀態，而不是真正的去即時將線程終止。

所以我們設定一個isLoginCanceled，在登入狀態返回後驗證狀態，如果是取消就不繼續實行下面的程式。

protected class LoginThread extends Thread {
        public void run() {
                handler.sendEmptyMessage(SET_ONLOGIN_TRUE);
                boolean flag = onLoginListener.onLogin(LoginView.this, edtUsername
                .getText().toString(), edtPassword.getText().toString());
                if (isLoginCanceled) {
                        return;
                }
                if (flag)
                handler.sendEmptyMessage(LOGIN_SUCCESS);
                else
                handler.sendEmptyMessage(LOGIN_FAILED);
                handler.sendEmptyMessage(SET_ONLOGIN_FALSE);
        }
};

對於逾時處理我們採用類似的方法，逾時後將isLoginCanceled賦值true。下面的邏輯就不會執行了。
private class LoginButtonListener implements OnClickListener {
    public void onClick(View v) {
        if (onLoginListener != null) {
            isLoginCanceled = false;
            if (timeout != 0)
                handler.sendEmptyMessageDelayed(LOGIN_TIMEOUT, timeout);
            loginThread = new LoginThread();
            loginThread.start();
        }
    }
}

private Handler handler = new Handler() {
        @Override
        public void handleMessage(Message msg) {
            switch (msg.what) {
            case SET_ONLOGIN_TRUE:
                setOnLoging(true);
                break;
            case SET_ONLOGIN_FALSE:
                setOnLoging(false);
                break;
            case LOGIN_TIMEOUT:
                onLoginListener.onLoginTimeout(LoginView.this);
                loginCancel();
                sendEmptyMessage(SET_ONLOGIN_FALSE);
                break;
            case LOGIN_SUCCESS:
                onLoginListener.onLoginSuccess(LoginView.this);
                break;
            case LOGIN_FAILED:
                onLoginListener.onLoginFailed(LoginView.this);
                break;
            }
            super.handleMessage(msg);
        }
    };