title: Android开发第四天
search: 2024-03-22
tags:
- Android开发
Android开发简易登录界面
文章目录
- Android开发简易登录界面
- 一、定义`style`样式
- 二、完成 `activity_main.xml` 界面具体设计
- 三、代码简述
背景：在初学 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，位于屏幕底部，带有文字“提交”，用于用户完成表单并发送数据至服务器或执行相应的提交操作。
- 一个细线
整体上，这段代码构建了一个注册界面，允许用户通过多种方式进行注册，并提供了填写个人信息如姓名、邮箱、密码、性别以及选择兴趣爱好的功能。最后，用户可以通过点击提交按钮来完成注册流程。
![[NKCTF 2024]web解析](https://img-blog.csdnimg.cn/direct/30d11b0ba6c145d9819bf9d169a944eb.png)
