前置知识
Constraintlayout：最全面的ConstraintLayout教程 (qq.com)
ImageFilterView：ConstraintLayout官方提供圆角ImageFilterView
Shape 标签：Android-Shape标签使用 - 简书 (jianshu.com)
ImageFilterView ：圆角控件之ImageFilterView详解 - 简书 (jianshu.com)
MVP架构：带你封装MVP架构(上)|青训营笔记
你会收获
- 如何编写一个美观的登录界面
- 如何提示用户查看 协议
- 如何载入跳转登录抖音，且回调回对应的页面
前言
在使用 APP 派对岛 的时候，发现它的页面很好看，同时其首要的登录方法也是跳转去采用抖音来登录的。符合当前的业务需求，所以决定仿写该页面作为大作业的登录界面。话不多说，开始仿写吧😁
编写页面
根据 派对岛 的界面设计，我们需要思考以下三种设计的实现
- 上方 APP logo 的展示，需要把图片切为圆角
- 下方的按钮其值需要为渐变色
- 需要勾选已阅读用户协议之后，点击登录按钮才可发起跳转
图片圆角
让图片显示圆角，我们可以直接使用 ImageFilterView 这个组件，对 roundPercent 这个属性做一个设置即可。这是设置圆角比例，最大到1，设置为1的时候就是原型，使用者可以根据自己的需求来使用不同的比例。可以点击查看更多的属性
渐变色
我们可以用shape标签来设置一个渐变色区间以及圆角功能，再将这个 shape 标签设置到 Button 的 style 中。
<!--res/drawable/shape_login_gradient.xml--> <?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle"> <gradient android:type="linear" android:angle="0" android:startColor="@color/blue_left" android:centerColor="@color/blue_center" android:endColor="@color/blue_right"/> <corners android:radius="30dp"/> </shape> 复制代码
shape 里面的 gradient ，可以设置三种不同种类的渐变色，这里设置是水平样式。同时设置了三种颜色让其做对应的渐变。corners 标签内写的是圆角的值。我们可以在此输入圆角的值来进行设置。到布局文件之中就可以写入设置样式了。
协议勾选
协议的勾选，我们选用的布局是 checkBox 按钮，这种按钮点击的时候有勾选和不勾选的效果，关于其勾选状态的监听以及对状态的设置，我们会在下一篇关于java的代码中对其进行行为判断，本篇先不做分析
利用相对布局编写页面
下文便是使用 ConstraintLayout 编写的页面，我们可以进行拖拽或者使用代码编写。使用相对布局的好处是，当布局复杂的时候，他会让我们的布局层级相对较低，这也让我们的画面渲染次数较少，可以提高APP的性能。同时，如果我们能熟练的使用拖拽功能，那么拖拽生成的速度会比编写代码要高上许多。下面的代码就是位置用拖拽产生，对应的修饰是手动编码完成的。
<!--res/layout/activity_login.xml--> <?xml version="1.0" encoding="utf-8"?> <androidx.constraintlayout.widget.ConstraintLayout 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" tools:context=".module.mine.activity.LoginActivity"> <androidx.constraintlayout.utils.widget.ImageFilterView android:id="@+id/imageFilterView" android:layout_width="100dp" android:layout_height="100dp" android:src="@drawable/potato" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" app:layout_constraintVertical_bias="0.26999998" app:roundPercent="0.7" /> <Button android:id="@+id/btn_login" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_marginStart="20dp" android:layout_marginEnd="20dp" android:background="@drawable/shape_login_gradient" android:paddingTop="18dp" android:paddingBottom="18dp" android:text="@string/login" android:textAlignment="center" android:textColor="@color/white" android:textSize="18sp" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toBottomOf="@+id/imageFilterView" app:layout_constraintVertical_bias="0.65" /> <CheckBox android:id="@+id/checkBox" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginStart="50dp" android:layout_marginBottom="40dp" android:text="@string/has_read" android:textColor="@color/gray" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toStartOf="@+id/tv_user_agreement" app:layout_constraintStart_toStartOf="parent" /> <TextView android:id="@+id/tv_app_name" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="30dp" android:text="@string/app_name" android:textAllCaps="true" android:textColor="@color/black" android:textSize="26sp" android:textAlignment="center" android:textStyle="bold" app:layout_constraintEnd_toEndOf="@+id/imageFilterView" app:layout_constraintStart_toStartOf="@+id/imageFilterView" app:layout_constraintTop_toBottomOf="@+id/imageFilterView" /> <TextView android:id="@+id/tv_user_agreement" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginStart="10dp" android:text="@string/user_agreement" android:textColor="@color/Gray30" app:layout_constraintBottom_toBottomOf="@+id/checkBox" app:layout_constraintStart_toEndOf="@+id/checkBox" app:layout_constraintTop_toTopOf="@+id/checkBox" /> </androidx.constraintlayout.widget.ConstraintLayout> 复制代码
上文的代码中多使用相对的位置，有以下的特点
- 顶部的图标置于纵向 27% 的位置
- 按钮以顶部图标为相对顶部，置于 65% 的位置
- 底部的阅读协议的提示，置于离底部 40dp 的位置
最后得到的效果是如下样式
下一篇文章，将会介绍Java代码如何编写
