Android程序登录界面设计

Android开发 专栏收录该内容
18 篇文章 0 订阅

刚刚学习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的使用。

  • 3
    点赞
  • 3
    评论
  • 33
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值