
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:background="#E6E6E6"
    android:orientation="vertical"
    tools:context=".MainActivity">
 
    <ImageView
        android:id="@+id/iv"
        android:layout_width="70dp"
        android:layout_height="70dp"
        android:background="@drawable/tou1"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="50dp"/>
 
    <LinearLayout
        android:id="@+id/ll_number"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp"
        android:layout_centerHorizontal="true"
        android:layout_below="@+id/iv"
        android:layout_marginTop="20dp"
        android:layout_marginBottom="5dp"
        android:background="#ffffff"
        android:orientation="horizontal">
        <TextView
            android:id="@+id/tv_number"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="账号："
            android:textSize="20sp"
            android:textColor="#000"
            android:padding="10dp"/>
 
        <EditText
            android:id="@+id/et_number"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="5dp"
            android:background="@null"
            android:padding="10dp"/>
 
    </LinearLayout>
    <LinearLayout
        android:id="@+id/ll_password"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:background="#ffffff"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp"
        android:layout_below="@+id/ll_number"
        android:orientation="horizontal" >
        <TextView
            android:id="@+id/tv_password"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="密码："
            android:textSize="20dp"
            android:textColor="#000"
            android:padding="10dp"/>
        <EditText
            android:id="@+id/et_password"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="5dp"
            android:background="@null"
            android:inputType="textPassword"
            android:padding="10dp"/>
 
    </LinearLayout>
 
    <Button
        android:id="@+id/bt"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_marginRight="10dp"
        android:layout_marginLeft="10dp"
        android:text="登录"
        android:background="#3C8DC4"
        android:textColor="#ffffff"
        android:textSize="20sp"
        android:layout_below="@+id/ll_password"
        android:layout_marginTop="50dp"/>
 
    <TextView
        android:id="@+id/tv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="25dp"
        android:textColor="#000"
        android:textSize="20sp"
        android:text=""
        android:layout_below="@+id/bt"
        android:layout_alignLeft="@+id/bt"
        android:layout_alignStart="@+id/bt"/>
 
 
 
 
</RelativeLayout>

所在位置

用到的图片

在网上搜的，来源不知。很帅的一个小哥哥，然后就拿来做事例啦。哈哈哈，打住。

MainActivity的代码


package dell.example.qqlogin;
 
import androidx.appcompat.app.AppCompatActivity;
 
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.TextView;
 
public class MainActivity extends AppCompatActivity {
    private TextView textView;
    private EditText et_number;
    private EditText et_password;
    private Button bt;
 
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        textView = (TextView) findViewById(R.id.tv);
        et_number = (EditText) findViewById(R.id.et_number);
        et_password = (EditText) findViewById(R.id.et_password);
        bt = (Button) findViewById(R.id.bt);
        bt.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                textView.setText("账号："+et_number.getText().toString()+"密码："+et_password.getText().toString());
            }
        });
    }
 
 
}

所在位置

讲解部分

主布局代码讲解

总览主布局

通过运行效果图可以知道发现，这里可分成这几部分：头像部分、账号及输入部分、密码及其输入部分、登录按钮部分和显示输入信息部分。

从其中可以发现，我们需要用到的控件有：显示图片的ImageView、显示文字的TextView、可以输入内容的EditText、按钮控件Button和最下面用来显示输入信息的TextView（和上面的TextView相同，只是用途不一）。

由于显示文字 "账号：" 的TextView和其右边的控件与显示文字"密码："的TextView和其右面的控件在同一水平线上，为了方便设计，便对这两组控件使用LinearLayout约束。具体看结构蓝图：

一、整体

看图说话，

1、这里将原来的主布局文件的布局格式，改为相对布局，也就是修改为图中的1处。

2、除开设置宽高为match_parent(遍布全部父界面)，背景颜色background设置为灰色阴影#E6E6E6，最重要的就是设置其排列方式，

android:orientation="vertical" 意思是控件垂直排序，从上到下依次放置下来。

二、头像部分

看图吧，太简单了。

三、账号及输入部分

三和四都用到了线性布局，这里先讲下线性布局的属性。

看图看图，贼简单。

id不用说了，必须的

布局的宽高设置。宽为什么是match_parent，高为什么是wrap_content？这个问题很简单，我要让其实现运行效果图那样的效果，就得让宽占满屏幕，高根据设置的文字来确定，这样后面好修整。对了，match_parent意思让该属性与父控件一样，wrap_content意思是让该属性由内容确定。

左右边距设置为10dp。就是离两边的距离是10dp，为了效果，不解释。

设置控件水平居中

设置该控件的在显示图片的、id为iv控件的下方

上外边距为20dp。与iv的上下距离

下外边距为5dp，看图

背景为白色

最后一个属性，线性布局必须设置的属性，默认为水平排列。这里是水平摆放。