Android Development for Beginners -Building Layouts Part A

2019年7月7日 338次阅读 来源: 狂野的Folivora

前言

此套Android开发入门课程面向没写过一行代码的编程零基础人员。
整套课程的总课时大概有20-25个小时，你可以将这些课时分散到4-5周进行学习。
完成整套课程后，你就可以制作出一些简单的安卓应用啦 例如生日贺卡、点餐等应用。

引入

学习制作Android应用就像学英语一样，需要先学习单词（控件），然后把一些单词（控件）加上一些语法（逻辑）组成句子（程序语句），最终组成一个完整的应用。
我们需要使用中文或英文跟你的人类朋友进行对话交流，同理你也需要某种语言跟计算机对话，告诉计算机你需要它做什么样的操作，例如：显示一张图片、显示一行文本、展示一个按钮……

XML

XML (Extensible Markup Language) 可扩展标记语言。

在Android开发中，使用XML定义安卓应用的UI界面部分（即外观），显示图片、 文字 、按钮等可以通过XML进行描述，至于如何描述后面作详细介绍。
我们编写文档通常会使用Microsoft Word这款软件进行编写，那么开发Android应用也需要一款软件。

Android Studio

IDE（Integrated Development Environment）集成开发环境：用于程序开发的软件
在Android开发中，用的是 Android Studio 这款Google官方提供的IDE。也可使用Eclipse。

下面是Android Studio的界面。

《Android Development for Beginners -Building Layouts Part A》

初学者们看到是不是觉得很复杂，没错确实很复杂！ 所以为了不给大家增加学习难度，不推荐大家现在去安装和使用它。我们先把图中红色UI界面编辑部分抽离出来进行学习。后面会针对这款IDE进行详细的介绍，各位稍安勿躁~~~

初学利器-XMLV

XMLV（XML Visualizer）XML可视器：即时显示编码的效果
地址：http://labs.udacity.com/android-visualizer/#/android/xml-syntax-errors在浏览器上打开即可。

打开后显示如下图所示

《Android Development for Beginners -Building Layouts Part A》

在正式编码之前还需要了解几个概念

View – 视图

在Android开发中第一个需要知道的概念就是View（视图）。
现阶段咱们姑且能简单的理解为应用里能看见的东西，如：图片文字按钮等

View又分为很多小的种类，显示不同的内容需要使用不同的View。

下面通过一个常见的应用进行分析

《Android Development for Beginners -Building Layouts Part A》

在QQ的登录界面中我们就分析出了几种最常见的View：

View名称作用
ImageView展示图片
TextView展示文字
Button展示按钮
EditText展示可编辑的文本（即输入框）

接着就来分析代码……

XML语法规则

android:text="Hapy Birthday"
android:textSize="45sp"
android:layout_width="150dp"
android:layout_height="150dp"
android:background="@android:color/darker_gray"/>

上面就是一段XML代码，咋一看不太像我们平时用到的词语和句子，理解起来也比较困难。

XML作为一门语言肯定跟英语一样有一套语法.

  • 1.元素必须以”<“开始，以”/>“结束，就像每句话都有一个“ 。”作为结束。
  • 2.” < “后是View的名称
  • 3.View名称必须采用驼峰式命名规范（单词间首字母大写）
  • 4.在View名称和结束标签中间声明View的属性及属性值
  • 5.属性值必须使用””双引号包裹起来
  • 6.特别注意：代码中使用的符号必须为英文符号，强烈建议修改输入法为中文时使用英文标点

《Android Development for Beginners -Building Layouts Part A》

父子元素

上面代码写的方式我们称它是一个自闭标签（自己关闭自己）
其实还有一种写法即：

android:text="Hapy Birthday"
android:textSize="45sp"
android:layout_width="150dp"
android:layout_height="150dp"
android:background="@android:color/darker_gray">

注意到区别了吗？ 用单独的关闭标签进行关闭。
这种情况就允许View有自己的子View

android:orientation="vertical"
android:layout_width="150dp"
android:layout_height="150dp">
android:text="IT"
android:layout_width="150dp"
android:layout_height="150dp"
android:background="@android:color/darker_gray"/>
android:text="Turing"
android:layout_width="150dp"
android:layout_height="150dp"
android:background="@android:color/darker_gray"/>

LinearLayout也是一个View，它允许有子元素，下节会重点说明
当前关系为 两个TextView互为兄弟元素，与LinearLayout为父子元素的关系。
关于属性 ：描述物体的特征

通过类比加深理解

对象属性
妹子长发、红唇、媚眼……
View长度、宽度、背景、文本……

关于属性名的说明
如android:text：文本属性

  • android 代表此属性是安卓系统预定义好的属性
  • 到后期如果View的一些系统预定义属性不能满足需求，可以自定义属性那么自定义属性的前缀（“ ： ”前面的字段就是我们自己定义的其他字段而不是android:xxx了）
    关于宽高
android:layout_width="150dp"  --->TextView的宽度
android:layout_height="150dp"  --->TextView的高度

单位dp : density-independent pixels 密度无关像素
为什么要用密度无关像素而不直接用像素呢?
通过一组图进行说明：

《Android Development for Beginners -Building Layouts Part A》
《Android Development for Beginners -Building Layouts Part A》

结论：使用dp在物理尺寸上大小相同。

除了直接指定具体的dp值之外，还有两个特殊的值
wrap_content 包裹内容 大小刚刚好符合文本的大小
match_parent 匹配父元素
关于背景属性

android:background="@android:color/darker_gray"

背景可以指定颜色或图片：

  • 颜色又可以分为系统预定义和十六进制颜色代码
    系统预定义
    @android:color/darker_gray表示：引用安卓系统预定义好的颜色值darker_gray（暗灰色）
    十六进制颜色代码

xxxxxx 通过Meterial Design设计手册获取

链接：http://wiki.jikexueyuan.com/project/material-design/style/color.html

  • 图片
    @drawable/xxx或@mipmap/xxx xxx为图片的名称（注意不带后缀）
    在XMLV中可通过Available Images按钮进行选择
    字体大小属性
android:textSize="45sp"

单位sp与dp类似区别在于sp只适用于字体，且基于用户Android系统的字体大小。

设置为安卓系统默认的字体大小
android:textAppearance=”?android:textAppearanceLarge” 大号字体
android:textAppearance=”?android:textAppearanceMiddle” 中号字体
android:textAppearance=”?android:textAppearanceSmall” 小号字体

具体设计可参照Meterial Design 设计手册

计算机语言与人类语言的区别
英语就算语法上有错我们也能明白是什么意思 例如 i lave you. 你肯定知道它要说的是我爱你
计算机比较傻，只要出现一个错误就不能正确的理解代码的意思。
所以写代码在语法上必须严格遵循相应语言的语法规则

以下是特别要注意的地方：
1.View名称：驼峰式命名（单词间首字母大写）
2.不能系统预定义的东西不能拼写错误、无谓的空格
3.属性值必须要使用英文状态下的双引号引起来

下面给出一张详尽的说明图

《Android Development for Beginners -Building Layouts Part A》

    原文作者：狂野的Folivora
    原文地址: https://www.jianshu.com/p/062671c34c4c
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞