安卓————设计用户登录窗口

一、运行效果

二、实现步骤

涉及的知识点：

（1）利用到布局的嵌套实现复杂界面

（2）居中对齐，利用线性布局的gravity属性

（3）标签、编辑框、按钮三种控件

（4）编辑框的提示信息，利用hint属性

1.创建 LoginActivity.java和对应的布局文件

 

2，然后编写登录界面的代码。以及布局资源文件设置登录界面

 

 

 

 

 

这是一个嵌套布局

首先有一个最大的线性布局，放了一个标题

在里面嵌套了三个很小线性布局里面各装了一行。看着很清晰

实际代码实现如下：

?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@mipmap/background"
    android:gravity="center"
    android:orientation="vertical">

    <TextView
        android:id="@+id/tv_user_login"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="30dp"
        android:text="@string/title"
        android:textColor="#ff00ff"
        android:textSize="25sp" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center_horizontal"
        android:orientation="horizontal" >

        <TextView
            android:id="@+id/tv_user_name"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/name"
            android:textColor="#c71970"
            android:textSize="20sp" />

        <EditText
            android:id="@+id/edt_user_name"
            android:layout_width="150dp"
            android:layout_height="wrap_content"
            android:ems="10"
            android:hint="@string/input_name"
            android:textColorHint="#c76a19"
            android:singleLine="true" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center_horizontal"
        android:orientation="horizontal" >

        <TextView
            android:id="@+id/tv_password"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/password"
            android:textColor="#c71970"
            android:textSize="20sp" />

        <EditText
            android:id="@+id/edt_password"
            android:layout_width="150dp"
            android:layout_height="wrap_content"
            android:ems="10"
            android:hint="@string/input_password"
            android:textColorHint="#c76a19"
            android:inputType="textPassword"
            android:singleLine="true" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="30dip"
        android:gravity="center_horizontal"
        android:orientation="horizontal" >

        <Button
            android:id="@+id/btn_login"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:paddingLeft="30dp"
            android:paddingRight="30dp"
            android:text="@string/login"
            android:textColor="#c76a19"
            android:textSize="20sp" />

        <Button
            android:id="@+id/btn_cancel"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:paddingLeft="30dp"
            android:paddingRight="30dp"
            android:text="@string/cancel"
            android:textColor="#c76a19"
            android:textSize="20sp" />
    </LinearLayout>
</LinearLayout>

 

 

实现效果图：

string.xml的代码：

<resources>
    <string name="app_name">用户登录</string>
    <string name="title">用户登录</string>
    <string name="name">用户：</string>
    <string name="password">密码：</string>
    <string name="login">登录</string>
    <string name="cancel">取消</string>
    <string name="input_name">输入用户名</string>
    <string name="input_password">输入密码</string>

</resources>

 

3.设置事件监听，以便进行验证登录的账号与密码

public class LoginActivity extends Activity {

    //用户名编辑框
    private EditText edtUserName;
    //密码编辑框
    private EditText edtPassword;
    //登录按钮
    private Button btnLogin;

     //取消按钮
    private Button btnCancel;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        // 利用布局资源文件设置用户界面
        setContentView(R.layout.activity_login);

        // 通过资源索引获得界面控件实例
        edtUserName = (EditText) findViewById(R.id.edt_user_name);
        edtPassword = (EditText) findViewById(R.id.edt_password);
        btnLogin = (Button) findViewById(R.id.btn_login);
        btnCancel = (Button) findViewById(R.id.btn_cancel);

        // 给登录按钮注册监听器，实现监听器接口，编写事件处理方法
        btnLogin.setOnClickListener(new OnClickListener() {

            @Override
            public void onClick(View v) {
                // 保存用户输入的数据：用户名与密码
                String strUserName = edtUserName.getText().toString();
                String strPassword = edtPassword.getText().toString();

                // 判断用户名与密码是否正确（假定用户名与密码都是“admin”）
                if (strUserName.equals("admin") && strPassword.equals("admin")) {
                    Toast.makeText(LoginActivity.this, "恭喜，用户名与密码正确！",
                            Toast.LENGTH_LONG).show();
                } else {
                    Toast.makeText(LoginActivity.this, "遗憾，用户名或密码错误！请重新输入！",
                            Toast.LENGTH_LONG).show();
                }
            }
        });

        // 给取消按钮注册监听器，实现监听器接口，编写事件处理方法
        btnCancel.setOnClickListener(new OnClickListener() {

            @Override
            public void onClick(View v) {
                finish();
            }
        });
    }

这样完成了事件监听的全部过程。

我对布局的嵌套，和对布局的还不了解的深入。

需要更努力的去学习才行。