【AndroidStudio】手机QQ登录界面2022版

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

2022版手机QQ登录界面

1.为实现QQ企鹅图标效果，在左侧项目目录下打开app/src/main/res/，将自己准备的qq图案复制后paste(粘贴)到/drawable文件夹，命名为qqimg(如果自己命名最好也以小写纯英文字母命名不然红线报错)

2.为实现账号和密码输入框的浅灰色圆角样式，在app/src/main/res/drawable右键新建new>DrawableResourceFile,命名为“editviewboader”

新建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"/><!--填充色-->
    <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.效果图：