.net程序員轉戰android第三篇---登錄模塊之靜態登錄

這一篇我將分2個部分記錄登錄界面,第一部分是靜態登錄,

這部分將如何從界面布局、控件使用、文件關系、數據驗證、登陸實現等5小塊記錄.

第二部分是動態登錄,這塊會基於上面的4小塊,在數據驗證不是靜態數據,

而是通過WebService獲取網絡數據,然后解析網絡數據,驗證成功在進行文件關聯，然后頁面跳轉,最后實現自動登陸;

 

需求分析

 

如圖所見,對於一個程序員來說,不管你是做android\.NET\IOS，如果讓你來做上圖效果,

大家都會明白從哪里入手.

1：界面布局（分為3塊,頂部標題欄、表單提交塊、底部操作塊）.

2：控件使用（這個看項目需求了,這個界面主要使用了4種控件,按鈕(Button)、復選框(CheckBox)、文本框(EditText)、文字(TextView)）.

3：功能需求（一個靜態登錄頁面,我們需要它能實現這幾種功能,輸入驗證、數據驗證、記住密碼、自動登錄）. 

好了,當對頁面具體的布局到功能實現都清楚了,那我們就動手吧。

ps: 因為設計這個界面需要添加一些圖片,所以必須的注意幾個事項:圖片名不能有大寫字母,圖片拷貝到如下路徑：

 

 

界面布局

如果對android布局不清楚的朋友,可以花10分鍾把這篇文章看一下.http://www.cnblogs.com/wisekingokok/archive/2011/08/23/2150452.html

我個人比較喜歡LinearLayout（線性布局）,打開設計頁面,切換到代碼模塊.會發現項目為我們初始化使用相對布局(RelativeLayout).

但我們不需要它，改為如下：

 

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:background="#FFFFFF" >    
    <!--代碼分解：android:orientation="vertical" 設置此容器為單列模式 --> 

</LinearLayout>

 

改過之后.我頁面上就是一張空白的白紙了,我先從頂部設計開始,為了讓整個頁面看起來有層次感.

我希望層次結構是外面有一個父層,里面嵌套3個層,每個層分別代表（標題層、表單層、底部層）

 

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:background="#FFFFFF" >    
    <!--代碼分解：android:orientation="vertical" 設置此容器為單列模式 --> 
    
    <!--標題塊開始 --> 
    <LinearLayout 
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content"
    android:background="@drawable/bg_titlebar">
    <!--代碼分解：android:background="@drawable/bg_titlebar"給此容器設置背景圖片 -->     
        
    <TextView
    android:layout_gravity="center"
    android:gravity="center_horizontal"
    android:textColor="#ffffff" 
    android:textSize="20sp"
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content"
    android:text="@string/app_login"/>
    <!--代碼分解：android:layout_gravity="center"子容器在父容器中垂直居中 -->
    <!--代碼分解：android:gravity="center_horizontal"TextView里面的內容居中顯示-->
    <!--代碼分解：android:textColor="#ffffff"TextView控件內容的顏色-->
    </LinearLayout>
    <!--標題塊結束 --> 

</LinearLayout>

 

運行一下,看看現在效果怎么樣.

 

 

感覺還不錯,繼續設計表單提交塊。

為了讓整個頁面有層次感，我將繼續用一個層包住他，繼續用線性.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:background="#FFFFFF" >    
    <!--代碼分解：android:orientation="vertical" 設置此容器為單列模式 --> 
    
    <!--標題塊開始 --> 
    <LinearLayout 
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content"
    android:background="@drawable/bg_titlebar">
    <!--代碼分解：android:background="@drawable/bg_titlebar"給此容器設置背景圖片 -->     
        
    <TextView
    android:layout_gravity="center"
    android:gravity="center_horizontal"
    android:textColor="#ffffff" 
    android:textSize="20sp"
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content"
    android:text="@string/app_login"/>
    <!--代碼分解：android:layout_gravity="center"子容器在父容器中垂直居中 -->
    <!--代碼分解：android:gravity="center_horizontal"TextView里面的內容居中顯示-->
    <!--代碼分解：android:textColor="#ffffff"TextView控件內容的顏色-->
    </LinearLayout>
    <!--標題塊結束 --> 
    
    <!--表單塊開始 -->
    <LinearLayout 
    android:orientation="vertical"  
    android:padding="20sp" 
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content">
    <!--代碼分解：android:padding="10sp"為了不讓層與層之間不那么緊湊,讓它里面的子元素都距離它20sp -->
    <!--代碼分解：android:orientation="vertical"這個單列模式就完整體現出來了,嵌套在它里面的容器都是一個控件占據整行 -->
    
    <EditText
    android:id="@+id/edit_UserName"
    android:hint="@string/edit_UserName"
    android:layout_width="fill_parent"
    android:singleLine="true"
    android:layout_height="wrap_content">
    </EditText>
    <!--代碼分解：android:id="@+id/edit_UserName"給控件設置一個id,因為我們后台需要根據id找到它並獲取它的值 -->
    <!--代碼分解：android:hint="@string/edit_UserName"讓控件默認顯示數據,但是當鼠標點擊控件,默認的數據會清空 -->
    <!--代碼分解：android:singleLine="true"讓控件不自動換行 -->  
    
    <EditText
    android:id="@+id/edit_UserPassword"
    android:inputType="textPassword"
    android:layout_width="fill_parent"
    android:layout_marginTop="10sp"
    android:layout_height="wrap_content"
    android:singleLine="true"
    android:hint="@string/edit_password" >
    </EditText>
    <!--代碼分解：android:inputType="textPassword"因為是密碼框,這里我針對密碼框使用這個,還有更多可以去參考官方文檔 --> 
    <!--代碼分解：android:layout_marginTop="10sp"為了美觀,距離我上個元素10sp -->  
    
    
    <!--文本框定義好了,還差一個勾選框和按鈕,可是我的表單模塊已經設置了單列模式.我可不想一個勾選框占據一行,按鈕也跟着
          占據一行,所以我們得在定一個容器,去裝載2個控件在里面. -->  
    
    <LinearLayout 
    android:orientation="horizontal"  
    android:padding="20sp" 
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content">
    <!--代碼分解：android:orientation="horizontal"剛才我們解釋了單列模式,就是單個控件占據整行的寬度.
           這個就是多列模式,在它里面的子元素在一行上面可以顯示多個控件 -->
    
    <CheckBox
        android:id="@+id/checkbox_state"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1">
    </CheckBox>
    <!--代碼分解：android:layout_weight="1"設置權重,這個容器里面如果就2個控件,每個都設置為1,
    也就是每個占據百分之50的寬度 --> 
    
    <Button
        android:id="@+id/button_ok"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:background="@drawable/btn_android_login"
        android:textSize="18sp">
   </Button>
   </LinearLayout>
   </LinearLayout>
   <!--表單塊結束-->
                
</LinearLayout>

 

看下預覽效果.

 

到這里先停一下,回顧剛才我說到的控件使用,對於.net程序員最大的障礙不是編程語言.

C#和java太多相似, 基本上java代碼也都看得懂,如果做android，我們需要了解的第一步就是控件使用.

控件使用最好記住的方式就是拿自己以前設計界面控件和android的控件對比就知道了.

比如：TextView,我們就把他當作html的lable.主要用途用來展示文字.

　　　EditText,和html的textbox一樣,用於提供輸入.

　　　Button,就和html的button是一樣的.

ps：對於以上幾個控件,大家有時間可以琢個去了解它們的其他屬性。　　　

至於底部我就不記錄了.大家可以根據自己的需求自由發揮.

 

文件關系

 

界面設計完成之后,我們要去實現登錄功能了,把目光鎖定這個類：

why? 他和activity_main.xml到底有什么關系? 難道是創建activity_main.xml系統會自動創建一個對應的.java文件嗎?

如果不是,那以后我們添加一個xml頁面,怎么讓它關聯.java文件？

就算要關聯？那我們去哪里關聯？怎么關聯？

以上這些疑問不解決.那對我們來說.是一個非常大的困擾;

預覽大圖

 

很好，已經知道項目如何配制起始頁了； 

但想想還是不對,就算配置了Activity,那跟我界面有什么關系?

因為我們啟動程序呈現給我們的是界面阿,不是一堆類、文字、代碼;

帶這疑問,打開MainActivity.java這個文件,看它到底做什么.

預覽大圖

 

趕緊整理一下整體思路,其實android開發,首先我們面對的應該是在AndroidManifest.xml中配置,然后在是Activity類,最后才是xml設計頁面.

現在xml設計頁面和Activity類的關系搞清楚了,那就實現登錄功能吧. 

實現思路大概如下：

獲取文本框的值--驗證數據--判斷勾選框是否勾選--提示

 

功能實現

 

package com.example.my_login;

import android.os.Bundle;
import android.app.Activity;
import android.content.Context;
import android.content.SharedPreferences;
import android.content.SharedPreferences.Editor;
import android.view.Menu;
import android.view.View;
import android.widget.Button;
import android.widget.CheckBox;
import android.widget.EditText;
import android.widget.Toast;
public class MainActivity extends Activity {
    private EditText userName, password;//定義2個EditText對象.
    private CheckBox rem_pw;//定義CheckBox對象
    private Button button_ok;//定義Button對象
    private SharedPreferences sp;/*SharedPreferences是一種輕型的數據存儲方式，它的本質是基於XML文件存儲key-value鍵值對數據，
                                        通常用來存儲一些簡單的配置信息我們就用它來記住賬戶和密碼*/
    
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        sp = this.getSharedPreferences("userInfo",MODE_PRIVATE);//第一個參數自定義的,第二個是打開方式,一般選擇private方式.
        rem_pw = (CheckBox) findViewById(R.id.checkbox_state);//根據之前設置id,獲取頁面上的CheckBox對象,指向我現在當前類定義的CheckBox
        userName = (EditText) findViewById(R.id.edit_UserName);//同上
        password = (EditText) findViewById(R.id.edit_UserPassword);//同上
        button_ok = (Button)findViewById(R.id.button_ok);//同上
        
        //登錄按鈕事件
        button_ok.setOnClickListener(new View.OnClickListener(){
            public void onClick(View v)  
            {  
                //點擊登錄按鈕,我們首先要判斷是否輸入了值，沒有就提示用戶，否則就登錄.
                //userName.getText()這樣就可以獲取到文本框的值了,追加.toString()讓它以字符串方式顯示出來.保險起見trim()去掉空格
                if(userName.getText().toString().trim().equals("")&&password.getText().toString().trim().equals("")){
                    showToast("請輸入賬戶和密碼..");
                }else{
                    if(userName.getText().toString().trim().equals("sa")&&password.getText().toString().trim().equals("123")){
                        //判斷是否勾選了記住密碼
                        if(rem_pw.isChecked()){
                            //記住用戶名、密碼、
                              Editor editor = sp.edit();
                              //editor.putString()2個參數是鍵值對,第一個是對應的鍵,后面就是值,
                              editor.putString("USER_NAME", userName.getText().toString().trim());
                              editor.putString("PASSWORD",password.getText().toString().trim());
                              editor.commit();
                              //檢測密碼是否記住成功
                              showToast("登錄成功..你的賬戶是:"+sp.getString("USER_NAME", "")+",密碼是:"+sp.getString("PASSWORD", ""));
                        }else{
                             showToast("登錄成功,你沒選擇記住密碼");
                        }
                    
                            
                    }else{
                        showToast("你輸入的賬戶或密碼錯誤,請重新輸入..");
                    }
                }
            }  
        });
    }
    
    //提示類
    private void showToast(CharSequence msg) {
        Toast.makeText(this, msg, Toast.LENGTH_SHORT).show();
    }
    
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.main, menu);
        return true;
    }
}

 

 最后執行：

 

 

代碼示例下載

 

點此下載

 

后記

好了,這篇將android從登錄界面設計到中途衍生的配置、Activity(.java)、xml、等各文件之間的關聯,最后到功能實現.

記錄還算筆記細膩的,但受文字表達能力,還沒能通俗易懂的記錄出來.以后會努力改進的.

下篇我將繼續記錄“登錄頁面”，但是不再是靜態的,而是動態“登錄頁面”;

如果說的不對，大家可以直接說，讓我們能互相學習.如果想即時討論， 加我創建的QQ群：

版權聲明：本文原創發表於博客園，作者為文敏，本文歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置未給出原文連接，否則視為侵權。