Android开发，实现一个简约又好看的登录页

1. 编写布局文件

• 编写activity.login.xml 布局文件

<?xml version="1.0" encoding="utf-8"?>
<androidx.appcompat.widget.LinearLayoutCompat 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:orientation="vertical"><RelativeLayoutandroid:layout_width="match_parent"android:layout_height="200dp"android:background="@drawable/gradient_background5"><androidx.appcompat.widget.Toolbarandroid:id="@+id/toolbar"android:layout_width="match_parent"android:layout_height="wrap_content"app:title="登录"app:titleTextColor="@color/white" /></RelativeLayout><androidx.core.widget.NestedScrollViewandroid:layout_width="match_parent"android:layout_height="match_parent"android:layout_marginTop="-50dp"><androidx.appcompat.widget.LinearLayoutCompatandroid:layout_width="match_parent"android:layout_height="match_parent"android:background="@drawable/img_shape_login_bg"android:orientation="vertical"><androidx.appcompat.widget.LinearLayoutCompatandroid:layout_width="match_parent"android:layout_height="wrap_content"android:layout_margin="30dp"android:orientation="vertical"><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="欢迎登录雅居名宿"android:textColor="@color/purple_200"android:textSize="24sp"android:textStyle="bold" /><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_marginTop="10dp"android:text="继续登录您的账号!"android:textColor="#BDBDBD"android:textSize="13sp" /><androidx.appcompat.widget.LinearLayoutCompatandroid:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="vertical"><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_marginLeft="10dp"android:layout_marginTop="46dp"android:text="用户名"android:textColor="#585858" /><EditTextandroid:id="@+id/et_username"android:layout_width="match_parent"android:layout_height="40dp"android:layout_marginTop="6dp"android:background="@drawable/login_et_bg"android:hint="请输入用户名"android:paddingLeft="10dp"android:paddingRight="10dp"android:textSize="14sp" /><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_marginLeft="10dp"android:layout_marginTop="16dp"android:text="密码"android:textColor="#585858" /><EditTextandroid:id="@+id/et_password"android:layout_width="match_parent"android:layout_height="40dp"android:layout_marginTop="6dp"android:background="@drawable/login_et_bg"android:hint="请输入密码"android:inputType="textPassword"android:paddingLeft="10dp"android:paddingRight="10dp"android:textSize="14sp" /><CheckBoxandroid:id="@+id/checkbox"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="记住密码" /><TextViewandroid:id="@+id/btn_login"android:layout_width="match_parent"android:layout_height="50dp"android:layout_marginTop="20dp"android:background="@drawable/gradient_background4"android:gravity="center"android:text="登录"android:textColor="#ffffff"android:textSize="16dp" /><androidx.appcompat.widget.LinearLayoutCompatandroid:id="@+id/btn_register"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="center"android:layout_marginTop="20dp"><TextViewandroid:layout_width="wrap_content"android:layout_height="30dp"android:layout_gravity="center"android:gravity="center"android:text="还没有账号?"android:textColor="#747481"android:textSize="13sp" /><TextViewandroid:layout_width="wrap_content"android:layout_height="30dp"android:layout_gravity="center"android:gravity="center"android:text=" 注册"android:textColor="@color/purple_200"android:textSize="13sp" /></androidx.appcompat.widget.LinearLayoutCompat></androidx.appcompat.widget.LinearLayoutCompat></androidx.appcompat.widget.LinearLayoutCompat></androidx.appcompat.widget.LinearLayoutCompat></androidx.core.widget.NestedScrollView></androidx.appcompat.widget.LinearLayoutCompat>

• 在res/drawable创建顶部渐变背景 gradient_background5.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"android:shape="rectangle"><gradientandroid:startColor="@color/purple_200"android:endColor="#BBCEE9"android:angle="270"android:type="linear"/></shape>

• 在res/drawable创建登录按钮背景 gradient_background4.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"android:shape="rectangle"><gradientandroid:startColor="#0066f5"android:endColor="#A9C0E7"android:angle="45" /><cornersandroid:bottomLeftRadius="10dp"android:topRightRadius="10dp" /></shape>

• 在res/drawable创建登录区域背景 img_shape_login_bg.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"><solid android:color="@color/white"/><cornersandroid:topLeftRadius="15dp"android:topRightRadius="15dp" /></shape>

2.设计要点说明

1. 父布局使用LinearLayoutCompat线性布局包裹
2. 自适应小屏幕使用NestedScrollView包裹，在使用NestedScrollView时，特别注意它的子组件只能有且仅有一个
3. 使用shape来实现背景圆角，渐变等设置

3. 效果图

4. 关于作者其它项目视频教程介绍

1. Android新闻资讯app实战：https://www.bilibili.com/video/BV1CA1vYoEad/?vd_source=984bb03f768809c7d33f20179343d8c8
2. Androidstudio开发购物商城实战：https://www.bilibili.com/video/BV1PjHfeXE8U/?vd_source=984bb03f768809c7d33f20179343d8c8
3. Android开发备忘录记事本实战：https://www.bilibili.com/video/BV1FJ4m1u76G?vd_source=984bb03f768809c7d33f20179343d8c8&spm_id_from=333.788.videopod.sections
4. Androidstudio底部导航栏实现：https://www.bilibili.com/video/BV1XB4y1d7et/?spm_id_from=333.337.search-card.all.click&vd_source=984bb03f768809c7d33f20179343d8c8
5. Android使用TabLayout+ViewPager2实现左右滑动切换：https://www.bilibili.com/video/BV1Mz4y1c7eX/?spm_id_from=333.337.search-card.all.click&vd_source=984bb03f768809c7d33f20179343d8c8