Android超级好看的动态登陆界面（附有详细代码）

叁歲伎倆 2024-04-08 10:10 86阅读 0赞

**首先先演示一下动态的效果**

QQ视频20220819164103

从视频效果中，看到这个动态的登陆界面还是比较好看的，下面开始介绍如何制作这个动态的登陆界面。

#### **一、首先书写静态页面** ####

**activity\_mian.xml**

<?xml version="1.0" encoding="utf-8"?>
    <androidx.constraintlayout.motion.widget.MotionLayout
        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"
        app:layoutDescription="@xml/motion_scene_splash"
        tools:context=".MainActivity"
        tools:ignore="MissingConstraints">
    
        <ImageView
            android:id="@+id/imgView_logo"
            android:layout_width="130dp"
            android:layout_height="130dp"
            android:layout_marginTop="80dp"
            android:scaleType="centerInside"
            android:src="@drawable/icon"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />
    
        <ImageView
            android:id="@+id/imgView_logo_rays"
            android:layout_width="130dp"
            android:layout_height="130dp"
            android:layout_marginTop="80dp"
            android:rotation="0"
            android:scaleType="centerInside"
            android:src="@drawable/icon2"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />
    
        <ImageView
            android:id="@+id/imgView_cloudLeft"
            android:layout_width="130dp"
            android:layout_height="130dp"
            android:layout_marginTop="16dp"
            android:scaleType="centerInside"
            android:src="@drawable/cloud"
            app:layout_constraintTop_toTopOf="parent"
            app:tint="@color/lightGrey" />
    
        <ImageView
            android:id="@+id/imgView_cloudRight"
            android:layout_width="130dp"
            android:layout_height="130dp"
            android:layout_marginTop="100dp"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            android:scaleType="centerInside"
            android:src="@drawable/cloud"
            app:tint="@color/lightGrey"
             />
    
        <LinearLayout
    
            android:id="@+id/linlay_inputs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginStart="30dp"
            android:layout_marginLeft="30dp"
            android:layout_marginEnd="30dp"
            android:layout_marginRight="30dp"
            android:gravity="center"
            android:layout_marginTop="10dp"
            android:orientation="vertical"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/imgView_cloudRight">
    
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:fontFamily="sans-serif-medium"
                android:text="Welcome Back"
                android:textColor="@color/textHeadline"
                android:textSize="20sp" />
    
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:fontFamily="sans-serif"
                android:text="Sign in to continue"
                android:textColor="@color/textDescription"
                android:textSize="14sp" />
    
            <EditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="30dp"
                android:background="@drawable/edittext_bg"
                android:drawableStart="@drawable/custom_email_icon"
                android:drawablePadding="16dp"
                android:hint="Email"
                android:inputType="textEmailAddress"
                android:padding="16dp"
                android:textSize="14sp" />
    
            <EditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="20dp"
                android:background="@drawable/edittext_bg"
                android:drawableStart="@drawable/custom_lock_icon"
                android:drawableEnd="@drawable/ic_baseline_visibility_24"
                android:drawableRight="@drawable/ic_baseline_visibility_24"
                android:drawablePadding="16dp"
                android:hint="Password"
                android:inputType="textPassword"
                android:padding="16dp"
                android:textSize="14sp" />
    
            <Button
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="30dp"
                android:background="@drawable/button_bg"
                android:text="Login"
                android:textColor="@color/white" />
    
        </LinearLayout>
    
        <TextView
            android:id="@+id/tv_forgotPassword"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp"
            android:layout_marginEnd="30dp"
            android:layout_marginRight="30dp"
            android:text="Forgot Password?"
            android:textColor="@color/textDescription"
            android:textSize="13sp"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toBottomOf="@id/linlay_inputs" />
    
    
        <TextView
            android:id="@+id/tv_register"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Don't have an account?Register Here"
            android:textColor="@color/textHeadline"
            android:textSize="13sp"
            android:gravity="center"
            android:layout_marginBottom="30dp"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintBottom_toBottomOf="parent"
            />
    
    </androidx.constraintlayout.motion.widget.MotionLayout>

这里有一点值得说一下，我们使用MotionLayout这个布局来实现动画效果，这个布局平时不太常见，它其实是属于ConstraintLayout的子类，所以它是一种布局类型，但是它能够为布局属性添加动画效果，是开发者实现动画效果的另一个新的选择。

目前所实现的静态效果如下：

![f60f96151bec41f4b0f825b7c5585c30.png][]

接下来会通过资源文件来实现动态效果

#### 二、实现动态效果 ####

**1、在res目录下新建xml文件资源目录**

![dcc81af8573b4cbc98a6ca121b38d0dc.png][]

**2、在xml目录下新建xml资源文件（motion\_scene\_splash.xml）**

<?xml version="1.0" encoding="utf-8"?>
    <MotionScene xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:motion="http://schemas.android.com/apk/res-auto">
    
        <Transition
            motion:autoTransition="animateToEnd"
            motion:constraintSetEnd="@layout/activity_login"
            motion:constraintSetStart="@layout/activity_splash"
            motion:duration="5000">
    
            <KeyFrameSet>
    
                <KeyPosition
                    motion:framePosition="65"
                    motion:keyPositionType="deltaRelative"
                    motion:motionTarget="@+id/imgView_logo"
                    motion:percentX="0"
                    motion:percentY="0" />
    
                <KeyPosition
                    motion:framePosition="65"
                    motion:keyPositionType="deltaRelative"
                    motion:motionTarget="@+id/imgView_logo_rays"
                    motion:percentX="0"
                    motion:percentY="0" />
    
                <KeyPosition
                    motion:framePosition="75"
                    motion:keyPositionType="deltaRelative"
                    motion:motionTarget="@+id/imgView_logo"
                    motion:percentX="1"
                    motion:percentY="1" />
    
                <KeyPosition
                    motion:framePosition="75"
                    motion:keyPositionType="deltaRelative"
                    motion:motionTarget="@+id/imgView_logo_rays"
                    motion:percentX="1"
                    motion:percentY="1" />
    
                <KeyAttribute
                    android:rotation="0"
                    motion:framePosition="0"
                    motion:motionTarget="@+id/imgView_logo_rays" />
    
                <KeyAttribute
                    android:rotation="180"
                    motion:framePosition="85"
                    motion:motionTarget="@+id/imgView_logo_rays" />
    
                <KeyPosition
                    motion:framePosition="75"
                    motion:keyPositionType="deltaRelative"
                    motion:motionTarget="@+id/imgView_cloudLeft"
                    motion:percentX="0"
                    motion:percentY="0" />
    
                <KeyPosition
                    motion:framePosition="75"
                    motion:keyPositionType="deltaRelative"
                    motion:motionTarget="@+id/imgView_cloudRight"
                    motion:percentX="0"
                    motion:percentY="0" />
    
                <KeyPosition
                    motion:framePosition="85"
                    motion:keyPositionType="deltaRelative"
                    motion:motionTarget="@+id/imgView_cloudLeft"
                    motion:percentX="1"
                    motion:percentY="1" />
    
                <KeyPosition
                    motion:framePosition="85"
                    motion:keyPositionType="deltaRelative"
                    motion:motionTarget="@+id/imgView_cloudRight"
                    motion:percentX="1"
                    motion:percentY="1" />
    
                <KeyAttribute
                    motion:motionTarget="@+id/linlay_inputs"
                    android:alpha="0"
                    motion:framePosition="75"/>
    
                <KeyAttribute
                    motion:motionTarget="@+id/linlay_inputs"
                    android:alpha="1"
                    motion:framePosition="85"/>
    
                <KeyAttribute
                    motion:motionTarget="@+id/tv_forgotPassword"
                    android:alpha="0"
                    motion:framePosition="75"/>
    
                <KeyAttribute
                    motion:motionTarget="@+id/tv_forgotPassword"
                    android:alpha="1"
                    motion:framePosition="85"/>
    
                <KeyPosition
                    motion:framePosition="75"
                    motion:percentY="0"
                    motion:percentX="0"
                    motion:motionTarget="@+id/tv_register"/>
    
                <KeyPosition
                    motion:framePosition="85"
                    motion:percentY="1"
                    motion:percentX="1"
                    motion:motionTarget="@+id/tv_register"/>
            </KeyFrameSet>
    
        </Transition>
    
    </MotionScene>

**3、需要用到的全部资源文件**

**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=".MainActivity"
        tools:ignore="MissingConstraints">
    
        <ImageView
            android:id="@+id/imgView_logo"
            android:layout_width="130dp"
            android:layout_height="130dp"
            android:layout_marginTop="80dp"
            android:scaleType="centerInside"
            android:src="@drawable/icon"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />
    
        <ImageView
            android:id="@+id/imgView_logo_rays"
            android:layout_width="130dp"
            android:layout_height="130dp"
            android:layout_marginTop="80dp"
            android:rotation="0"
            android:scaleType="centerInside"
            android:src="@drawable/icon2"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />
    
        <ImageView
            android:id="@+id/imgView_cloudLeft"
            android:layout_width="130dp"
            android:layout_height="130dp"
            android:layout_marginTop="16dp"
            android:scaleType="centerInside"
            android:src="@drawable/cloud"
            app:layout_constraintTop_toTopOf="parent"
            app:tint="@color/lightGrey" />
    
        <ImageView
            android:id="@+id/imgView_cloudRight"
            android:layout_width="130dp"
            android:layout_height="130dp"
            android:layout_marginTop="100dp"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            android:scaleType="centerInside"
            android:src="@drawable/cloud"
            app:tint="@color/lightGrey"
            />
    
        <LinearLayout
    
            android:id="@+id/linlay_inputs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginStart="30dp"
            android:layout_marginLeft="30dp"
            android:layout_marginEnd="30dp"
            android:layout_marginRight="30dp"
            android:gravity="center"
            android:layout_marginTop="10dp"
            android:orientation="vertical"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/imgView_cloudRight">
    
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:fontFamily="sans-serif-medium"
                android:text="Welcome Back"
                android:textColor="@color/textHeadline"
                android:textSize="20sp" />
    
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:fontFamily="sans-serif"
                android:text="Sign in to continue"
                android:textColor="@color/textDescription"
                android:textSize="14sp" />
    
            <EditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="30dp"
                android:background="@drawable/edittext_bg"
                android:drawableStart="@drawable/ic_baseline_email_24"
                android:drawableLeft="@drawable/ic_baseline_email_24"
                android:drawablePadding="16dp"
                android:hint="Email"
                android:inputType="textEmailAddress"
                android:padding="16dp"
                android:textSize="14sp" />
    
            <EditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="20dp"
                android:background="@drawable/edittext_bg"
                android:drawableStart="@drawable/ic_baseline_lock_24"
                android:drawableLeft="@drawable/ic_baseline_lock_24"
                android:drawableEnd="@drawable/ic_baseline_visibility_24"
                android:drawableRight="@drawable/ic_baseline_visibility_24"
                android:drawablePadding="16dp"
                android:hint="Password"
                android:inputType="textPassword"
                android:padding="16dp"
                android:textSize="14sp" />
    
            <Button
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="30dp"
                android:background="@drawable/button_bg"
                android:text="Login"
                android:textColor="@color/white" />
    
        </LinearLayout>
    
        <TextView
            android:id="@+id/tv_forgotPassword"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp"
            android:layout_marginEnd="30dp"
            android:layout_marginRight="30dp"
            android:text="Forgot Password?"
            android:textColor="@color/textDescription"
            android:textSize="13sp"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toBottomOf="@id/linlay_inputs" />
    
    
        <TextView
            android:id="@+id/tv_register"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Don't have an account?Register Here"
            android:textColor="@color/textHeadline"
            android:textSize="13sp"
            android:gravity="center"
            android:layout_marginBottom="30dp"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintBottom_toBottomOf="parent"
            />
    </androidx.constraintlayout.widget.ConstraintLayout>

**activity\_splash.xml**

**button\_bg.xml (按钮背景)**

<?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android"
        android:shape="rectangle">
    
        <solid android:color="@color/colorPrimary" />
    
        <corners android:radius="10dp" />
    
    </shape>

给按钮设置了颜色属性和圆角属性，让按钮更加好看圆润。

**edittext\_bg.xml（输入框背景）**

<?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android"
        android:shape="rectangle">
    
        <solid android:color="@color/lightGrey" />
    
        <corners android:radius="10dp" />
    
    </shape>

**用到的图片资源如下：**

![3dbcdf4eb9ab4d38a6e314723bdbec81.png][]![0d12dedceb574e7fa3b30d7678f4b1cf.png][]![0def0494cd34456293d1b4138f763885.png][]

## 想要项目源码的可以收藏点赞，然后私信我即可！！！，私信必回！！！ ##

[f60f96151bec41f4b0f825b7c5585c30.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/d2dce68f137c4eac8e92128e635d30f3.png
[dcc81af8573b4cbc98a6ca121b38d0dc.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/8faca2a0564647f7b206a2b87795dd00.png
[3dbcdf4eb9ab4d38a6e314723bdbec81.png]: https://img-blog.csdnimg.cn/3dbcdf4eb9ab4d38a6e314723bdbec81.png
[0d12dedceb574e7fa3b30d7678f4b1cf.png]: https://img-blog.csdnimg.cn/0d12dedceb574e7fa3b30d7678f4b1cf.png
[0def0494cd34456293d1b4138f763885.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/a02b07df643e432ebb3876347bc2a269.png