Android的界面布局建议用xml编写,可有效与java代码隔开,这里采用相对布局RelativeLaout实现QQ登录界面布局
![](https://i-blog.csdnimg.cn/blog_migrate/021f7681af687628070e18e09c3b244d.jpeg)
1.为实现QQ企鹅图标效果,在左侧项目目录下打开app/src/main/res/,将自己准备的qq图案复制后paste(粘贴)到/drawable文件夹,命名为qqimg(如果自己命名最好也以小写纯英文字母命名不然红线报错)
2.为实现账号和密码输入框的浅灰色圆角样式,在app/src/main/res/drawable右键新建new>DrawableResourceFile,命名为“editviewboader”
![](https://i-blog.csdnimg.cn/blog_migrate/fdac589ac15fb5a018b7bae55a194bc0.jpeg)
在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"/><!--填充色-->
<corners
android: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"/>
<corners
android: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在横坐标居中的基础上左偏移10dp
5.设置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与顶部距离为130dp
3.toEndOf位于图片QQ的右边
4.textSize和Color设置了字体样式(颜色大小)
-->
<EditText
android: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为自定义的editview
3.hint设置输入框内部提示信息
4.background为自定义的editviewboarder
5.定义输入数据类型为number
-->
<EditText
android: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为自定义的editview
3.hint设置输入框内部提示信息
4.background为自定义的editviewboarder
5.定义输入数据类型为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,横向居中 -->
<Button
android: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.效果图: