EditText & 简单登录界面制作

基本认识

Button是TextView的一个子类,EditView同样也是TextView的子类

其中,EditView是一个可输入内容的组件

参考属性文档:包含EditText控件的常用属性

常用基本属性介绍:

属性含义
textAllCaps设置字体大小写,android:textAllCaps=”false”表示字体显示和输入的内容一致
hint设置文本框初始显示的用来提示用户输入的属性,在用户点击输入框开始输入时就会消失
inputType指定输入法类型

具体操作

<Buttonandroid:id="@+id/btn_edittext"android:layout_width="match_parent"android:layout_height="wrap_content"android:text="EditView"android:background="@drawable/bg_btn2"android:layout_marginTop="10dp"android:textAllCaps="false"/>

设置监听事件:点击EditText按钮时,跳转到新的页面(创建EditTextActivity页面(跳转到该页面)–> 设置监听事件)

package com.example.test_all_demo;import android.content.Intent;import android.os.Bundle;import android.view.View;import android.widget.Button;import androidx.appcompat.app.AppCompatActivity;public class MainActivity extends AppCompatActivity {private Button mBtnEditText;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);//监听事件---实现跳转mBtnEditText = findViewById(R.id.btn_edittext);mBtnEditText.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View view) {//跳转到EditView界面Intent intent = new Intent(MainActivity.this, EditTextActivity.class);startActivity(intent);}});}}

首先我们要在drawable文件夹下创建一个bg_username.xml文件,用于用户名栏和密码栏的样式设计:

<shape xmlns:android="http://schemas.android.com/apk/res/android"android:shape="rectangle"><strokeandroid:width="1dp"android:color="#999999"/><cornersandroid:radius="5dp"/></shape>

创建文件夹以后,进入到activity_edit_text.xml文件下,设计UI界面;

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"android:padding="15dp"><EditTextandroid:id="@+id/et_1"android:layout_width="match_parent"android:layout_height="50dp"android:textColor="#FFAD33"android:textSize="16sp"android:hint="用户名"android:background="@drawable/bg_username"android:maxLines="1"android:layout_marginTop="50dp"/><EditTextandroid:id="@+id/et_2"android:layout_width="match_parent"android:layout_height="50dp"android:textColor="#FFAD33"android:textSize="16sp"android:hint="密码"android:background="@drawable/bg_username"android:layout_below="@id/et_1"android:inputType="textPassword"android:layout_marginTop="15dp"/><Buttonandroid:id="@+id/btn_login"android:layout_width="match_parent"android:layout_height="50dp"android:text="登陆"android:textColor="#FFFFFF"android:textSize="20sp"android:background="@drawable/bg_btn4"android:layout_below="@id/et_2"android:layout_marginTop="20dp"/></RelativeLayout>

运行结果:

接下来设置用户名栏和密码栏icon图片:

设置icon头像只需要在选择合适的icon的图片大小,并在activity_edit_text.xml文件中在对应的增加两行代码即可;

<EditTextandroid:id="@+id/et_1"android:layout_width="match_parent"android:layout_height="50dp"android:textColor="#FFAD33"android:textSize="16sp"android:hint="用户名"android:maxLines="1"android:layout_marginTop="50dp"android:drawableLeft="@drawable/icon_account"/><EditTextandroid:id="@+id/et_2"android:layout_width="match_parent"android:layout_height="50dp"android:textColor="#FFAD33"android:textSize="16sp"android:hint="密码"android:layout_below="@id/et_1"android:inputType="textPassword"android:layout_marginTop="15dp"android:drawableLeft="@drawable/icon_password"/>

最后,设置监听事件;

监听事件介绍与设置

在一开始,当我们点击EditText按钮时,就会跳转到登录界面,这就是监听事件的实现;接下来我们简单介绍如何设置监听事件;

设置监听事件有三个基本要求:

一、声明空间

二、找到空间(老版本需要强制类型转换)

三、设置空间属性

当我们点击登录按钮后,一般会显示登录成功或者失败;为了演示方便,这里我们默认登录成功,并在对应的文件夹下即EditTextActivity.java文件进行编码;

  • 声明空间

    private Button mBtnButton
  • 找到空间

    mBtnLogin = findViewById(R.id.btn_login);
  • 设置空间属性

    mBtnLogin.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View view) {Toast.makeText(EditTextActivity.this,"登陆成功!",Toast.LENGTH_SHORT).show();}});

源代码

package com.example.test_all_demo;import android.os.Bundle;import android.view.View;import android.widget.Button;import android.widget.Toast;import androidx.appcompat.app.AppCompatActivity;public class EditTextActivity extends AppCompatActivity {private Button mBtnLogin;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_edit_text);mBtnLogin = findViewById(R.id.btn_login);mBtnLogin.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View view) {Toast.makeText(EditTextActivity.this,"登陆成功!",Toast.LENGTH_SHORT).show();}});}}

最终效果演示: