课程 1A: 打造布局

这节课是 Android 开发（入门）课程 的第一部分《布局和交互》的第一节课，导师是 Katherine Kuan 和 Kunal Chawla，主要内容是 Android 学习方法和 Views 的使用。
由于入门课程面向的是没有任何编程经验的初学者，所以课程初期的内容非常基础，进度也偏慢。

关键词：Views，TextView 样式，ImageView 样式，XML 语法，IDE，Debug 方法

Android 学习方法

1. 学习 Android 就像学习一门新语言，需要不断的练习；
2. 写代码就像写指令，非常详细、具体的指令；
3. 写代码的空间：IDE（Integrated Development Environment，集成开发环境），针对 Android 而言即 Android Studio；
4. 写代码的方式：XML（Extensible Markup Language，可扩展标记语言）；
5. 除错 (Debug) 的方法
   （1）查阅错误信息
   错误代码会有红色下划波浪线或字体标红，Android Studio 右侧的红色方块也会指示错误位置；
   查字典以理解错误信息中的词汇，或粘贴整段信息到 Google 搜索；
   （2）对比正确可运行的代码
   可以参考常用的 Views 参考代码 (Cheat Sheet)；
   （3）善用撤销 (ctrl/cmd+z) 和重做 (ctrl/cmd+shift+z) ，即时修正错误；
   （4）学会寻求帮助，充分利用论坛 (stack overflow)、学习小组的作用，同时学习提问的艺术，提供问题发生的场景，例如截图。
6. 查找 Android 文档
   Android 开发者网站上有丰富的资源，但若想查找其中的某一部分内容，则需要善用 Google 搜索和浏览器的查找 (ctrl+F) 功能。例如要查找 TextView 相关的代码，可以 Google 搜索 "TextView Android" ，点击搜索结果 "TextView | Android Developers" 就直接跳到了 TextView 相关代码的页面；若想进一步查找将字体变粗的代码，则可以用浏览器查找 "bold"，结果中肯定包含了想要的结果。
   另外，Android 开发者网站还有一个词汇表页面，相信对学习 Android 非常有帮助。
7. 掌握优质的行业资源
   无论是汇聚了全球程序员的 stack overflow 社区，还是拥有各类优秀代码的 GitHub 网站，都是学习 Android 的优质资源，甚至 Blogspot 技术博客或 YouTube 视频都可以充分利用。下面是一些优秀的 Android 技术博客。
   Android Developers 官方博客
   Styling Android blog: 展示构成 Android 应用设计元素的技术博客
   Fragmented Podcast: 每周一期的 Android 开发音频节目
   Android Weekly: 免费的 Android 周报订阅

Views 的使用

Views 是设备屏幕上用来展示内容的长方形（边界不可见，类似画图软件中的文本框），常见的有 TextView、ImageView、Button。各个 Views 组成了屏幕的布局（Layout）。

下面是一段 TextView 代码。

在 Android Visualizer 的仿真效果如下图。

浏览整段代码，第一行和最后一行是互相呼应的关系，这被称为自闭标签。其中， 是打开，/> 是关闭。每打开一个标签都需要关闭它。除了自闭标签，还有单独标签，即打开标签 与关闭标签 是分开的，这样可以明示其中的子 XML 元素，如下图。

浏览标签内的代码，每句都保持如下格式

    属性名=“实际值”

• 属性名通常为 android:xxx，注意包括前缀 android:。
• 实际值为赋给该属性的值，在双引号内。所有属性都有默认值，不设置则保持默认。

1. 阅读第一句：android:text="Happy Birthday!"
   该属性定义了 TextView 的文本，可以是双引号内的任意内容。

2. 阅读第二句：android:layout_height="100dp"
   该属性定义了 TextView 的高度，其中单位 dp（Density Independent Pixels，密度无关像素）能够实现无论设备分辨率高低，物理尺寸上大小相同。根据 Material Design 建议可接触目标的长和宽至少设置为 48dp。

3. 阅读第三句：android:layout_width="wrap_content"
   该属性定义了 TextView 的宽度，与第二句相同，这里也可以使用单位 dp，但若不想指定固定值，则可以使用 "wrap_content" 表示 TextView 的宽度根据文本自动调整，保持与文本长度一致。如果文本长度超过设备屏幕宽度时，文本会自动换行，此时会忽略 TextView 的高度。举例来说，当 TextView 的高度为一行，而文本为两行时，TextView 的宽度也是两行，将文本全部显示出来。

4. 阅读第四句：android:textSize="34sp"
   该属性定义了 TextView 的文本字体大小，其中单位 sp（Scale Independent Pixels，缩放无关像素）的作用与 dp 类似。字体大小的选择依据可以参考 Material Design，中文版可以参考极客学院的翻译。
   另外，根据 Material Design，类似"wrap_content"，如果不想指定固定值，可以使用以下语句

android:textAppearance="?android:textAppearanceLarge"
android:textAppearance="?android:textAppearanceMedium"
android:textAppearance="?android:textAppearanceSmall"

这三条代码能够将字体大小与设备的系统设置匹配，分别为大号、中号、小号字体。

5. 阅读第五句：android:textColor="#FFFFFF"
   该属性定义了 TextView 的文本颜色，其中实际值的 16 进制代码可以参考 Material Design。

6. 阅读第六句：android:background="#000000"
   该属性定义了 TextView 的背景颜色，实际值设置的方法与第五句相同。这是让 TextView 边界可见的一种方法。

通过阅读上面的代码，可以观察到属性名的命名规则：驼峰命名法 (Camel Case)。其中，驼峰命名法又分为大驼峰命名法 (Upper Camel Case，又称帕斯卡命名法，Pascal Case) 和小驼峰命名法 (Lower Camel Case)。
驼峰命名法要求单词间无空格。大驼峰命名法要求每个单词首字母大写，如 TextView；小驼峰命名法要求首个单词首字母不大写，随后的单词首字母大写，如 textSize、textApprearance、textColor。

1A 课程介绍了 TextView 之外，还简要介绍了 ImageView。下面是一段ImageView代码。

在 Android Visualizer 的仿真效果如下图，这种图片通常称为全出血图片 (Full Bleed Image)。

浏览整段代码，框架与 TextView 相同，同样包含自闭标签。类似地，观察到 ImageView 采用了大驼峰命名法，scaleType、centerCrop 采用了小驼峰命名法。

1. 阅读第一句：android:src="@drawable/cake"
   该属性定义了 ImageView 中显示的图片，实际值 "@drawable/cake" 可以理解为“在 drawable 文件夹中的 cake 图片”，这里无需指定图片的扩展名，但需要将图片放入 drawable 文件夹。
2. 阅读第二句以及第三句：

    android:layout_width="wrap_content"
    android:layout_height="wrap_content"

这两个属性分别定义了 ImageView 的宽度和高度，设置方法 TextView 的对应属性相同。不同的是由于图片的特殊性，不同宽度和高度的 ImageView 所显示出来的图片效果会有一定的复杂性。

3. 阅读第四句：android:scaleType="centerCrop"
   该属性定义了 ImageView 中图片的显示方式，下面举例说明两种。
   （1）centerCrop：将图片放置到 ImageView 中间，会进行缩放，但横纵比不变，缩放至图片的宽度不小于 ImageView 的宽度，长度不小于 ImageView 的长度。缩放的程度取决于图片的宽度和长度哪一个先满足 ImageView 的长度和宽度。
   （2）center：将图片放置到 ImageView 中间，不会进行缩放。因此，若图片小于 ImageView 则会有空白区域；若图片大于 ImageView 则会显示不全，如下图。