Android開發之簡單登入介面
使用者介面基礎
-
Android系統的四大元件分別是活動(Activity)、服務(Service)、廣播接收器(Broadcast Receiver)、內容提供器(Content Provider)。
其中,活動算是一個程式的門面,活動通過onCreate()方法來對使用者介面(UI)進行初始化。而使用者介面的建立則分為靜態和動態兩種方式:
- 靜態方式即以XML佈局檔案來定義使用者介面,通過XML佈局檔案中的相關屬性進行控制,我將使用這種方式來實現簡單的登入介面。
- 動態方式是指通過Java程式碼來開發使用者介面,動態地控制介面中的元件。我沒有嘗試過這種開發方式。
-
Android專案工程的結構:
Android專案工程結構
-
補充:
- 其中java資料夾下儲存有主活動檔案MainActivty.java。
- layout資料夾下儲存有佈局檔案activity_main.xml。
簡單登入介面的實現
- 準備完成的功能:
- 介面包含兩個編輯框,一個用於輸入使用者名稱;一個用於輸入密碼。
- 點選登入按鈕,若使用者名稱和密碼均和點選登入按鈕方法中定義的相同,則顯示登入成功的提示框,若不同,則提示登入失敗。
-
按照要求,實現兩個輸入框,這裡我們就需要在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>
-
效果如下:
登入介面
- 補充:
- LinearLayout代表當前佈局方式為線性佈局。
- TextView為顯示字串的控制元件,例如介面上的“使用者登入介面”、“使用者名稱”、“密碼”就是用TextView實現的。
- Button為按鈕控制元件,即為使用者介面新增一個可供點選的按鈕,並可在主活動中新增相應的方法實現點選按鈕後要進行的操作。
- 接下來我們開始編寫活動頁面的程式碼,完成點選按鈕後的匹配使用者名稱和密碼的操作。
- 為獲取到的Button物件繫結一個監聽器button.setOnClickListener()。
- 使用介面方式實現監聽事件。
- 最後在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