Android的界面布局建议用xml编写,可有效与java代码隔开,这里采用相对布局RelativeLaout实现QQ登录界面布局

1.为实现QQ企鹅图标效果,在左侧项目目录下打开app/src/main/res/,将自己准备的qq图案复制后paste(粘贴)到/drawable文件夹,命名为qqimg(如果自己命名最好也以小写纯英文字母命名不然红线报错)
2.为实现账号和密码输入框的浅灰色圆角样式,在app/src/main/res/drawable右键新建new>DrawableResourceFile,命名为“editviewboader”

在editviewboader.xml中写入代码如下
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"android:shape="rectangle"><solid android:color="#EDEDED"/><!--填充色--><cornersandroid:radius="70dp"></corners><!--边缘曲度-->
<!-- <stroke android:color="@color/black" android:width="20dp"/>边框颜色和·宽度·-->
</shape>
3. 为了实现圆形登录按钮,在app/src/main/res/drawable右键新建new>DrawableResourceFile,命名为“btnstyle”写入代码如下:
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"android:shape="rectangle" ><gradient android:startColor="#03A9F4" android:centerColor="#66BFDA" android:endColor="#2196F3"/><cornersandroid:radius="300dp"/><!-- 设置按钮圆形边框 -->
</shape>
4.添加界面中需要出现的文本内容,“QQ,QQ号/手机号/邮箱”等。
打开app/src/main/res/values/strings.xml,写入代码如下
<resources><string name="app_name">test04–2</string><string name="contentdescript">TODO</string><string name="zhanghao">QQ号/手机号/邮箱</string><string name="mima">输入密码</string><string name="qq">QQ</string><string name="qqxieyi">已阅读并同意服务协议和QQ隐私保护指引</string>
</resources>
5.因为界面中账号与密码的输入框样式是相同的样式style,写一个style来减少代码重复。
打开app/src/main/res/values/themes.xml(有的android版本是style.xml),写入代码如下
<resources xmlns:tools="http://schemas.android.com/tools"><!-- Base application theme. --><style name="Theme.Test042" parent="Theme.MaterialComponents.DayNight.NoActionBar"></style><style name="editview"><!--自定义账号与密码两个输入框的style--><item name="background">@color/black</item><item name="android:layout_marginTop">20dp</item><item name="android:layout_width">310dp</item><item name="android:layout_height">60dp</item><item name="android:layout_centerHorizontal">true</item><!--控件整体居中--><item name="android:gravity">center</item><!--控件内部输入内容居中--><item name="android:textSize">20sp</item><!--输入的字体大小--></style>
</resources>
6.打开app/src/main/res/layout/activity_main.xml,界面布局代码就在此处编写
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="match_parent"tools:context=".MainActivity">
<!-- 去掉程序创建后上方的默认标题栏的方法:打开 src /res /values /themes.xml(也可能是styles.xml)--><ImageView android:id="@+id/qqimg"android:layout_width="90dp"android:layout_height="110dp"android:layout_centerHorizontal="true"android:translationX="-10dp"android:layout_marginTop="100dp"android:background="@drawable/qqimg"android:contentDescription="@string/contentdescript"/><!--1.给图片加上id以设置下一个textview"QQ"位于图片右侧2.设置图片大小3.图片通过centerhorizontal横坐标居中,4.再translationX在横坐标居中的基础上左偏移10dp5.设置img为/drawable下自定义的图片"qqimg"-把图片添加到drawable下时,图片的命名方式最好为纯英文小写字母!否则会变红--><TextView android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_marginTop="130dp"android:layout_toEndOf="@id/qqimg"android:text="@string/qq"android:textSize="50sp"android:textColor="@color/black"/><!--1.放置一个textview显示标题"QQ"2.设置width,height为自适应,marginTop与顶部距离为130dp3.toEndOf位于图片QQ的右边4.textSize和Color设置了字体样式(颜色大小)--><EditTextandroid:layout_below="@id/qqimg"android:id="@+id/edit1"style="@style/editview"android:hint="@string/zhanghao"android:background="@drawable/editviewboader"android:autofillHints="username"android:inputType="number"tools:ignore="LabelFor"/><!--1.放置一个EditText用于输入账号,below位于qqimg的下方,并赋予id"2.设置style为自定义的editview3.hint设置输入框内部提示信息4.background为自定义的editviewboarder5.定义输入数据类型为number--><EditTextandroid:layout_below="@id/edit1"style="@style/editview"android:hint="@string/mima"android:background="@drawable/editviewboader"android:layout_centerHorizontal="true"android:autofillHints="password"android:inputType="numberPassword"/><!--1.放置一个EditText用于输入密码,below位于edit1的下方"2.设置style为自定义的editview3.hint设置输入框内部提示信息4.background为自定义的editviewboarder5.定义输入数据类型为password,使输入的数据隐藏为”*****“ --><CheckBox android:layout_width="wrap_content" android:layout_height="wrap_content"android:layout_below="@id/edit1"android:layout_marginTop="100dp"android:layout_centerHorizontal="true"android:text="@string/qqxieyi"/><!--1.放置checkbox勾选框来勾选用户协议"2.设置位置居于edit1下方100dp,横向居中 --><Buttonandroid:layout_width="80dp"android:layout_height="80dp"android:layout_centerHorizontal="true"android:layout_marginTop="450dp"android:background="@drawable/btnstyle"/><!--1.放置Button按钮来表示登录按钮"2.设置位置居于顶部往下450dp,横向居中3.应用btnstyle样式-->
</RelativeLayout>
7.效果图: