[Android]小白实现登录界面(附完整源码)

本博文源于安卓基础对ImageView类的简单测试，包含对ImageView类的详细讲解与登录界面的制作。没有太大高深难度，只有一步步脚印哟！

测试最终效果图示

大家可以看到四个控件，一个ImageView类，两个EditView类，和一个按钮，因为按钮点击将账号密码打印出来，也就是大家看到的账号：zhang 密码：root的场景。具体怎么做，待我详细说来

具体步骤

创建新项目

点进Project—>Empty Activity—>然后finish即可。成功之后，点击箭头运行程序。

大家如果第一行hello world没有跑成功的话，那就看这个10分钟配置环境系列吧
mooc链接

配置字符串资源

点击之后，我们就可以将字符串输入进去，源码如下

<resources>
    <string name="app_name">My loginApplication</string>
    <string name="remember_name">请输入账号</string>
    <string name="remember_password">请输入密码</string>
    <string name="text_login">登录</string>
</resources>

配置图片资源

这是我用到的两张图片，你们可以点击另存为，保持到本地，注意命名。
背景色是login_div_bg.png，用户是yh.gif。然后我们要配置drawable

将图片拖拽到这里，记住千万不要有v24后缀，有了怎么半？删掉重新弄，不然后期图片无法显示。

配置布局activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<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"
    android:id="@+id/activity_main"
    android:orientation="vertical"

    >
    <ImageView
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:layout_gravity="center_horizontal"
        android:src="@drawable/yh"
        android:layout_marginTop="48dp"
        />

        <EditText
            android:layout_width="320dp"
            android:layout_height="48dp"
            android:id="@+id/login_id"
            android:layout_gravity="center_horizontal"
            android:layout_marginTop="48dp"
            android:background="@drawable/login_div_bg"
            android:paddingLeft="8dp"
            android:text="@string/remember_name"
            />

    <EditText
        android:layout_width="320dp"
        android:layout_height="48dp"
        android:id="@+id/login_password"
        android:layout_gravity="center_horizontal"
        android:layout_marginTop="16dp"
        android:background="@drawable/login_div_bg"
        android:paddingLeft="8dp"
        android:text="@string/remember_password"
        />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/text_login"
        android:id="@+id/login_button"
        android:textSize="20dp"
        android:layout_marginTop="20dp"
        android:layout_marginLeft="120dp"/>

</LinearLayout>

LinearLayout讲解

我只是做了简单的配置包括它的width与height，匹配父元素，父元素就是app本身.id设置，垂直方向，不然水平就是并排，挺难看的！

ImageView讲解

设置基本的width与height，gravity为了保证它在居中位置。资源引用用户头像。margintop就是与边缘48单位大小。这样有点距离显得更为标准。

EditText讲解

基本设置外，paddingleft内容与整个类的大小间距，玩过html应该能理解。text应用string中的，大家应该能理解。背景套用资源文件的背景，做到业务分离。

Button讲解

基本设置外，marginTop与left只是更好看。

java监听器修改

package com.example.myloginapplication;

import androidx.appcompat.app.AppCompatActivity;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.Toast;

public class MainActivity extends Activity implements View.OnClickListener {
    Button btn;
    EditText login_id,login_password;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        login_id = (EditText)findViewById(R.id.login_id);
        login_password = (EditText)findViewById(R.id.login_password);
        btn = (Button) findViewById(R.id.login_button);
        btn.setOnClickListener(this);
    }
    @Override
    public void onClick(View v)
    {
        String str = login_id.getText() + " " + login_password.getText();
        Toast.makeText(this, str, Toast.LENGTH_LONG).show();
    }
}

这里的java包大家应该知道，你创建什么样的包，修改一下，然后其他的就是激活控件，设置监听器，将监听器单击事件中把password与user打印出来。

总结

总结起来步骤应该是这几步

• 创建新项目，确立好项目名字，届时好修改
• 修改字符串资源
• 上传图片资源
• 对activity_main.xml进行布局
• 实现java监听器代码打印用户名与密码。

很高兴博文能帮助到大家！