Android开发简易登录界面

最新推荐文章于 2024-04-23 17:25:59 发布

枫飘长安

最新推荐文章于 2024-04-23 17:25:59 发布

阅读量1.2k

点赞数 35

文章标签： android

本文链接：https://blog.csdn.net/weixin_62636014/article/details/137037178

版权

title: Android开发第四天
search: 2024-03-22
tags:

Android开发

Android开发简易登录界面

文章目录

Android开发简易登录界面

背景 ：在初学 android 开发的时候，为了尽量熟悉学会基础的 android 开发控件和一些基本语言，写的一个简易登录界面，锻炼代码手感

一、定义`style`样式

为了简化代码，我们先在 styles.xml 中定义样式，后面遇到相同的代码就能够省下不少代码，类似于前端的组件，写好了组件，可以进行复用

    <style name="tvOne">
        <item name ="android:layout_width">0dp</item>
        <item name="android:layout_height">match_parent</item>
        <item name="android:layout_weight">1</item>
        <item name="android:gravity">center_horizontal</item>
        <item name="android:textColor">@android:color/white</item>
        <item name="android:textSize">15dp</item>
    </style>

    <style name="tvTwo">
        <item name="android:layout_width">wrap_content</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:layout_marginLeft">20dp</item>
        <item name="android:textSize">30dp</item>
        <item name="android:textColor">@android:color/white</item>
    </style>

    <style name="vLine" >
        <item name="android:layout_width">1dp</item>
        <item name="android:layout_height">match_parent</item>
        <item name="background">@android:color/white</item>
    </style>

    <style name="hLine" >
        <item name="android:layout_width">match_parent</item>
        <item name="android:layout_height">1dp</item>
        <item name="background">@android:color/holo_red_dark</item>
    </style>

    <style name="etOne">
        <item name="android:layout_width">match_parent</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:layout_marginLeft"> 30dp</item>
        <item name="background">@null</item>
        <item name="android:textColor">@android:color/white</item>
    </style>

自定义了几个样式，后序我打算用来放在文本框（TextView）和分割线（View）中，以及一个输入框（EditText）

打算做成的登录界面框架如下：

在这里插入图片描述

二、完成 `activity_main.xml` 界面具体设计

代码具体的实现没有什么好说的，就是使用基础的样式设计，完成这个代码的目的也仅仅是为了锻炼一下快捷键，让自己熟悉一下 android 开发的基础语法

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/gg"
        tools:context=".MainActivity">

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

        <TextView
                android:id="@+id/tv_title"
                android:layout_width="match_parent"
                android:layout_height="50dp"
                android:background="@color/black"
                android:gravity="center"
                android:text="注册"
                android:textColor="@color/white"
                android:textSize="20sp"
        />

        <LinearLayout android:layout_width="match_parent" android:layout_height="130dp"
                      android:orientation="horizontal">

            <TextView
                    style="@style/tvOne"
                    android:drawableTop="@drawable/ic_launcher_foreground"
                    android:text="用QQ注册"/>

            <View style="@style/vLine"/>

            <TextView style="@style/tvOne"
                      android:drawableTop="@drawable/ic_launcher_foreground"
                      android:text="用微信注册"/>

        </LinearLayout>

        <View style="@style/hLine"/>

        <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:orientation="horizontal"
                android:padding="15dp">

            <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="match_parent"
                    android:src="@mipmap/background"/>

            <TextView android:layout_width="wrap_content" android:layout_height="30dp"
                      android:layout_marginLeft="15dp"
                      android:text="请使用电子邮箱注册"
                      android:textColor="@color/white"
                      android:textSize="20dp"/>
        </LinearLayout>

        <View style="@style/hLine"/>

        <LinearLayout android:gravity="center"
                      android:layout_width="match_parent"
                      android:layout_height="wrap_content"
                      android:orientation="horizontal"
                      android:padding="15dp">
            <TextView style="@style/tvTwo"
                      android:text="名字"/>

            <EditText
                    android:id="@+id/et_name"
                    android:minHeight="48dp"
                    style="@style/etOne" android:hint="YourName"/>
        </LinearLayout>

        <View style="@style/hLine"/>

        <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content"
                      android:gravity="center"
                      android:orientation="horizontal"
                      android:padding="15dp">

            <TextView style="@style/tvTwo"
                      android:text="邮箱"/>

            <EditText android:id="@+id/et_email"
                      android:hint="YourEmail"
                      style="@style/etOne" android:minHeight="48dp"/>

        </LinearLayout>

        <View style="@style/hLine"/>

        <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content"
                      android:orientation="horizontal"
                      android:padding="15dp">
            <TextView style="@style/tvTwo"
                      android:text="密码"/>

            <EditText android:id="@+id/et_password"
                      style="@style/etOne"
                      android:minHeight="48dp"
                      android:hint="YourPassword"
                      android:inputType="textPassword"/>
        </LinearLayout>

        <View style="@style/hLine"/>

        <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content"
                      android:orientation="horizontal"
                      android:padding="15dp">

            <TextView style="@style/tvTwo"
                      android:layout_gravity="center"
                      android:text="性别"/>

            <RadioGroup android:layout_width="match_parent" android:layout_height="wrap_content"
                        android:id="@+id/rg_sex"
                        android:layout_marginLeft="50dp"
                        android:orientation="horizontal">
                <RadioButton android:layout_width="wrap_content" android:layout_height="wrap_content"
                             android:id="@+id/rb_boy"
                             android:text="男"
                             android:textColor="@color/material_on_primary_emphasis_high_type"
                             android:textSize="30sp"/>
                <RadioButton android:layout_width="wrap_content" android:layout_height="wrap_content"
                             android:id="@+id/rb_girl"
                             android:text="女"
                             android:layout_marginLeft="30dp"
                             android:textColor="@color/material_on_primary_emphasis_high_type"
                             android:textSize="30dp"/>
            </RadioGroup>

        </LinearLayout>

        <View style="@style/hLine"/>

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

            <TextView android:layout_width="wrap_content" android:layout_height="wrap_content"
                      android:text="请选择你的兴趣和爱好"
                      android:textColor="@color/white"
                      android:textSize="20dp"
                      android:layout_marginLeft="20dp"
                      android:textStyle="bold"/>

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

                <CheckBox android:layout_width="wrap_content" android:layout_height="wrap_content"
                          android:id="@+id/cb_sing"
                          android:text="唱歌"
                          android:layout_marginLeft="10dp"
                          android:textColor="@color/white"
                          android:textSize="20dp"/>

                <CheckBox android:layout_width="wrap_content" android:layout_height="wrap_content"
                          android:id="@+id/cb_dance"
                          android:text="跳舞"
                          android:layout_marginLeft="10dp"
                          android:textColor="@color/white"
                          android:textSize="20dp"/>

                <CheckBox android:layout_width="wrap_content" android:layout_height="wrap_content"
                          android:id="@+id/cb_read"
                          android:text="阅读"
                          android:layout_marginLeft="10dp"
                          android:textColor="@color/white"
                          android:textSize="20dp"/>

                <CheckBox android:layout_width="wrap_content" android:layout_height="wrap_content"
                          android:id="@+id/cb_chess"
                          android:text="下棋"
                          android:layout_marginLeft="10dp"
                          android:textColor="@color/white"
                          android:textSize="20dp"/>
                
            </LinearLayout>
            
        </LinearLayout>
        
        <View style="@style/hLine"/>
        
    </LinearLayout>
    
    <View android:layout_width="match_parent" android:layout_height="1dp"
          android:id="@+id/v_line"
          android:layout_above="@+id/btn_submit"
          android:background="@android:color/darker_gray"/>
    
    <Button android:layout_width="match_parent" android:layout_height="50dp"
            android:id="@+id/btn_submit"
            android:layout_alignParentBottom="true"
            android:gravity="center"
            android:text="提交"
            android:textSize="20dp"
            android:textStyle="bold"/>

</RelativeLayout>

三、代码简述

avtivity_main.xml代码片段是一个用于Android应用的XML布局文件，它定义了MainActivity的用户界面结构。整个布局采用RelativeLayout作为根布局，并且设置了背景为@drawable/gg。以下是代码中各组件的框架解释：

根布局 RelativeLayout：
- 包含整个屏幕的布局，并设置了宽度和高度为父容器（match_parent），即全屏显示。
- 背景引用了资源@drawable/gg。
内部第一个LinearLayout：
- 垂直方向排列子视图。
- 含有以下组件：
  - TextView：标题栏，居中显示文字“注册”。
  - 一个水平排列的LinearLayout，包含两个TextView和一个分割线View（vLine样式），分别代表两种社交账号登录方式（QQ和微信）。
  - 分割线View（hLine样式）。
  - 一个包含ImageView和TextView的LinearLayout，提示用户使用电子邮件注册。
  - 更多的分割线和垂直排列的LinearLayouts，分别对应姓名、邮箱、密码的输入框，每个输入框都包括一个标签（TextView）和一个实际输入控件（EditText）。
  - 性别选择部分：一个RadioGroup内含两个RadioButton，分别代表男女选项。
  - 兴趣爱好选择部分：一个TextView提示选择兴趣爱好，紧接着是一个包含四个CheckBox的LinearLayout，用于勾选用户的兴趣（唱歌、跳舞、阅读、下棋）。
  - 最后一个分割线View。
底部元素：
- 一个细线View (v_line)，位于提交按钮上方，作为视觉分隔。
- 一个Button元件，id为btn_submit，位于屏幕底部，带有文字“提交”，用于用户完成表单并发送数据至服务器或执行相应的提交操作。