在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文件。

Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐