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>
跑起来看看效果:
.Net Core