Android Studio制作简单登录界面

Android Studio制作简单登录界面

实现目的

应用线性结构计划登录界面，要求点击输入学号时弹出数字键盘界面，点击输入密码时弹出字母键盘，出现的文字、数字、尺寸等全部在values文件夹下相应.xml文件中设置好，使用时直接引用。当用户名或密码为空，表现一个提示信息“用户名与密码不能为空！”，当用户名和密码匹配，表现“登录成功”。
整体效果图如下：

实现过程

新建项目

新建一个项目如图所示：

UI计划

1.新建login.xml，选择线性结构
步骤如下：

计划登录页面
LinearLayout是线性结构，结构中的组件按照垂直或者水平方向进行排列
gravity：设置自身内部元素的对齐方式layout_gravity：用来控制该控件在包罗该控件的父控件中的位置
本计划接纳垂直线性结构，如图所示：

控件范例: EditText 是一个允许用户输入和编辑文本的控件。
android:id: 这个属性为控件设置了一个唯一的ID（@+id/ed2），使得开辟者可以在Java或Kotlin代码中通过这个ID来引用这个控件。
android:layout_width 和 android:layout_height: 这些属性界说了控件的宽度和高度。531dp 指定了宽度为531装备独立像素，wrap_content 表现高度会根据内容的巨细主动调解。
实当代码如下：

1. <?xml version="1.0" encoding="utf-8"?>
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
3.    xmlns:tools="http://schemas.android.com/tools"
4.    android:id="@+id/login"
5.    android:layout_width="match_parent"
6.    android:layout_height="match_parent"
7.    android:padding="25dp"
8.    android:background="@color/white"
9.    tools:context="com.example.myapplication1.LoginActivity"
10.    android:orientation="vertical"
11.    android:weightSum="1">
12.    <TextView
13.        android:layout_width="wrap_content"
14.        android:layout_height="wrap_content"
15.        android:text="@string/login_page_title"
16.        android:textSize="@dimen/text_size_large"
17.        android:textColor="@android:color/black"
18.        android:layout_gravity="center_horizontal"/>
19.    <LinearLayout
20.        android:layout_width="match_parent"
21.        android:layout_height="wrap_content"
22.        android:orientation="vertical"
23.        android:gravity="center"
24.        android:layout_weight="0.55">
25.        <LinearLayout
26.            android:layout_width="300dp"
27.            android:layout_height="wrap_content"
28.            android:orientation="horizontal">
29.            <TextView
30.                android:layout_width="@dimen/label_width"
31.                android:layout_height="wrap_content"
32.                android:text="@string/student_id_label"
33.                android:textSize="@dimen/text_size_medium"
34.                android:textColor="@android:color/black"/>
35. ​
36.            <EditText
37.                android:id="@+id/ed1"
38.                android:layout_width="531dp"
39.                android:layout_height="wrap_content"
40.                android:minHeight="48dp"
41.                android:padding="12dp"
42.                android:hint="@string/student_id_hint"
43.                android:inputType="number"
44.                android:textColor="@color/black"
45.                android:textColorHint="@android:color/darker_gray"
46.                android:visibility="visible" />
47.        </LinearLayout>
48.        <LinearLayout
49.            android:layout_width="300dp"
50.            android:layout_height="wrap_content"
51.            android:orientation="horizontal">
52.            <TextView
53.                android:layout_width="@dimen/label_width"
54.                android:layout_height="wrap_content"
55.                android:text="@string/password_label"
56.                android:textSize="@dimen/text_size_medium"
57.                android:textColor="@android:color/black"/>
58.            <EditText
59.                android:id="@+id/ed2"
60.                android:layout_width="531dp"
61.                android:layout_height="wrap_content"
62.                android:minHeight="48dp"
63.                android:padding="12dp"
64.                android:hint="@string/password_hint"
65.                android:inputType="text"
66.                android:textColor="@color/black"
67.                android:textColorHint="@android:color/darker_gray"
68.                android:visibility="visible" />
69.        </LinearLayout>
70.    </LinearLayout>
71. ​
72.    <Button
73.        android:layout_width="@dimen/login_button_width"
74.        android:layout_height="wrap_content"
75.        android:text="@string/login_button_text"
76.        android:textSize="@dimen/text_size_button"
77.        android:id="@+id/bt"
78.        android:layout_gravity="center_horizontal" />
79.        
80. </LinearLayout>

复制代码

2.将文本、数字和尺寸等资源从结构文件中移动到values文件夹下的相应.xml文件中并引用，须要按照以下步骤操作：
文本（字符串）资源：在values文件夹下的strings.xml文件中界说。
尺寸资源：在values文件夹下的dimens.xml文件中界说。
颜色资源：已经在colors.xml中界说，可以继续添加新的颜色或使用已有的颜色。
详细代码如下：
strings.xml

1. <resources>
2.    <string name="login_page_title">登录页面</string>
3.    <string name="student_id_hint">请输入学号</string>
4.    <string name="password_hint">请输入密码</string>
5.    <string name="student_id_label">学号：</string>
6.    <string name="password_label">密码：</string>
7.    <string name="login_button_text">登录</string>
8. </resources>

复制代码

dimens.xml

1. <resources>
2.    <dimen name="text_size_large">30dp</dimen>
3.    <dimen name="text_size_medium">18dp</dimen>
4.    <dimen name="login_button_width">285dp</dimen>
5.    <dimen name="login_input_width">300dp</dimen>
6.    <dimen name="label_width">65dp</dimen>
7.    <dimen name="text_size_button">20dp</dimen>
8. </resources>

复制代码

调用

1.新建一个LoginActivity进行调用，如图所示：

界说一个登录界面的举动：包罗两个文本输入框（EditText）用于输入用户名和密码，以及一个按钮（Button）用于提交登录信息。
成员变量：

• usertext 和 passtext 是EditText范例的变量，分别用于获取用户输入的用户名和密码。
  

onCreate方法：

• 在onCreate方法中，首先调用super.onCreate(savedInstanceState)和setContentView(R.layout.login)来初始化界面。
  

ButtonListener 类：

• ButtonListener实现了View.OnClickListener接口，用于处置惩罚按钮点击事件。
  
• 在其onClick方法中，首先获取usertext和passtext中的文本内容。
  
• 然后，通过一系列的条件判断，查抄用户名和密码是否为空，是否匹配预设的正确用户名（"2021"）和密码（"abc"）。
  

• 如果用户名或密码为空，表现一个提示信息“用户名与密码不能为空！”。
  
• 如果用户名和密码匹配，表现“登录成功”。
  

详细实当代码如下：

1. package com.example.myapplication1;
2. ​
3. import android.content.Intent;
4. import android.os.Bundle;
5. import android.widget.Button;
6. import android.widget.EditText;
7. import android.widget.Toast;
8. import android.view.View;
9. ​
10. import androidx.appcompat.app.AppCompatActivity;
11. ​
12. public class LoginActivity extends AppCompatActivity {
13.        private EditText usertext;
14.        private EditText passtext;
15.        private Button loginbutton;
16. ​
17.        @Override
18.        protected void onCreate(Bundle savedInstanceState) {
19.            super.onCreate(savedInstanceState);
20.            setContentView(R.layout.login);
21.            usertext=(EditText)this.findViewById(R.id.ed1);
22.            passtext=(EditText)this.findViewById(R.id.ed2);
23.            loginbutton=(Button)this.findViewById(R.id.bt);
24.            loginbutton.setOnClickListener(new ButtonListener());
25.        }
26.        private class ButtonListener implements View.OnClickListener{
27.            @Override
28.            public void onClick(View v){
29.                String user=usertext.getText().toString();
30.                String pass=passtext.getText().toString();
31.                if (user.equals("")||pass.equals("")){
32.                    Toast.makeText(LoginActivity.this,"用户名与密码不能为空！",Toast.LENGTH_SHORT).show();
33.                }
34.                else if (user.equals("2021")&&pass.equals("abc")){
35.                    Toast.makeText(LoginActivity.this,"登陆成功",Toast.LENGTH_SHORT).show();
36.                }
37.                else{
38.                    Toast.makeText(LoginActivity.this,"用户名或密码输入有误，请更正后重新输入！",Toast.LENGTH_SHORT).show();
39.                }
40.            }
41.        }
42.    }

复制代码

配置文件

AndroidManifest.xml是整个Android应用程序的全局面形貌配置文件
清单文件中通常包罗以下六项信息：

• 声明应用程序的包名: 用来识别应用程序的唯一标志
  

• 形貌应用程序组件<activity>
  

• 确定宿主应用组件进程
  

• 声明应用程序拥有的权限<uses-permission>
  

• 界说应用程序所支持API的最低等级
  

• 列举应用程序必须链接的库
  

添加LoginActivity到 AndroidManifest.xml中
详细代码如下：

1. <?xml version="1.0" encoding="utf-8"?>
2. <manifest xmlns:android="http://schemas.android.com/apk/res/android"
3.    xmlns:tools="http://schemas.android.com/tools">
4.    <application
5.        android:allowBackup="true"
6.        android:dataExtractionRules="@xml/data_extraction_rules"
7.        android:fullBackupContent="@xml/backup_rules"
8.        android:icon="@mipmap/ic_launcher"
9.        android:label="@string/app_name"
10.        android:roundIcon="@mipmap/ic_launcher_round"
11.        android:supportsRtl="true"
12.        android:theme="@style/Theme.AppCompat"
13.        tools:targetApi="31">
14.        <activity
15.            android:name=".LoginActivity"
16.            android:exported="true"
17.            android:label="@string/app_name"
18.            android:theme="@style/Theme.AppCompat">
19.            <intent-filter>
20.                <action android:name="android.intent.action.MAIN" />
21.                <category android:name="android.intent.category.LAUNCHER" />
22.            </intent-filter>
23.        </activity>
24.    </application>
25. </manifest>

复制代码

 详细实现效果图：

总结

以上就是简单的登录界面的计划的所有内容，简单介绍了线性结构以及相应属性的应用。
如果这篇文章对你或你的朋友有资助的话，请多多支持和分享，让更多的人受益。同时，如果你有任何问题或疑问，也欢迎在下方留言，我会尽快复兴并资助你办理问题。让我们一起共同进步，共同砚习！

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。