1.首先,我们准备好需要用的图片,这里我只用了四张照片,分别是用户头像,用户名图标,密码图标,容器背景。

将照片粘贴到res/mipmap 目录,或者res/drawble目录下:

新建一个Empty Activity 我们要先设计好我们的版图,我这里已经是做好的版图:

接下来,我们要开始正式的实战了 ,先进入res/values/string.xml中

把我们所需要的文本建好

以下是我创建的文本

名字自己取,方便自己记忆就好。

我需要将约束布局改成线性布局 ,方便之后的操作:

导入我们事先准备好的图片作为背景图片;

我们将整个版面分为四个区域:分别是用户头像区,账号密码输入区,登录/取消 按钮区 ,文本区,所以接下来的布局我们就要用到垂直分布(线性布局中默认是水平分布,若要垂直分布:则需要orientation参数:垂直分布为vertical,水平分布为horizontal)

先用LinearLayout建立第一个容器(用来存放用户头像用户头像)

   <LinearLayoutandroid:layout_width="match_parent"android:layout_height="0dp"android:layout_weight="2"android:gravity="center"><ImageViewandroid:id="@+id/jk"android:layout_width="150dp"android:layout_height="150dp"android:src="@mipmap/jk" /></LinearLayout>

这里是导入事先准备好的图片,并设置宽和高

然后建立第二个容器,第二个容器需要同时存放用户名文本框和密码框,所以容器里面应该再套两个容器。注意:第二个容器应该是垂直分布,嵌套的两个容器默认用水平分布就可以了

<LinearLayoutandroid:layout_width="match_parent"android:layout_height="0dp"android:orientation="vertical"android:padding="20dp"android:layout_weight="1"><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"><ImageViewandroid:layout_width="50dp"android:layout_height="50dp"android:src="@drawable/user" /><EditTextandroid:id="@+id/username"android:layout_width="match_parent"android:layout_height="50dp"android:hint="@string/User_name"/></LinearLayout><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"><ImageViewandroid:layout_width="50dp"android:layout_height="50dp"android:src="@mipmap/users"/><EditTextandroid:id="@+id/password"android:layout_width="match_parent"android:inputType="numberPassword"android:layout_height="50dp"android:onClick="doinput"/></LinearLayout></LinearLayout>

接下来做两个按钮(Button)

<LinearLayoutandroid:layout_width="match_parent"android:layout_height="0dp"android:gravity="center_horizontal"android:layout_weight="1"><Buttonandroid:id="@+id/login"android:layout_width="150dp"android:layout_height="wrap_content"android:text="@string/login"android:textSize="20dp"android:background="@drawable/s"android:layout_marginRight="10dp"android:onClick="dologin"/><Buttonandroid:id="@+id/cancel"android:layout_width="150dp"android:layout_height="wrap_content"android:textSize="20dp"android:text="@string/cancel"android:background="@drawable/s"android:layout_marginLeft="10dp"android:onClick="docancel"/></LinearLayout>
下面展示一些 `内联代码片`。

注意这里写入的onClick(单击事件)和 添加的 id 在后续进行绑定的操作时需要用到

我们在最后再添加一行文字

<LinearLayoutandroid:layout_width="wrap_content"android:layout_gravity="center"android:layout_height="wrap_content"><TextViewandroid:id="@+id/texts"android:layout_width="wrap_content"android:layout_height="wrap_content"android:textSize="15dp"android:text="你好,欢迎使用本软件"/></LinearLayout>

效果图如下“

源代码如下:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"android:background="@mipmap/bg"tools:context=".LoginActivity"><LinearLayoutandroid:layout_width="match_parent"android:layout_height="0dp"android:layout_weight="2"android:gravity="center"><ImageViewandroid:id="@+id/jk"android:layout_width="150dp"android:layout_height="150dp"android:src="@mipmap/jk" /></LinearLayout><LinearLayoutandroid:layout_width="match_parent"android:layout_height="0dp"android:orientation="vertical"android:padding="20dp"android:layout_weight="1"><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"><ImageViewandroid:layout_width="50dp"android:layout_height="50dp"android:src="@drawable/user" /><EditTextandroid:id="@+id/username"android:layout_width="match_parent"android:layout_height="50dp"android:hint="@string/User_name"/></LinearLayout><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"><ImageViewandroid:layout_width="50dp"android:layout_height="50dp"android:src="@mipmap/users"/><EditTextandroid:id="@+id/password"android:layout_width="match_parent"android:inputType="numberPassword"android:layout_height="50dp"android:onClick="doinput"/></LinearLayout></LinearLayout><LinearLayoutandroid:layout_width="match_parent"android:layout_height="0dp"android:gravity="center_horizontal"android:layout_weight="1"><Buttonandroid:id="@+id/login"android:layout_width="150dp"android:layout_height="wrap_content"android:text="@string/login"android:textSize="20dp"android:background="@drawable/s"android:layout_marginRight="10dp"android:onClick="dologin"/><Buttonandroid:id="@+id/cancel"android:layout_width="150dp"android:layout_height="wrap_content"android:textSize="20dp"android:text="@string/cancel"android:background="@drawable/s"android:layout_marginLeft="10dp"android:onClick="docancel"/></LinearLayout><LinearLayoutandroid:layout_width="wrap_content"android:layout_gravity="center"android:layout_height="wrap_content"><TextViewandroid:id="@+id/texts"android:layout_width="wrap_content"android:layout_height="wrap_content"android:textSize="15dp"android:text="你好,欢迎使用本软件"/></LinearLayout></LinearLayout>

Android 实训 Day2——项目实战(简单的登录页面)相关推荐

  1. android 实训的背景,Android实训项目作业.doc

    Android实训项目作业 2-1用整型数计算两个数的和2 2-7排列任意4个数的顺序,按从小到大顺序输出2 2.1编写显示下列图形的程序.2 3.1编写程序,当点击按钮命令后,页面标题及文本组件的文 ...

  2. Android项目实战:简单天气-刘桂林-专题视频课程

    Android项目实战:简单天气-11200人已学习 课程介绍         学习新的知识点,时下Android比较流行的MPAndroidChart + Retrofit2.0 + Gson! 课 ...

  3. Android实训案例(九)——答题系统的思绪,自己设计一个题库的体验,一个思路清晰的答题软件制作过程

    Android实训案例(九)--答题系统的思绪,自己设计一个题库的体验,一个思路清晰的答题软件制作过程 项目也是偷师的,决心研究一下数据库.所以写的还是很详细的,各位看官,耐着性子看完,实现结果不重要 ...

  4. Android实训案例(四)——关于Game,2048方块的设计,逻辑,实现,编写,加上色彩,分数等深度剖析开发过程!...

    Android实训案例(四)--关于Game,2048方块的设计,逻辑,实现,编写.加上色彩.分数等深度剖析开发过程! 关于2048,我看到非常多大神,比方医生.郭神.所以我也研究了一段时间.还好是研 ...

  5. Android实训案例(八)——单机五子棋游戏,自定义棋盘,线条,棋子,游戏逻辑,游戏状态存储,再来一局

    Android实训案例(八)--单机五子棋游戏,自定义棋盘,线条,棋子,游戏逻辑,游戏状态存储,再来一局 阿法狗让围棋突然就被热议了,鸿洋大神也顺势出了篇五子棋单机游戏的视频,我看到了就像膜拜膜拜,就 ...

  6. Linux综合实训案例教程,Linux操作系统教程-实训与项目案例原稿.ppt

    Linux操作系统教程-实训与项目案例原稿分析 第11章 Bash 使用详解 本章内容 Shell概念 Linux下用户Shell的指定 Bash的使用 Bash的常见技巧与快捷键 Bash的变里使用 ...

  7. Android实训案例(四)——关于Game,2048方块的设计,逻辑,实现,编写,加上色彩,分数等深度剖析开发过程!

    Android实训案例(四)--关于Game,2048方块的设计,逻辑,实现,编写,加上色彩,分数等深度剖析开发过程! 关于2048,我看到很多大神,比如医生,郭神,所以我也研究了一段时间,还好是研究 ...

  8. Android实训案例(三)——实现时间轴效果的ListView,加入本地存储,实现恋爱日记的效果!

    Android实训案例(三)--实现时间轴效果的ListView,加入本地存储,实现恋爱日记的效果! 感叹离春节将至,也同时感叹时间不等人,一年又一年,可是我依然是android道路上的小菜鸟,这篇讲 ...

  9. 点宽与江苏大学建设量化金融实训平台项目

    近期,深圳点宽网络科技有限公司中标江苏大学[量化金融实训平台]项目,助力数学科学学院金融数学专业开展量化金融实验室项目建设. 一.量化金融实训项目介绍 点宽为江苏大学金融数学专业建设的"量化 ...

最新文章

  1. WPF Snoop 2.7 源码研究
  2. 学术青年如何克服拖延症——5条技巧助你前进
  3. 查看 -- tree
  4. 测试ModelAttribute注解
  5. visual studio 添加链接文件
  6. 蜗杆参数法设计_技术贴 | 减速器结构及设计的注意事项
  7. 怎么配置在谷歌和ie内核时使用不同的_重磅!微软竟然研发了谷歌内核的edge
  8. jsbridge原理_React Hooks 原理与最佳实践
  9. SQL查询临时表空间的数据
  10. Java Web学习总结(16)——JSP的九个内置对象
  11. IOS开发-UIView之动画效果的实现方法(合集)
  12. 数学知识与计算机科学中的应用,浅谈计算机科学技术在数学思想中的应用
  13. spring mvc 对象型参数的传递(遇到坑了)
  14. Mvc中Session导致action不异步的问题
  15. 菜鸟学运筹学----引
  16. lisp弧度转度分秒_度分秒转弧度)
  17. Mac操作系统输入法快捷键设置
  18. 一个喜欢搜罗软件的哥们
  19. 关于Qt 5-MSVC 2015 64位在 win7 64位系统debug程序崩溃的问题
  20. Linux的权限管理操作

热门文章

  1. android调试方法之更换蓝牙的hcd文件
  2. 表格组件——ag-Grid研究
  3. ElastIcSearch分词器
  4. Cadence Allegro PCB命令行窗口详细说明及常用命令介绍图文教程及视频演示
  5. java的山形命名_以动物命名的山
  6. 命令怎么创建oracle用户,Oracle 如何使用命令行创建用户
  7. WEB全套资料 干货满满
  8. 宁波银行h5支付(php接入宁波银行h5支付)
  9. 【python】给视频添加背景音乐
  10. Linux rpm 命令参数使用详解