Android学习之登陆界面设计（一）前后期准备以及相关配置

  • 前言
  • 成品
    • 成品样式
    • 成品特点
  • 工具
    • 系统配置
    • 手机配置
    • Android Studio 3.6.3
    • SDK
    • 图片来源
      • 矢量图标库
      • Background、Logo
  • 前期准备
    • 新建工程
    • 导入素材库
    • 新建Activity
  • 后期准备
    • 准备`values - strings.xml`
      • 第一部分：登陆面板部分
      • 第二部分：注册面板部分
    • 准备`values - colors.xml`
    • 准备`values - arrays.xml`
    • 准备`values - styles.xml`

前言

希望本文对你的帮助是对写Android程序从无到有的概念

本文适合对Android了解一概不知的同学，没错，就是零基础，零个零……对于大佬路过，欢迎指点下。

当然了，最好还是有点Android基础最好，不然可能还是看不懂我在写什么。

为什么说是针对Android零基础，因为作者我在写本文的时候，也就是对Android零基础。只不过我在学习的过程中查阅了很多资料（没看过视频）。

至于为什么我不喜欢看视频，一是因为懒，二是感觉效率慢、理解不透彻。

但是！！但是！！！

看懂本文，必须要有Java的基础！！

否则你可能连什么叫做“类”都不知道，那本文看起来就跟天书差不多。而且我在这也不教授Android的知识，具体能学到什么，就跟着做就行。不懂的地方自行百度、谷歌解决。

另外，这个版本为了契合未来我打算完成的本地题库程序，所以不使用这些东西，没有用户名、没有密码，没有找回密码功能、没有自动登陆复选框、注册时没有二次输入密码……

成品

成品样式

下面来说一下，这个界面是什么样子的。

  1. 首先是主面板，主面板有如下控件：两个输入框，一个输入姓名，一个输入学号；两个按钮，一个是登陆按钮，一个是注册按钮；
  2. 其次是注册面板，一个注册按钮，三个文本输入框，三个下拉列表。

如图：

成品特点

  1. 最基本的界面设计；
  2. 具有基本的文本交互；
  3. 不同的Activity切换；
  4. 利用了一个最简单的补间动画来实现注册面板的弹出；
  5. 通过Properties键值对 对用户注册信息的写入和读取；

以上就是通过本文及后续内容将要完成的。

工具

系统配置

版本：Windows10 家庭中文版
版本号：1909
CPU：Core i5 -7200U
内存：8G
显卡：集显

手机配置

360N7
Android 版本：8.1.0
处理器：骁龙660
内存：6G

Android Studio 3.6.3

Android Studio 3.6.3
Build #AI-192.7142.36.36.6392135, built on April 14, 2020
Runtime version: 1.8.0_212-release-1586-b04 amd64
VM: OpenJDK 64-Bit Server VM by JetBrains s.r.o
Windows 10 10.0
GC: ParNew, ConcurrentMarkSweep
Memory: 1246M
Cores: 4
Registry: ide.new.welcome.screen.force=true
Non-Bundled Plugins: com.alibaba.p3c.smartfox

SDK

Android 10（Q），未来计划使用Android4.4（KitKat），不过那是后话。

图片来源

矢量图标库

阿里巴巴矢量图标库

Background、Logo

Background自己找，Logo我临时使用了Android自带的一个矢量图。

前期准备

新建工程

创建一个新的工程 -> 选择空页面Empty Activity

名称为LoginModule，包名为com.thdmi.app.login，最小SDK为Android 4.4(KitKat)

创建完成后等待一会儿，看看它给我们带来了什么。

另外，为了尝试Android的SDK 4.4版本，我更改了下工程的编译SDK，也就是从原先的API 29改动到 API 19，这次的登陆界面我已经在API29也就是Android 10里边完成了，没问题，所以如果你使用Android 10也可以。

对了，记得进activity_main.xml中把默认新建的Hello WorldTextView给删除掉。

导入素材库

先说明一下，mipmap里的各种dpi也就是分辨率……我是不会写的，参考文本：
Android中分辨率，DPI，DP与PX对应关系
以及，Android各个文件夹是做什么的，参考链接：Android中项目中各个文件夹的含义和用途详解
其实需要的也就3个图片，记得顺便命名图片。

新建Activity

因为新建工程后的第一个Activity默认是MainActivity，而我们需要做的是登陆界面，姑且就忽略这个MainActivity，再新建一个即可，当然用这个MainActivity也不是不可以，但就是不想用。

很简单，只需要在工程上新建一个Empty Activity即可，如图：

新的Activity就起名为LoginActivity即可。 同时会得到一个布局文件.XML，叫做activity_login.xml，位于res的layout文件夹下。

后期准备

其实这已经算是开工了，以下内容实际上并不是预先准备的，而是我在不断地学习过程中进行修改而得到的。

所以，这对于我而言并不算是准备，但对于那些想直接套用J代码却发现一堆Bug而不知道错在哪的同学而言，这是属于后期准备。

当然，如果你觉得报错也没关系的话，可以直接跳过这一大步，等到有Bug再回来查找，这其实也是蛮有意思的事情。

准备values - strings.xml

两部分内容，把这两部分一同添加到strings.xml里面：

另外，有些string可能会一样，理论上是应该删掉不重复的，但为了保证大家能够看得出来这内容属于哪一部分，所以我不一定会因为重用string而删除它。

第一部分：登陆面板部分

    <string name="login_bg_describe">登陆界面背景图片</string><string name="login_btn_text_login">登 陆</string><string name="login_btn_text_register">注 册</string><string name="login_hint_user_name">姓名</string><string name="login_hint_user_pass">学号</string><string name="login_ic_describe_user_name">登陆界面键入用户名旁的图标</string><string name="login_ic_describe_user_pass">登陆界面键入密码旁的图标</string><string name="login_img_title">登陆界面顶端标题</string><string name="login_click_text_forget_password">忘记密码</string><string name="login_limit_scanner">+-*/|_1234567890qwertyuiopasdfghjklzxcvbnmQWERTYUIOPASDFGHJKLZXCVBNM</string><string name="login_text_auto_login">自动登陆</string><string name="login_third_party">其他方式登录</string>

第二部分：注册面板部分

    <string name="login_text_register_student_name">姓名：</string><string name="login_hint_register_student_name">请输入姓名</string><string name="login_text_register_student_id">学号：</string><string name="login_hint_register_student_id">请输入学号</string><string name="login_text_register_college">学校：</string><string name="login_hint_register_college">例如：桂林航天工业学院</string><string name="login_text_register_faculty">院系：</string><string name="login_hint_register_faculty">例如：计算机科学与工程学院</string><string name="login_text_register_grade">年级：</string><string name="login_hint_register_grade">请选择年级</string><string name="login_text_register_major">专业：</string><string name="login_hint_register_major">例如：物联网工程</string><string name="login_text_register_class">班级：</string><string name="login_hint_register_class">请输入班级号</string><string name="login_text_register_keyword">激活码：</string><string name="login_hint_register_keyword">请输入激活码</string>

准备values - colors.xml

因为在学习过程中有着关于屏幕的设置，当时为了测试沉浸式状态栏，就连基础色也改了。

<?xml version="1.0" encoding="utf-8"?>
<resources><!--  Base Color  --><color name="colorPrimary">#00FFFFFF</color><color name="colorPrimaryDark">#00FFFFFF</color><color name="colorAccent">#00FFFFFF</color><!--  文本框字体透明黑和下划线透明白  --><color name="color_TextFont_Transparency_Black">#E6252424</color><color name="color_TextUnderLine_Transparency_White">#99EAEAEA</color><!--  登陆按钮主题蓝  --><color name="color_Btn_Normal_DarkBlue">#F2267DDA</color><color name="color_Btn_Active_BabyBlue">#2E8DD8</color>
</resources>

准备values - arrays.xml

所谓的arrays.xml就是后边会说到的下拉选择列表里面的项，顺便一提，下拉选择列表是自定义的，但和这个没啥关系。

理论上这种东西都是定死的（在.xml）里面，而Java里面的项就可以很灵活，就比如时间包括年份日期这些，都是可以获取当前系统时间，然后前后推十几年这样再显示在下拉列表，而xml里面则定死了，不能改，要改就得从代码改，所以这是用代码写列表项的优点，但缺点是不方便管理，嗯，就是顺便提一下，我也是猜的。

另外，这个arrays.xml默认是没有的，自己在res的values下新建一个即可。


添加如下代码：

<?xml version="1.0" encoding="utf-8"?>
<resources><string-array name="college"><item>桂林航天工业学院</item></string-array><string-array name="faculty"><item>管理学院</item><item>航空旅游学院</item><item>机械工程学院</item><item>电子信息与自动化学院</item><item>汽车与交通工程学院</item><item>能源与建筑环境学院</item><item>计算机科学与工程学院</item><item>外语外贸学院</item><item>传媒与艺术设计学院</item><item>理学院</item></string-array><string-array name="grade"><item>2020</item><item>2019</item><item>2018</item><item>2017</item><item>2016</item><item>2015</item><item>2014</item><item>2013</item><item>2012</item></string-array><string-array name="class_id"><item>1</item><item>2</item><item>3</item><item>4</item><item>5</item><item>6</item><item>7</item><item>8</item><item>9</item><item>10</item><item>11</item><item>12</item><item>13</item><item>14</item><item>15</item><item>16</item><item>17</item><item>18</item><item>19</item><item>20</item></string-array></resources>

很明显，我是“计”院的。

准备values - styles.xml

<resources><!-- Base application theme. --><style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar"><!-- 默认标题栏主题. --><item name="colorPrimary">@color/colorPrimary</item><item name="colorPrimaryDark">@color/colorPrimaryDark</item><item name="colorAccent">@color/colorAccent</item></style><!--  文本框无下划线  --><style name="style_TextView_UnderLine_None" parent="Theme.AppCompat.Light.NoActionBar"><item name="colorControlNormal">#00FFFFFF</item><item name="colorControlActivated">#00FFFFFF</item></style><!--  文本框透明白下划线  --><style name="style_TextView_UnderLine_Transparency_White" parent="Theme.AppCompat.Light.NoActionBar"><item name="colorControlNormal">@color/color_TextUnderLine_Transparency_White</item><item name="colorControlActivated">@color/color_TextUnderLine_Transparency_White</item></style></resources>

至此，整个准备工作就算基本完成了，讲道理嘛，还是得有Android基础的同学才能看得懂的。

其实我还写了另一个版本的，也就是有密码那种，而且要联网验证的，但是优点麻烦，而且服务器这边也没能处理好，所以就弄了个简单点的。

Android学习之登陆界面设计（一）前后期准备以及相关配置相关推荐

  1. Android学习之登陆界面设计（二）基本界面设计

    Android学习之登陆界面设计(二)基本界面设计 前提 绘图样式 - drawable bg_login_btn_submit.xml bg_login_panel_slide.xml bg_log ...

  2. android布局基础及范例：QQ登陆界面设计

    使用android手机的用户想必都有android手机QQ客户端吧,我们是不是觉得QQ登陆界面非常漂亮美观而且具有亲和力?我们是不是也想作出像 QQ那样美观的界面?有的人肯定会问,做UI那不是美工人员 ...

  3. 基于Html+Bootstrap的高校智慧学习平台WEB界面设计

    目 录 1 概述 4 2 需求分析 4 3 高校智慧学习平台WEB界面设计 4 2.1 功能描述 5 2.2 功能结构图 5 2.3界面设计 7 1 概述 高校智慧学习平台主要是为在校学生提供一个开源 ...

  4. APP开发流程实例讲解-儒释道网络电台八天开发全程-在Android Studio中完成界面设计

    APP开发流程实例讲解-儒释道网络电台八天开发全程 功能和界面初步设定 APP开发流程实例讲解-儒释道网络电台八天开发全程 项目发起 功能和界面初步设定 在Android Studio中完成界面设计 ...

  5. android 优秀app界面设计,基于Android系统的App界面设计.doc

    基于Android系统的App界面设计 摘 要:智能手机时代的来临改变了大多数人的生活习惯,时至今日智能手机已经成为了人们工作生活中的一部分,在工作生活中发挥着重要的作用.App作为智能手机应用程序的 ...

  6. Linux学习之ARM开发板连接ubuntu18.04LTS及NFS相关配置

    Linux学习之ARM开发板连接ubuntu18.04LTS及NFS相关配置 第一步:在PC机安装Ubuntu18.04LTS 具体安装步骤参见上一篇文章 第二步:安装arm-linux-gcc交叉编 ...

  7. 2018年Sketch UI界面设计套件前十了解下！

    Sketch近几年凭着大量的插件和免费教程迅速发展,而Sketch的忠实粉丝们也乐于将他们的免费模型分享出来.这也意味着你会在网上找到更多的免费Sketch素材,从完整的模型到内容详实的UI套件. 为 ...

  8. QML与C++交互:登陆界面设计

    环境: 主机:WIN7 开发环境:Qt5.2.1 说明: QML设计前台界面,C++后台负责逻辑 效果图: 源代码: 前台qml文件 login.qml [javascript] view plain ...

  9. 应用篇1.3 后台登陆界面设计

    应用篇1.3 后台登陆界面审计 一.后台登陆界面图: 各种准备工作完毕后,对于这款日程管理类的软件,首先设计一个后台登陆功能.可以通过密码保护自己的日程隐私. 1.初次登陆界面如图1.1所示. 2.如 ...

最新文章

  1. 程序员接活利器，dataTable组件带你快速开发，摆脱CRUD
  2. java list接口为何要重新声明collection接口的方法_JAVA Collection接口中List Map 和Set的区别（转）...
  3. 基于R语言的时间序列分析预测
  4. 邮件服务器fixpost服务（1）
  5. Codeforces - 474D - Flowers - 构造 - 简单dp
  6. ServletContextListener 启动SPRING加载数据到缓存的应用
  7. java语法特点_Java 语言特点
  8. WMS——新能源汽车减速机组装工厂WMS案例
  9. KEIL5编译51单片机程序依赖包
  10. day42.自动关机小程序
  11. 用vue element-ui分页组件构建一个简单的分页 ( 超详细 )
  12. Azure 上通过 SendGrid 发送邮件
  13. 什么是物联网AIoT？
  14. cocos做飞机大战笔记【玩家飞机移动与子弹发射】
  15. python是一种面向对象的高级语言_为什么入门大数据选择Python而不是Java?
  16. 计算机毕业设计基于asp.net网上考试报名系统——计算机毕业设计
  17. P1365 WJMZBMR打osu! / Easy
  18. 你知道吗？没有硅胶消泡剂，避孕套可能都不安全了
  19. 45套（毕业答辩、开题报告、职场）PPT模板免费赠送
  20. 纵横网络靶场社区-Modbus协议

热门文章

  1. 互联网巨头们的地摊争夺战
  2. java 抽奖系统源码_基于jsp的抽奖系统-JavaEE实现抽奖系统 - java项目源码
  3. Android8.1 吉字节问题
  4. 学计算机做纸质笔记,详细图文教你康奈尔大学推荐的超级笔记法，只要一张A4纸张，你也可以做学霸...
  5. 关于PS CC 不能直接拖图片的问题
  6. 软文营销如何自我激励创造巨大价值
  7. Android电池信息的获取
  8. MobaXterm 全能型开源远程终端
  9. 明明都保意外，定期寿险和意外险到底区别在哪里？
  10. ChromeFK插件推荐系列十九:网站图片批量下载插件推荐