Android studio - UI 界面设计（仿问卷星登陆注册界面）

article/2025/9/28 23:04:01

1 先上效果图：

请添加图片描述

2 准备工作 建如下活动文件以及素材文件

在这里插入图片描述

3 代码实现

3.1 修改themes.xml、 themes.xml(night)文件 使自定义按钮组件起效果

在这里插入图片描述

	在框出区域加	.Bridge 两个 xml 文件都要加

在这里插入图片描述

	**自定义按钮的应用**

在这里插入图片描述

代码实现

btn_login.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"><solid android:color="#00000000"/><!--颜色 透明--><corners android:radius="30dp"/><!--标准圆角-->
</shape>

button_lg.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"><!--  灰色 圆角按钮  --><solid android:color="#CCCCCC"/><corners android:radius="120dip"/></shape>

button_res.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"><!--  蓝色圆角按钮  --><corners android:radius="120dip"/><solid android:color="#0099FF"/></shape>

3.2 实现布局

LinearLayout(线性布局) 和 RelativeLayout(相对布局)
3.2.1 登陆界面 activity_login.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"tools:context=".LoginActivity"android:orientation="vertical"><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:layout_marginTop="-10dp"><ImageViewandroid:layout_width="wrap_content"android:layout_height="180dp"android:src="@drawable/bj" /></LinearLayout><LinearLayoutandroid:layout_marginTop="-20dp"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_marginLeft="20dp"android:layout_marginRight="20dp"android:layout_gravity="bottom"android:showDividers="middle"><Buttonandroid:id="@+id/bt_lg"android:layout_width="200dp"android:layout_height="wrap_content"android:background="@drawable/btn_login"android:layout_weight="1"android:text="登陆"android:textSize="30dp"android:textColor="#03A9F4"android:textStyle="bold"android:letterSpacing="0.5"></Button><Buttonandroid:id="@+id/bt_reg"android:layout_width="200dp"android:layout_height="wrap_content"android:background="@drawable/btn_login"android:layout_weight="1"style="?android:attr/borderlessButtonStyle"android:text="注册"android:textSize="30dp"android:textColor="#999999"android:textStyle="bold"android:letterSpacing="0.5"/></LinearLayout><Viewandroid:layout_gravity="center"android:layout_width="350dp"android:layout_height="1dp"android:background="#000000" /><LinearLayoutandroid:layout_marginTop="15dp"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_marginLeft="20dp"android:layout_marginRight="20dp"><EditTextandroid:id="@+id/et_phone"android:layout_width="match_parent"android:layout_height="80dp"android:drawableLeft="@drawable/pn"android:inputType="phone"android:drawablePadding="10dp"android:hint="请输入手机号"android:letterSpacing="0.15"android:textSize="20sp" /></LinearLayout><RelativeLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:layout_marginLeft="20dp"android:layout_marginRight="20dp"><EditTextandroid:id="@+id/et_pwd"android:layout_width="match_parent"android:layout_height="80dp"android:drawableLeft="@drawable/pwd"android:drawablePadding="10dp"android:hint="请输入密码"android:inputType="numberPassword"android:letterSpacing="0.15"android:textSize="20sp" /><TextViewandroid:id="@+id/forget_pwd"android:layout_width="130dp"android:layout_height="80dp"android:layout_alignParentEnd="true"android:gravity="center_vertical"android:hint="忘记密码？"android:textColorHint="#3399FF"android:textSize="25sp"android:textStyle="bold" /></RelativeLayout><LinearLayoutandroid:layout_marginTop="30dp"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_marginLeft="30dp"android:layout_marginRight="30dp"><Buttonandroid:id="@+id/bt_lg1"android:layout_width="match_parent"android:layout_height="wrap_content"android:background="@drawable/button_lg"android:text="登 陆"android:textColor="#999999"android:textSize="25sp"android:textStyle="bold" /></LinearLayout><LinearLayoutandroid:layout_marginTop="45dp"android:layout_width="match_parent"android:layout_height="wrap_content"android:gravity="center_horizontal"><TextViewandroid:gravity="center_horizontal"android:layout_width="wrap_content"android:layout_height="95dp"android:drawableTop="@drawable/wx"android:drawablePadding="10dp"android:text="微信登陆"android:textColor="#C0C0C0"android:textStyle="bold"android:paddingLeft="15dp"android:paddingRight="15dp"/><TextViewandroid:gravity="center_horizontal"android:layout_width="wrap_content"android:layout_height="95dp"android:drawableTop="@drawable/qq"android:drawablePadding="10dp"android:text="QQ登陆"android:textColor="#C0C0C0"android:textStyle="bold"android:paddingLeft="15dp"android:paddingRight="15dp"/><TextViewandroid:gravity="center_horizontal"android:layout_width="wrap_content"android:layout_height="95dp"android:drawableTop="@drawable/phone"android:drawablePadding="10dp"android:text="短信登陆"android:textColor="#C0C0C0"android:textStyle="bold"android:paddingLeft="15dp"android:paddingRight="15dp"/></LinearLayout><LinearLayoutandroid:layout_marginTop="30dp"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="center_horizontal"><RadioButtonandroid:id="@+id/rb1"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="我同意问卷星"android:textColor="#CCCCCC"android:textStyle="bold"tools:ignore="TouchTargetSizeCheck" /><TextViewandroid:id="@+id/t1"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="《用户服务协议》"android:textColor="#3399FF"android:textStyle="bold"/><TextViewandroid:id="@+id/t2"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="和"android:textColor="#CCCCCC"android:textStyle="bold"/><TextViewandroid:id="@+id/t3"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="《隐私条款》"android:textColor="#3399FF"android:textStyle="bold"/></LinearLayout></LinearLayout>

	登陆效果图如下

请添加图片描述

3.2.2 注册界面 activity_register.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"tools:context=".RegisterActivity"android:orientation="vertical"><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:layout_marginTop="-10dp"><ImageViewandroid:layout_width="wrap_content"android:layout_height="180dp"android:src="@drawable/bj" /></LinearLayout><LinearLayoutandroid:layout_marginTop="-20dp"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_marginLeft="20dp"android:layout_marginRight="20dp"android:layout_gravity="bottom"android:showDividers="middle"><Buttonandroid:id="@+id/bt_lg"android:layout_width="200dp"android:layout_height="wrap_content"android:background="@drawable/btn_login"android:layout_weight="1"android:text="登陆"android:textSize="30dp"android:textColor="#999999"android:textStyle="bold"android:letterSpacing="0.5"></Button><Buttonandroid:id="@+id/bt_reg"android:layout_width="200dp"android:layout_height="wrap_content"android:background="@drawable/btn_login"android:layout_weight="1"style="?android:attr/borderlessButtonStyle"android:text="注册"android:textSize="30dp"android:textColor="#03A9F4"android:textStyle="bold"android:letterSpacing="0.5"/></LinearLayout><Viewandroid:layout_gravity="center"android:layout_width="350dp"android:layout_height="1dp"android:background="#000000" /><LinearLayoutandroid:layout_marginTop="15dp"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_marginLeft="20dp"android:layout_marginRight="20dp"><EditTextandroid:id="@+id/et_phone"android:layout_width="match_parent"android:layout_height="80dp"android:drawableLeft="@drawable/pn"android:inputType="phone"android:drawablePadding="10dp"android:hint="请输入手机号"android:textColorHint="#808080"android:textStyle="bold"android:letterSpacing="0.15"android:textSize="20sp" /></LinearLayout><RelativeLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:layout_marginLeft="20dp"android:layout_marginRight="20dp"><EditTextandroid:id="@+id/et_dx"android:layout_width="match_parent"android:layout_height="80dp"android:drawableLeft="@drawable/dx"android:inputType="phone"android:drawablePadding="10dp"android:hint="短信码验证"android:letterSpacing="0.15"android:textColorHint="#808080"android:textSize="20sp"android:textStyle="bold" /><TextViewandroid:id="@+id/forget_pwd"android:layout_width="130dp"android:layout_height="80dp"android:layout_alignParentEnd="true"android:gravity="center_vertical"android:hint="获取验证码"android:textColorHint="#3399FF"android:textSize="25sp"android:textStyle="bold" /></RelativeLayout><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:layout_marginLeft="20dp"android:layout_marginRight="20dp"><EditTextandroid:id="@+id/et_pwd"android:layout_width="match_parent"android:layout_height="80dp"android:drawableLeft="@drawable/pwd"android:inputType="numberPassword"android:drawablePadding="10dp"android:hint="8-20位密码"android:textColorHint="#808080"android:textStyle="bold"android:letterSpacing="0.15"android:textSize="20sp" /></LinearLayout><LinearLayoutandroid:layout_marginTop="30dp"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_marginLeft="30dp"android:layout_marginRight="30dp"><Buttonandroid:id="@+id/bt_lg1"android:layout_width="match_parent"android:layout_height="wrap_content"android:background="@drawable/button_res"android:text="注 册"android:textColor="#ffffff"android:textSize="25sp"android:textStyle="bold" /></LinearLayout><LinearLayoutandroid:layout_marginTop="100dp"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="center_horizontal"><RadioButtonandroid:id="@+id/rb1"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="我同意问卷星"android:textColor="#696969"android:textStyle="bold"tools:ignore="TouchTargetSizeCheck" /><TextViewandroid:id="@+id/t1"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="《用户服务协议》"android:textColor="#3399FF"android:textStyle="bold"/><TextViewandroid:id="@+id/t2"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="和"android:textColor="#696969"android:textStyle="bold"/><TextViewandroid:id="@+id/t3"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="《隐私条款》"android:textColor="#3399FF"android:textStyle="bold"/></LinearLayout></LinearLayout>

	注册界面效果如下：

请添加图片描述

4 按钮实现页面跳转

4.1 LoginActivity.java
package com.example.你的项目名;import androidx.appcompat.app.AppCompatActivity;import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;public class LoginActivity extends AppCompatActivity implements View.OnClickListener {@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_login);Button button1 = findViewById(R.id.bt_lg);button1.setOnClickListener(this);Button button2 = findViewById(R.id.bt_reg);button2.setOnClickListener(this);}@Overridepublic void onClick(View view) {switch (view.getId()){case R.id.bt_lg:final Intent intent1 = new Intent(LoginActivity.this, LoginActivity.class);startActivity(intent1);break;case R.id.bt_reg:final Intent intent2 = new Intent(LoginActivity.this, RegisterActivity.class);//启动活动（参数）startActivity(intent2);break;}}
}
4.2 RegisterActivity.java
package com.example.你的项目名;import androidx.appcompat.app.AppCompatActivity;import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;public class RegisterActivity extends AppCompatActivity implements View.OnClickListener {@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_register);Button button1 = findViewById(R.id.bt_lg);button1.setOnClickListener(this);Button button2 = findViewById(R.id.bt_reg);button2.setOnClickListener(this);}@Overridepublic void onClick(View view) {switch (view.getId()){case R.id.bt_lg:final Intent intent1 = new Intent(RegisterActivity.this, LoginActivity.class);startActivity(intent1);break;case R.id.bt_reg:final Intent intent2 = new Intent(RegisterActivity.this, RegisterActivity.class);//启动活动（参数）startActivity(intent2);break;}}
}

最后，在 AndroidManifest.xml	中设置启动页保证两个页面都能实现跳转。

在这里插入图片描述
最后，如有问题或指正的地方，请在下方评论，一起讨论学习。


http://chatgpt.dhexx.cn/article/PibsNIke.shtml

相关文章

Element ui后台管理系统界面设计

Element ui后台管理系统界面设计

自己学了一点Element ui前端框架&#xff0c;然后尝试设计了几个页面&#xff0c;仅供学习参考&#xff01;
阅读更多...
5个UI界面设计网站，马住了

5个UI界面设计网站，马住了

来了来了&#xff01;推荐几个超好用的设计素材网&#xff0c;还是免费的。 1、爱给网 爱给网_音效配乐_3D模型_视频素材_游戏素材_免费下载 这里面有8W多张UI设计素材&#xff0c;全部都分好类型&#xff0c;找素材特别方便&#xff0c;重点是能免费下载。 2、菜鸟图库 UI…
阅读更多...
燕山大学——软件用户界面设计（五）UI架构

燕山大学——软件用户界面设计（五）UI架构

界面设计中的“设计”与“实现”&#xff0c;本节的UI架构属于“实现”部分。 1.GUI设计模式&#xff08;Design patterns for GUIs&#xff09; &#xff08;1&#xff09;视图树&#xff08;View tree&#xff09; ①定义&#xff1a;GUI结构是一个视图树。视图是一个对象&…
阅读更多...
tkinter 界面设计工具

tkinter 界面设计工具

先推荐一个非tkinter的GUI框架 Python Eel 。是Electron的python版 vb6 https://gitcode.net/mirrors/cdhigh/Visual-Tkinter-for-Python (https://github.com/cdhigh/tkinter-designer ) Figma Tkinter https://blog.csdn.net/qq_41854273/article/details/118310241 visua…
阅读更多...
Linux Qt Designer UI界面设计

Linux Qt Designer UI界面设计

Linux Qt Designer UI界面设计 设计步骤 设计步骤 1.首先在Qt Designer上绘制好自己的图像化界面。 2.编写代码&#xff0c;将控件和功能匹配起来即可&#xff0c;代码如下。注意换到不同主机时&#xff0c;应该将文件配置到相同文件下下&#xff0c;或者修改相应的路径。 f…
阅读更多...
科技感ui界面 html,未来科技感UI界面设计欣赏

科技感ui界面 html,未来科技感UI界面设计欣赏

来源:uicn 作者:冷云 FUI意思可以是Fantasy User Interface 幻想使用者界面&#xff0c; Fictional User Interfaces 科幻使用者界面&#xff0c;Fake User Interfaces 虚构使用者介面&#xff0c;或是Futuristic User Interfaces 未來使用者界面&#xff0c;不管那個"F…
阅读更多...
android studio静态界面设计,2.3 使用Android Studio 简单设计UI界面

android studio静态界面设计,2.3 使用Android Studio 简单设计UI界面

首先 创建一个新的项目找到app 文件目录下的layout的 activity_main.xml 因为Android Studio 是可视化的，所有操作都可以在图形界面进行。 该res 界面当中 drawable 可以将需要的图片导入该目录当中进行调用 layout的目录是布局界面 values 当中存有可以更改界面的颜色 字符串…
阅读更多...
UI设计开发工具介绍

UI设计开发工具介绍

UI设计开发工具介绍 1 UI设计概念2 UI延申3 工具3.1 文档3.2 信息架构3.3 原型设计3.4 图形处理 4 网站参考 1 UI设计概念 UI设计&#xff08;或称界面设计&#xff09;是指对软件的人机交互、操作逻辑、界面美观的整体设计。UI设计分为实体UI和虚拟UI&#xff0c;互联网常用的…
阅读更多...
Python QT5设计UI界面教程

Python QT5设计UI界面教程

简介&#xff1a;PyQT5开发常用知识&#xff0c;零基础上手&#xff0c;需配合我之前写的博文&#xff0c;配置好QT设计工具和ui文件转py文件的工具。博文为&#xff1a;使用Python PyQt5实现一个简单的图像识别软件&#xff1b;页面效果如下&#xff1a; 1.设计菜单栏 Contai…
阅读更多...
22个免费的UI界面设计工具、资源及网站

22个免费的UI界面设计工具、资源及网站

1.原型界面制作工具Lumzy 官方地址&#xff1a;http://www.lumzy.com/ Lumzy是一个网站应用和原型界面制作工具。使用Lumzy&#xff0c;您可以轻松创建UI模型并即时发送到客户电脑中。 Lumzy还具有团队协作编辑工具。 2.在线工具Mockingbird 官方地址&#xff1a;https://gomo…
阅读更多...
ui界面设计工具有哪些

ui界面设计工具有哪些

大家都知道ui设计的基础就是各种软件&#xff0c;主要的软件有PS、AI、AE、APR这4个&#xff0c;但经过反复论证&#xff0c;在ui设计师从业时间里有80%以上都是跟ps打交道&#xff0c;由前到后的重要性顺序就是按照上面所说的&#xff0c;有的时候也会用到XMind、Cutterman、M…
阅读更多...
安卓设计师不容错过的15款实用UI界面设计工具

安卓设计师不容错过的15款实用UI界面设计工具

转载注明出处&#xff1a;https://weibo.com/ttarticle/p/show?id2309404210660820028355 最近刮起了一股“养蛙儿子”的风潮。独特的UI设计、萌萌的画风和简洁的用户体验吸引了大批的用户。在不少人直呼“哇&#xff0c;我的蛙儿子好可爱&#xff0c;好萌”的背后&#xff0c…
阅读更多...
android开发界面设计工具,21个免费的UI界面设计工具、资源及网站

android开发界面设计工具,21个免费的UI界面设计工具、资源及网站

我们刚刚介绍了移动设计初探：触屏网页设计。本文将介绍一些UI界面与设计使用的元素、软件和网站。内容很丰富，适合用户体验设计师、界面设计师、产品设计师、JS前段开发、手机产品设计以及iPad和平板电脑产品设计等使用。 Lumzy 官方地址：http://www.lumzy.com/ Lumzy是一个…
阅读更多...
10款UI设计师常用的UI设计工具盘点

10款UI设计师常用的UI设计工具盘点

好的工具自然能让你在设计上如虎添翼&#xff0c;学好UI设计是成为合格的UI设计的第一步。作为一个人。UI设计师要想设计和转让用户满意的作品&#xff0c;不仅需要高超的技能.除了丰富的经验&#xff0c;还需要掌握一些工具。下面小编就为大家介绍一下。UI设计师工作中常用的设…
阅读更多...
工具推荐｜2019年UI设计师必备工具清单

工具推荐｜2019年UI设计师必备工具清单

UI设计师一直是IT行业最热门职位之一&#xff0c;因其薪资待遇较高&#xff0c;学习门槛较低而广受欢迎。在百度指数搜索“UI设计”来看&#xff0c;从2012年开始&#xff0c;UI设计的搜索呈明显上升趋势&#xff0c;尤其是在2016年左右出现“井喷式”增长。 另外&#xff0c;从…
阅读更多...
UI设计师必备的五款界面设计工具

UI设计师必备的五款界面设计工具

在前几篇文章中，我们分享了一些最受欢迎的原型设计工具，今天我们来谈谈界面设计工具。工具的重要性对于设计师来讲不言而喻。任何想法都需要借助工具来实现。想要成为一名出色的UI设计师，你需要多掌握一些技能，才能增强自身竞争力。同时也给那些想转行做UI设计师的朋友一些…
阅读更多...
Linux系统里如何彻底的清空终端屏幕？

Linux系统里如何彻底的清空终端屏幕？

Linux系统里如何彻底的清空终端屏幕&#xff1f; 本文地址&#xff1a;https://linux.cn/article-2582-1.html 2014-02-19 20:10 评论: 10 收藏: 1 分享: 1 Linux用户&#xff0c;特别是Ubuntu或CentOS用户&#xff0c;基本上都习惯使用clear命令或CtrlL组合快捷键来清…
阅读更多...
Linux系统下的清屏方法

Linux系统下的清屏方法

在windows的DOS操作界面里面&#xff0c;清屏的命令是cls&#xff0c;那么在linux 里面的清屏命令是什么呢&#xff1f; 下面分享几种在linux下用过的清屏方法&#xff1a; 1、clear命令、这个命令将会刷新屏幕&#xff0c;本质上只是让终端显示页向后翻了一页&#xff0c;如…
阅读更多...
linux清理缓存的命令

linux清理缓存的命令

1.free free&#xff1a;通过free命令查看内存剩余可用情况 命令可带参数&#xff1a; -b 　以Byte为单位显示内存使用情况。 -k 　以KB为单位显示内存使用情况。 -m 　以MB为单位显示内存使用情况。 -g 以GB为单位显示内存使用情况。 -o 　不显示缓冲区调节列。 -s<…
阅读更多...
Linux常用命令--清屏

Linux常用命令--清屏

那么在linux 里面的清屏命令是什么呢&#xff1f;下面笔者分享几种在linux下用过的清屏方法。 转自&#xff1a;https://www.jianshu.com/p/1aa56138e6aa 1、clear命令、这个命令将会刷新屏幕&#xff0c;本质上只是让终端显示页向后翻了一页&#xff0c;如果向上滚动屏幕还可以…
阅读更多...
推荐文章

Copyright @ 2022~2023