如何使用Android Studio开发用户登录界面

Posted 2023-03-06

一个登录界面需要有：

登录、注册按钮（Button）

用户名、密码输入框（TextView，EditView）

用户协议连接

忘记密码按钮

想好的有哪些控件后，开始设计界面大概样式，比如这个样子：

知道了使用那些控件，画好了设计图，接下来就是创建工程：

打开android Studio。点击File 》New 》 NewProject 。



输入项目名称和项目路径。



一直点击Next，最后点击Finsh。

展开res文件夹，找到MainActivity对应的layout.xml。



在xml中按照上面的思路输入代码：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="

    xmlns:tools="

    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@mipmap/login_bg"
    android:focusable="true"
    android:focusableInTouchMode="true"
    android:orientation="vertical"
    tools:context=".login.LoginActivity">

  
        <!--  最外层套一个ScrollView用来保证输入法弹出时不挡住按钮-->
    <ScrollView
        android:id="@+id/askScrollView"
        android:layout_width="match_parent"
        android:layout_height="0px"
        android:layout_weight="1"
        android:scrollbarStyle="outsideOverlay"
        android:scrollingCache="false">

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

            <!--  为了美观加了图片-->
            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_horizontal"
                android:layout_marginBottom="50px"
                android:layout_marginTop="50px"
                android:src="@mipmap/login_logo" />

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginLeft="30px"
                android:layout_marginRight="30px"
                android:orientation="horizontal">

                <!--  输入用户名的地方->
                <EditText
                    android:id="@+id/et_userName"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_margin="20px"
                    android:background="@drawable/login_edit_shape"
                    android:drawableLeft="@mipmap/login_name"
                    android:drawablePadding="10px"
                    android:gravity="center_vertical"
                    android:hint="@string/login_user_name"
                    android:maxLength="16"
                    android:paddingBottom="10px"
                    android:paddingLeft="20px"
                    android:paddingTop="10px"
                    android:singleLine="true"
                    android:textColor="@color/white"
                    android:textColorHint="@color/white" />
            </LinearLayout>

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginLeft="30px"
                android:layout_marginRight="30px"
                android:layout_marginTop="10px"
                android:orientation="horizontal">

                <!--  输入密码的地方-->
                <EditText
                    android:id="@+id/et_userPwd"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_margin="20px"
                    android:background="@drawable/login_edit_shape"
                    android:drawableLeft="@mipmap/login_pwd"
                    android:drawablePadding="10px"
                    android:gravity="center_vertical"
                    android:hint="@string/login_user_pwd"
                    android:maxLength="12"
                    android:inputType="textPassword"
                    android:paddingBottom="10px"
                    android:paddingLeft="20px"
                    android:paddingTop="10px"
                    android:singleLine="true"
                    android:textColor="@color/white"
                    android:textColorHint="@color/white" />
            </LinearLayout>

            <Button
                android:id="@+id/denglu"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginLeft="40px"
                android:layout_marginRight="40px"
                android:layout_marginTop="80px"
                android:background="@drawable/login_btn_selector"
                android:text="@string/login_denglu"
                android:textColor="@color/login_btn"
                android:textSize="20sp" />

            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginLeft="40px"
                android:layout_marginRight="40px"
                android:layout_marginTop="20px">

                <!--  忘记密码-->
                <TextView
                    android:id="@+id/zhuce"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="@string/logon_zhuce"
                    android:textColor="@color/login_text"
                    android:textSize="17sp" />

                <!--  注册-->
                <TextView
                    android:id="@+id/reset"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_alignParentRight="true"
                    android:text="@string/forget_pwd"
                    android:textColor="@color/login_text"
                    android:textSize="17sp" />
            </RelativeLayout>

        </LinearLayout>
    </ScrollView>

</LinearLayout>

这是基本的登录界面代码，实现了上面的设计图。在as中预览：

安卓登录界面就写完了。

参考技术A 　　项目的前提是已经将基本的运行环境及sdk都已经安装好了，读者可自行百度环境配置相关内容，本文不再赘述。右键点击new-->Module，Module相当于新建了一个项目。

　　选择Android Application，点击next

　　将My Module 和app改成自己项目相应的名字，同时选择支持的Android版本

　　这一步选择Blank Activity,自己手动编写登录界面，而不依赖系统内置的Login Activity，一直点击next，最后点击finish就完成了项目的创建

　　在project下可以看到出现了自己刚才创建的login项目

　　展开res/layout,点击打开activity_main.xml文件，在这个文件里咱们将完成登录界面的编写

　　这是初始的主界面，还没有经过咱们编写的界面，Android Studio有一个很强大的预览功能，相当给力

　　咱们将activity_main.xml的代码替换成如下代码：
　　<TableLayout xmlns:android="http。//schemas。android。com/apk/res/android"
　　android:layout_width="fill_parent"
　　android:layout_height="fill_parent"
　　android:gravity="center_vertical"
　　android:stretchColumns="0,3">
　　<TableRow>
　　<TextView />
　　<TextView
　　android:text="账 号："
　　android:layout_width="wrap_content"
　　android:layout_height="wrap_content"
　　android:textSize="24px"
　　/>
　　<EditText
　　android:id="@+id/account"
　　android:layout_width="wrap_content"
　　android:layout_height="wrap_content"
　　android:textSize="24px"
　　android:minWidth="220px"/>
　　<TextView />
　　</TableRow>
　　<TableRow android:layout_marginTop="20px">
　　<TextView />
　　<TextView
　　android:text="密 码："
　　android:layout_width="wrap_content"
　　android:layout_height="wrap_content"

　　/>
　　<EditText
　　android:id="@+id/pwd"
　　android:layout_width="wrap_content"
　　android:layout_height="wrap_content"
　　android:minWidth="220px"
　　android:textSize="24px"
　　android:inputType="textPassword"/>
　　<TextView />
　　</TableRow>
　　<TableRow android:layout_marginTop="20px">
　　<TextView />
　　<Button
　　android:id="@+id/login"
　　android:text="登录"
　　android:layout_width="wrap_content"
　　android:layout_height="wrap_content"
　　/>
　　<Button
　　android:id="@+id/quit"
　　android:text="退出"
　　android:layout_width="wrap_content"
　　android:layout_height="wrap_content"/>
　　<TextView />
　　</TableRow>
　　</TableLayout>

　　使用Android 手机进行测试，大功告成本回答被提问者采纳