当前位置: 首页 > >

Android程序登录界面设计

发布时间:

刚刚学*Android开发,现在工作需要开发一个app的演示程序,首先就是要开发一个登录界面了。在网上找了很多材料,最后参考了博客中的登录界面设计方法:


blog.csdn.net/StayFoolish_Fan/article/details/51933563?locationNum=8


最终我设计的登录界面以及注册界面如图所示:


? ? ? ? ? ? ? ? ? ? ? ? ? ? ??


登录界面布局代码为:activity_login.xml




xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/activity_login"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
/>

android:id="@+id/login_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerInParent="true"
android:layout_below="@+id/toolbar"
android:focusable="true"
android:focusableInTouchMode="true"
>

android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/login_edit_pwd"
android:layout_margin="20dp"
>

android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="登录"
android:id="@+id/login_btn_login"
android:background="#545bcb"
android:textSize="20sp"
android:textColor="#ffffff"
android:layout_marginTop="52dp"
android:layout_marginRight="50dp"
android:layout_marginLeft="10dp"/>

android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="注册"
android:id="@+id/login_btn_register"
android:textColor="#ffffff"
android:background="#e52525"
android:textSize="20sp"
android:layout_marginTop="52dp"
android:layout_marginLeft="50dp"/>




android:layout_width="300dp"
android:layout_height="150dp"
android:id="@+id/logo"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:layout_alignWithParentIfMissing="false"
android:background="#ffffff"
android:src="@drawable/ca"/>

android:layout_width="400dp"
android:layout_height="60dp"
android:inputType="textPassword"
android:ems="10"
android:id="@+id/login_edit_pwd"
android:drawableLeft="@android:drawable/ic_lock_idle_lock"
android:hint="请输入您的密码"
android:layout_below="@+id/login_edit_account"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
/>

android:layout_width="400dp"
android:layout_height="60dp"
android:inputType="textPersonName"
android:id="@+id/login_edit_account"
android:drawableLeft="@android:drawable/ic_menu_myplaces"
android:hint="请输入您的用户名"
android:layout_below="@+id/logo"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_marginTop="20dp"
/>

android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/login_edit_pwd"
>

android:id="@+id/Login_Remember"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="记住密码"
android:layout_marginLeft="10dp"
android:checked="false"
android:textSize="15sp" />

android:id="@+id/login_fail_reason"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColor="#f71818"
android:textSize="20sp"
/>













注册界面布局代码:activity_register.xml




xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:id="@+id/activity_register"
android:layout_width="match_parent"
android:layout_height="match_parent"
>

android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
/>

android:drawableLeft="@android:drawable/ic_menu_myplaces"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="textPersonName"
android:ems="10"
android:id="@+id/resetpwd_edit_name"
android:hint="请输入您的用户名"
android:focusable="true"
android:focusableInTouchMode="true"
/>

android:drawableLeft="@android:drawable/ic_lock_idle_lock"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="textPassword"
android:ems="10"
android:id="@+id/resetpwd_edit_pwd_old"
android:hint="请输入您的密码"
/>



android:drawableLeft="@android:drawable/ic_lock_idle_lock"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="textPassword"
android:ems="10"
android:id="@+id/resetpwd_edit_pwd_new"
android:layout_centerHorizontal="true"
android:hint="请确认您的密码" />

android:id="@+id/register_fail_reason"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/resetpwd_edit_pwd_new"
android:textColor="#f71818"
android:textSize="25sp"/>

android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/register_fail_reason">

android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="确定"
android:id="@+id/register_btn_sure"
android:textSize="20sp"
android:background="#1cf718"
android:layout_marginTop="20dp"
android:layout_marginRight="20dp"/>
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="取消"
android:id="@+id/register_btn_cancel"
android:textSize="20sp"
android:background="#f71818"
android:layout_marginTop="20dp"
android:layout_marginLeft="20dp"/>












我这里没有使用Activity自带的标题栏,而是使用了更加牛逼一点的ToolBar,所以要想直接使用上面的界面代码的话还需要在工程中引入ToolBar的使用。



友情链接: