Android studio app登录界面设计

Posted 2023-03-30 秋天的方太

在android studio中实现基本登录界面设计。实现效果如下：

（1）新建
本界面通过三个Linear layout（vertical）来实现
新建项目，其.xml文件中 design界面默认如下：

右键【ConstraintLayout】——【Convert View…】——【LinearLayout】此时的LinearLayout默认为水平方向，我们将右侧【Attribute】中【orientation】改为[vertical]。
（2）添加线性布局

直接拖动即可

（3）第一部分-登录
添加[text view]至布局

在右侧设置一系列属性，其中【gravity】控制文本内容的相对位置，【padding Bottom】控制文本至下边界距离。且选择适当的字号，背景色等。本例属性设置如下：

效果如图：
（4）第二部分-用户名、密码
将【text】中【plaintext】、【Password】、【Text view】拖入页面中。

对于【Plaintext】，删除[text]中的内容，找到【hint】输入“请输入用户名”。【hint】为该文本框设置提示信息。【layout—margin】设置文本框上下左右边界距离。
具体属性设置及结果如图：

【忘记密码】居右，设置其【layout—gravity】为【right】即可。
最后，选中整个第二部分的【Linear layout】设置其【layout—height】为【wrap-content】。
（5）第三部分-登录、注册按钮。
向布局中添加两个【button】按钮，根据【layout-margin】属性调整按钮位置；【text】【text color】【text size】设置按钮名称，字体颜色和大小；【background】属性设置背景色。
最终结果如图所示：

此外 【注册】按钮边框色的设置，需在右侧视图中【drawable】右键【new】–【drawable resource file】建立一个xml文件，文件内容

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
    <solid android:color="#ffffff" />
    <stroke android:width="1dp" android:color="#65c294"/>//边框粗细、颜色
</shape>

下附本界面设计全部代码：

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".SigninActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <TextView
            android:id="@+id/textView"
            android:layout_width="match_parent"
            android:layout_height="80dp"
            android:background="#65C294"
            android:gravity="bottom|center"
            android:paddingBottom="15dp"
            android:text="登录"
            android:textColor="#FFFFFB"
            android:textSize="24sp" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <EditText
            android:id="@+id/Username"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="30dp"
            android:layout_marginTop="40dp"
            android:layout_marginRight="30dp"
            android:layout_marginBottom="20dp"
            android:ems="10"
            android:hint="请输入用户名"
            android:inputType="textPersonName"
            android:paddingLeft="20dp"
            android:paddingRight="20dp" />

        <EditText
            android:id="@+id/Password"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="30dp"
            android:layout_marginRight="30dp"
            android:ems="10"
            android:hint="请输入密码"
            android:inputType="textPassword"
            android:paddingLeft="20dp"
            android:paddingRight="20dp" />


        <TextView
            android:id="@+id/Forgetpassword"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="right"
            android:layout_marginTop="10dp"
            android:layout_marginRight="25dp"
            android:text="忘记密码" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <Button
            android:id="@+id/Sign_in"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="30dp"
            android:layout_marginTop="30dp"
            android:layout_marginRight="30dp"
            android:layout_marginBottom="20dp"
            android:background="#65C294"
            android:text="登 录"
            android:textColor="#FFFFFB"
            android:textSize="18sp" />

        <Button
            android:id="@+id/Sign_up"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="30dp"
            android:layout_marginRight="30dp"
            android:background="#FFFFFB"
            android:text="注 册"
            android:textColor="#65C294"
            android:textSize="18sp" />
    </LinearLayout>
</LinearLayout>

若设置【注册】按钮的边框色，则该<Button中android:background="#FFFFFB"改为android:background="@drawable/boundline"。其中@drawable/boundline即为新建.xml文件。