Android studio 初級登入界面
文章目錄
- Android studio 初級登入界面
-
- 首頁面的展示編寫
- 展示賬号密碼
- 正确的賬号密碼才能登入成功
掌握Android中的線性布局。
掌握Android TextView、Button、EditText、CheckBox控件。
首頁面的展示編寫
編寫一個初級登入的界面需要幾個基本的元素：
- 使用者名：+使用者名填寫框
- 密碼：+密碼填寫框
- 記住賬号密碼
- 登入按鈕
我們需要用到的控件：
（1）TextView:+EditText
（3）CheckBox
（2）Button
除了這些必要的控件外，我們還需要處理界面的布局設定，
要完成初級的登入界面，我們還需要采用線性布局——LinearLayout
這是我們學習的關鍵
我們需要在頭檔案添加設定：
android:orientation="vertical" //垂直排列
android:orientation="horizontal" //水準排列
這兩條設定互相搭配才能得到我們需要的效果，在整體頁面上我們選擇垂直排列
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity"
android:orientation="vertical">
//在這其中設定布局
</LinearLayout>
在控件整體上，我們選擇水準分布，達到
（1）使用者名：+使用者名填寫框
（2）密碼：+密碼填寫框
的效果
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
//在這其中添加控件
</LinearLayout>
賬号密碼的文字表達和填寫框我們需要用到
TextView:+EditText
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="使用者名："
android:layout_marginTop="30dp" //距離頂部
android:textSize="25sp" //字型大小
android:textColor="#000000" //字型顔色
android:layout_weight="1"/> //占1/3空間
<EditText
android:id="@+id/edit_userName"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:hint="請輸入使用者名"
android:layout_marginTop="30dp"
android:textSize="25sp"
android:textColor="#2196F3"
android:layout_weight="2"/> //占2/3空間
效果展示：
密碼行也類似操作：
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="密碼："
android:textSize="25sp"
android:layout_marginTop="30dp"
android:textColor="#000000"
android:layout_weight="1"/>
<EditText
android:id="@+id/edit_password"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="30dp"
android:hint="請輸入密碼"
android:textSize="25sp"
android:textColor="#2196F3"
android:layout_weight="2"
android:inputType="textWebPassword"/> //隐藏密碼*****
</LinearLayout>
完整效果：
現在我們還缺記住賬号密碼的選項和登入按鈕
記住賬号密碼我們需要用到CheckBox空間，這個控件的作用是單選
登入采用的就是最常用的Button (按鈕)
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<CheckBox
android:id="@+id/remember"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="記住賬号密碼" />
</LinearLayout>
<Button
android:id="@+id/login"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="登入"
android:textAllCaps="false"
android:textColor="#EE4000"
android:layout_marginLeft="30dp"
android:layout_marginRight="30dp"
android:layout_marginTop="30dp"
android:textSize="25sp" />
現在我們就完成了初級登入界面的布局：
展示賬号密碼
完成了界面是不夠的，我們還要完成他的功能性，登入界面的功能是登入，
當然簡單的使用跳轉是可以完成登入的初步實作，但我們想要知道我們的賬号密碼資訊是不是一緻的，我們就要增加一個功能
在跳轉頁面展示我們的賬号密碼
我們要在MainActivity中對我們前面的空間進行定義和調用
buttonLogin.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
final EditText editTextUerName=findViewById(R.id.edit_userName);
final EditText editTextPassword=findViewById(R.id.edit_password);
String userName = editTextUerName.getText().toString();
String password = editTextPassword.getText().toString();
{
Intent intent = new Intent(MainActivity.this, ServerActivit.class);
intent.putExtra("userName", userName);
intent.putExtra("password", password);
startActivity(intent);
}}});}
除此之外我們還要建立一個Activity來承載資訊
TextView textView =findViewById(R.id.textData);
Intent intent =getIntent();
String userName =intent.getStringExtra("userName");
String password =intent.getStringExtra("password");
textView.setText("登入資料:"+"使用者名:"+userName+"密碼："+password); //文字輸出使用者名和密碼
看看初步效果:
嘗試一下無賬号密碼跳轉：
到目前位置我們已經完成了登入見面的布局，任何賬号密碼均可登入跳轉
正确的賬号密碼才能登入成功
這一步我們需要完成幾個工作：
（1）無賬号密碼不跳轉，并提示：賬号密碼不能為空
（2）賬号密碼錯誤不跳轉，并提示：賬号密碼錯誤
（3）正确的賬号密碼跳轉，并在輸出端展示賬号密碼
要完成這三個工作我們需要用到一條邏輯語句：
if(){}
else if(){}
else{}
我們要如何檢測我們的賬号密碼是否為空能？
這條語句是關鍵：
那我們要怎樣确定我們需要的賬号密碼了？
目前僅采用一個賬号密碼，後期我們學習了SQL資料庫後，可采用導用資料庫資料驗證。
boolean name = userName.equals("CSDN"); //設定規定的賬号
boolean pass = password.equals("12345678"); //設定規定的密碼
//boolean 布爾型，在此處使用為讀寫資料
賬号密碼錯誤，隻需要通過邏輯語句輸出即可
else{
Toast.makeText(MainActivity.this, "使用者名或者密碼錯誤", Toast.LENGTH_SHORT).show();
}
通過調整，我們完成了我們需要的功能，完整代碼如下
Button buttonLogin=(Button) findViewById(R.id.login);
buttonLogin.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
final EditText editTextUerName=findViewById(R.id.edit_userName);
final EditText editTextPassword=findViewById(R.id.edit_password);
String userName = editTextUerName.getText().toString();
boolean name = userName.equals("CSDN");
String password = editTextPassword.getText().toString();
boolean pass = password.equals("12345678");
if (TextUtils.isEmpty(editTextUerName.getText().toString()) || TextUtils.isEmpty(editTextPassword.getText().toString())) {
Toast.makeText(MainActivity.this, "使用者名或者密碼不能為空", Toast.LENGTH_SHORT).show();
} else if (name&&pass) {
Intent intent = new Intent(MainActivity.this, ServerActivit.class);
intent.putExtra("userName", userName);
intent.putExtra("password", password);
startActivity(intent);
}
else{
Toast.makeText(MainActivity.this, "使用者名或者密碼錯誤", Toast.LENGTH_SHORT).show();
}}});}
到現在為止，我們所需要的界面、功能大部分都完成了，認真看到此處的同學，
應該會有一個疑問：那你的記住賬号密碼按鈕有什麼用呢？
對的，到目前為止，我們并沒有用到這個單選按鈕，他的邏輯作用，我們留到下次再講，再會
大家關注一下秃頭大學生好不好