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