Android の非常に優れた動的ログイン インターフェイス (詳細なコード付き)

モバイル 2023-06-24 19:11:48 訪問数: null

まず、動的効果を実証します

QQ ビデオ 20220819164103

ビデオ効果から、この動的ログイン インターフェースは非常に見栄えがします。この動的ログイン インターフェースの作成方法を紹介していきます。

1. まず静的ページを書き込みます

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>

ここで言及する価値があることが 1 つあります。アニメーション効果を実現するために MotionLayout レイアウトを使用します。このレイアウトはあまり一般的ではありません。実際には ConstraintLayout のサブクラスであるため、レイアウト タイプですが、レイアウト プロパティにアニメーション効果を追加できます。これは、開発者がアニメーション効果を実現するためのもう 1 つの新しいオプションです。

現在実装されている静的効果は次のとおりです。

 次に、リソースファイルを通じてダイナミックなエフェクトを実現します。

2. ダイナミックな効果を実現

1. res ディレクトリの下に新しい XML ファイルのリソース ディレクトリを作成します

 2. 新しい XML リソース ファイル (motion_scene_splash.xml) を 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

<?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>

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>

使用した画像リソースは以下の通りです。

 プロジェクトのソース コードが必要な場合は、「いいね」を押してからプライベート メッセージを送ってください。！！, プライベートメッセージには必ず返信する必要があります。！！

おすすめ

転載: blog.csdn.net/m0_58941767/article/details/126427805
おすすめ
ランキング
Python 描画 3D 動的ヒストグラム コード チュートリアル
[vue3 共通エラー 5] Uncaught (in Promise) TypeError: xxx は関数ではありません
シンプルアップロードExcelファイルやデータベースにデータを追加
springboot における import アノテーションの役割
numpy 多维矩阵的维度交换
WMS システム - ウェーブ管理
Redis（7）マスター/スレーブレプリケーション
三北斗七星星座コアグローバルシステムの導入は完了です！グローバルネットワークを推進するために、
sql server语法——排序查询
続行することはできません立ち往生
アーカイブ
もっと
2024-05-16(24)
2024-05-15(5)
2024-05-14(9)
2024-05-13(8)
2024-05-12(27)
2024-05-11(31)
2024-05-10(33)
2024-05-09(30)
2024-05-08(18)
2024-05-07(34)

コードワールド

© 2018 codetd.com