Android开发简易登录界面_android登录注册页面

作者：从前慢现在也慢 | 2024-06-11 22:13:50

踩

android登录注册页面

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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

自定义了几个样式，后序我打算用来放在文本框（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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204

三、代码简述

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，位于屏幕底部，带有文字“提交”，用于用户完成表单并发送数据至服务器或执行相应的提交操作。

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

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/从前慢现在也慢/article/detail/704985