Android程序登录界面设计

来源：互联网发布：出国留学知乎编辑：程序博客网时间：2024/05/09 23:50

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

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

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

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

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    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.support.v7.widget.Toolbar        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"        />    <RelativeLayout        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"        >        <LinearLayout            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:layout_below="@+id/login_edit_pwd"            android:layout_margin="20dp"            >            <Button                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"/>            <Button                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"/>        </LinearLayout>        <ImageView            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"/>        <EditText            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"            />        <EditText            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"           />        <LinearLayout            android:orientation="vertical"            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:layout_below="@+id/login_edit_pwd"            >            <CheckBox                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" />            <TextView                android:id="@+id/login_fail_reason"                android:layout_width="match_parent"                android:layout_height="wrap_content"                android:textColor="#f71818"                android:textSize="20sp"                />        </LinearLayout>    </RelativeLayout></RelativeLayout>

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

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    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.support.v7.widget.Toolbar        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"        />    <EditText        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"        />    <EditText        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="请输入您的密码"         />    <EditText        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="请确认您的密码" />    <TextView        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"/>    <LinearLayout        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:layout_below="@+id/register_fail_reason">        <Button            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"/>        <Button            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"/>    </LinearLayout></LinearLayout>

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

0 0