---

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

• 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"?>
<RelativeLayoutxmlns: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"><LinearLayoutandroid:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"><TextViewandroid: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"><TextViewstyle="@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"/><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:gravity="center"android:orientation="horizontal"android:padding="15dp"><ImageViewandroid: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="名字"/><EditTextandroid: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。以下是代码中各组件的框架解释：

1. 根布局 RelativeLayout：

   • 包含整个屏幕的布局，并设置了宽度和高度为父容器（match_parent），即全屏显示。
   • 背景引用了资源@drawable/gg。

2. 内部第一个LinearLayout：

   • 垂直方向排列子视图。
   • 含有以下组件：
     • TextView：标题栏，居中显示文字“注册”。
     • 一个水平排列的LinearLayout，包含两个TextView和一个分割线View（vLine样式），分别代表两种社交账号登录方式（QQ和微信）。
     • 分割线View（hLine样式）。
     • 一个包含ImageView和TextView的LinearLayout，提示用户使用电子邮件注册。
     • 更多的分割线和垂直排列的LinearLayouts，分别对应姓名、邮箱、密码的输入框，每个输入框都包括一个标签（TextView）和一个实际输入控件（EditText）。
     • 性别选择部分：一个RadioGroup内含两个RadioButton，分别代表男女选项。
     • 兴趣爱好选择部分：一个TextView提示选择兴趣爱好，紧接着是一个包含四个CheckBox的LinearLayout，用于勾选用户的兴趣（唱歌、跳舞、阅读、下棋）。
     • 最后一个分割线View。

3. 底部元素：

   • 一个细线View (v_line)，位于提交按钮上方，作为视觉分隔。
   • 一个Button元件，id为btn_submit，位于屏幕底部，带有文字“提交”，用于用户完成表单并发送数据至服务器或执行相应的提交操作。

整体上，这段代码构建了一个注册界面，允许用户通过多种方式进行注册，并提供了填写个人信息如姓名、邮箱、密码、性别以及选择兴趣爱好的功能。最后，用户可以通过点击提交按钮来完成注册流程。