Android Studio 登录页面

       搭建一个简单的带有科技感的页面，想了一下，如何能做的在炫酷点，于是我就想着做一个有动态效果的登录页面。

       首先找一个带有动态效果的背景图片，以此图片作为背景。

放入后，登录页面搭建后，会发现这个gif动图会变成一个静态图显示，不会有动态效果，这个时候就需要引入一个插件，来显示动图效果了。

直接引入依赖就行行了，在build.gradle(:app）的 dependencies添加。

dependencies {

    implementation 'androidx.appcompat:appcompat:1.2.0'
    implementation 'com.google.android.material:material:1.2.1'
    implementation 'androidx.constraintlayout:constraintlayout:2.0.1'
    implementation 'androidx.legacy:legacy-support-v4:1.0.0'

    testImplementation 'junit:junit:4.+'
    androidTestImplementation 'androidx.test.ext:junit:1.1.2'
    androidTestImplementation 'androidx.test.espresso:espresso-core:3.3.0'


    implementation 'pl.droidsonroids.gif:android-gif-drawable:1.2.+'//jif图片插件
}

接下来就是界面代码：

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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"

    tools:context=".MainActivity">

    <pl.droidsonroids.gif.GifImageView

        android:layout_width="match_parent"
        android:layout_height="match_parent"

        android:background="@drawable/loginback">

    </pl.droidsonroids.gif.GifImageView>
  
<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <ImageView

        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="120px"
        android:layout_centerHorizontal="true"
        android:alpha="0.9"
        android:background="@drawable/logo"/>
    <EditText
        android:layout_centerHorizontal="true"
        android:id="@+id/et_1"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:textSize="16sp"
        android:layout_marginRight="60px"
        android:layout_marginLeft="60px"
        android:hint="用户名"
        android:background="@drawable/login_userorpassward_css"
        android:paddingLeft="10dp"
        android:paddingRight="10dp"
        android:layout_marginTop="200dp"
        android:drawableLeft="@drawable/username"
        android:drawablePadding="10dp"
        />


    <EditText
        android:layout_centerHorizontal="true"
        android:id="@+id/et_2"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:textSize="16sp"
        android:hint="密码"
        android:layout_marginLeft="60px"
        android:layout_marginRight="60px"
        android:inputType="textPassword"
        android:layout_below="@id/et_1"
        android:background="@drawable/login_userorpassward_css"
        android:layout_marginTop="50dp"
        android:paddingLeft="10dp"
        android:paddingRight="10dp"
        android:drawableLeft="@drawable/userpassward"
        android:drawablePadding="10dp"
        />
    <Button
        android:id="@+id/btn_start"
        android:layout_below="@+id/et_2"
        android:layout_marginTop="200px"
        android:layout_marginLeft="60px"
        android:layout_marginRight="60px"
        android:background="@drawable/login_loginbtn_css"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="登录"
        android:textSize="22dp"
        android:textColor="#b3FFFFFF"
        />

</RelativeLayout>


</FrameLayout>

给用户名和密码输入框添加一个xml样式 ：login_userorpassward_css  

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true">
        <shape>
            <solid android:color="#e6000080"/>
            <stroke android:width="1dip" android:color="#000080" />
            <corners android:radius="5dp"/>
        </shape>
    </item>
    <item android:state_pressed="false">
        <shape>
            <solid android:color="#b3000080"/>
            <stroke android:width="1dip" android:color="#000080" />
            <corners android:radius="5dp"/>
        </shape>
    </item>
</select>

跑起来看看效果：