Android?studio實現(xiàn)app登錄界面

更新時間：2022年04月23日 15:29:00 作者：Ｒｕｎ

這篇文章主要為大家詳細介紹了Android?studio實現(xiàn)app登錄界面，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了Android studio設(shè)計app登錄界面，供大家參考，具體內(nèi)容如下

UI界面設(shè)計

在設(shè)計登錄界面時，可以使用不同布局方式來實現(xiàn)該功能，通常情況下使用的是LinearLayout(線性布局)和TableLayout(表格布局)，在本文中使用線性布局。登陸界面需要幾項必不可少的控件，如下所示：

1、TextView：用于顯示標題和“用戶名"和"密碼"的提示;

標題設(shè)置

<TextView
? ? ? ? android:layout_width="wrap_content"
? ? ? ? android:layout_height="wrap_content"
? ? ? ? android:text="登錄頁面"
? ? ? ? android:textSize="30dp"
? ? ? ? android:textColor="@android:color/black"
? ? ? ? android:layout_gravity="center_horizontal"/>

"用戶名"提示

<TextView
? ? ? ?android:layout_width="65dp"
? ? ? ?android:layout_height="wrap_content"
? ? ? ?android:text="用戶名："
? ? ? ?android:textSize="16dp"
? ? ? ?android:textColor="@android:color/black"/>

"密碼"提示:

<TextView
? ? ? ?android:layout_width="65dp"
? ? ? ?android:layout_height="wrap_content"
? ? ? ?android:text="密碼："
? ? ? ?android:textSize="16dp"
? ? ? ?android:textColor="@android:color/black"/>

2、EditView:用于輸入"用戶名"和"密碼"；

"用戶名"輸入框：

<EditText
? ? ? ?android:layout_width="264dp"
? ? ? ?android:layout_height="wrap_content"
? ? ? ?android:id="@+id/ed1"
? ? ? ?android:hint="請輸入用戶名" ? ? ? ? ? ? ??
? ? ? ?android:textColor="@android:color/black"/>

"密碼"輸入框：

<EditText
? ? ? ?android:layout_width="264dp"
? ? ? ?android:layout_height="wrap_content"
? ? ? ?android:id="@+id/ed2"
? ? ? ?android:hint="請輸入密碼"
? ? ? ?android:textColor="@android:color/black"/>

3、Button:用于控制登錄。

Button登錄按鈕:

<Button
? ? ? ? android:layout_width="285dp"
? ? ? ? android:layout_height="wrap_content"
? ? ? ? android:text="登錄"
? ? ? ? android:textSize="20dp"
? ? ? ? android:id="@+id/bt"
? ? ? ? android:layout_gravity="center_horizontal" />/>

本文使用三層LinearLayout互相嵌套，第一層LinearLayout中包括標題(TextView)和第二層LinearLayout以及登錄按鈕(Button)。第一層LinearLayout使用垂直分布，即android:orientation=“vertical”。
第二層LinearLayout中嵌套兩個第三層LinearLayout，且第二層LinearLayout為垂直分布，即android:orientation=“vertical”。
第三層的兩個LinearLayout中各包含一個TextView和一個EditView，第三層LinearLayout為水平分布，即android:orientation=“horizontal”。

總的UI設(shè)計如下所示。

<?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:id="@+id/activity_main"
? ? 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.example.activities.MainActivity"
? ? android:orientation="vertical"
? ? android:weightSum="1">

? ? <TextView
? ? ? ? android:layout_width="wrap_content"
? ? ? ? android:layout_height="wrap_content"
? ? ? ? android:text="登錄頁面"
? ? ? ? android:textSize="30dp"
? ? ? ? android:textColor="@android:color/black"
? ? ? ? android:layout_gravity="center_horizontal"/>
? ? <LinearLayout
? ? ? ? android:layout_width="match_parent"
? ? ? ? android:layout_height="wrap_content"
? ? ? ? android:orientation="vertical"
? ? ? ? android:gravity="center"
? ? ? ? android:layout_weight="0.55">
? ? ? ? <LinearLayout
? ? ? ? ? ? android:layout_width="300dp"
? ? ? ? ? ? android:layout_height="wrap_content"
? ? ? ? ? ? android:orientation="horizontal">
? ? ? ? ? ? <TextView
? ? ? ? ? ? ? ? android:layout_width="65dp"
? ? ? ? ? ? ? ? android:layout_height="wrap_content"
? ? ? ? ? ? ? ? android:text="用戶名："
? ? ? ? ? ? ? ? android:textSize="16dp"
? ? ? ? ? ? ? ? android:textColor="@android:color/black"/>

? ? ? ? ? ? <EditText
? ? ? ? ? ? ? ? android:layout_width="264dp"
? ? ? ? ? ? ? ? android:layout_height="wrap_content"
? ? ? ? ? ? ? ? android:id="@+id/ed1"
? ? ? ? ? ? ? ? android:hint="請輸入用戶名"
? ? ? ? ? ? ? ? android:textColor="@android:color/black"/>
? ? ? ? </LinearLayout>
? ? ? ? <LinearLayout
? ? ? ? ? ? android:layout_width="300dp"
? ? ? ? ? ? android:layout_height="wrap_content"
? ? ? ? ? ? android:orientation="horizontal">
? ? ? ? ? ? <TextView
? ? ? ? ? ? ? ? android:layout_width="65dp"
? ? ? ? ? ? ? ? android:layout_height="wrap_content"
? ? ? ? ? ? ? ? android:text="密碼："
? ? ? ? ? ? ? ? android:textSize="16dp"
? ? ? ? ? ? ? ? android:textColor="@android:color/black"/>
? ? ? ? ? ? <EditText
? ? ? ? ? ? ? ? android:layout_width="264dp"
? ? ? ? ? ? ? ? android:layout_height="wrap_content"
? ? ? ? ? ? ? ? android:id="@+id/ed2"
? ? ? ? ? ? ? ? android:hint="請輸入密碼"
? ? ? ? ? ? ? ? android:textColor="@android:color/black"/>
? ? ? ? </LinearLayout>
? ? </LinearLayout>


? ? <Button
? ? ? ? android:layout_width="285dp"
? ? ? ? android:layout_height="wrap_content"
? ? ? ? android:text="登錄"
? ? ? ? android:textSize="20dp"
? ? ? ? android:id="@+id/bt"
? ? ? ? android:layout_gravity="center_horizontal" />/>
</LinearLayout>

效果如圖所示。

Java代碼編寫

若用戶輸入用戶名或密碼有誤時，彈窗提示“用戶名或密碼輸入有誤，請更正后重新輸入！”。
若用戶沒有輸入用戶名或密碼，彈窗提示“用戶名與密碼不能為空！”。
當(dāng)用戶名與密碼同時輸入正確是，方可進入系統(tǒng)。

package com.example.activities;

import android.content.Intent;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {
? ? private EditText usertext;
? ? private EditText passtext;
? ? private Button loginbutton;

? ? @Override
? ? protected void onCreate(Bundle savedInstanceState) {
? ? ? ? super.onCreate(savedInstanceState);
? ? ? ? setContentView(R.layout.activity_main);
? ? ? ? usertext=(EditText)this.findViewById(R.id.ed1);
? ? ? ? passtext=(EditText)this.findViewById(R.id.ed2);
? ? ? ? loginbutton=(Button)this.findViewById(R.id.bt);
? ? ? ? loginbutton.setOnClickListener(new ButtonListener());
? ? }
? ? private class ButtonListener implements View.OnClickListener{
? ? ? ? @Override
? ? ? ? public void onClick(View v){
? ? ? ? ? ? String user=usertext.getText().toString();
? ? ? ? ? ? String pass=passtext.getText().toString();
? ? ? ? ? ? if (user.equals("")||pass.equals("")){
? ? ? ? ? ? ? ? Toast.makeText(MainActivity.this,"用戶名與密碼不能為空！",Toast.LENGTH_SHORT).show();
? ? ? ? ? ? }
? ? ? ? ? ? else if (user.equals("denglu")&&pass.equals("0000")){
? ? ? ? ? ? ? ? Toast.makeText(MainActivity.this,"登陸成功",Toast.LENGTH_SHORT).show();
? ? ? ? ? ? ? ? Intent intent=new Intent(MainActivity.this,TwoActivity.class);
? ? ? ? ? ? ? ? startActivity(intent);
? ? ? ? ? ? }
? ? ? ? ? ? else{
? ? ? ? ? ? ? ? Toast.makeText(MainActivity.this,"用戶名或密碼輸入有誤，請更正后重新輸入！",Toast.LENGTH_SHORT).show();
? ? ? ? ? ? }
? ? ? ? }
? ? }
}

點擊登錄按鈕之后，進入下一個界面，這時需在Manifest中添加第二個Activity的名稱

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
? ? package="com.example.activities">

? ? <application
? ? ? ? <activity android:name=".MainActivity">
? ? ? ? ? ? <intent-filter>
? ? ? ? ? ? ? ? <action android:name="android.intent.action.MAIN" />

? ? ? ? ? ? ? ? <category android:name="android.intent.category.LAUNCHER" />
? ? ? ? ? ? </intent-filter>
? ? ? ? </activity>
? ? ? ? <activity android:name=".TwoActivity"></activity>
? ? </application>

</manifest>

第二個界面的Activity需調(diào)用第二個xlm的layout，如下所示

package com.example.myapplication;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;

public class TwoActivity extends AppCompatActivity {

? ? @Override
? ? protected void onCreate(Bundle savedInstanceState) {
? ? ? ? super.onCreate(savedInstanceState);
? ? ? ? setContentView(R.layout.twoactivity);
? ? }
}

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: