这是 Android 开发(入门)课程 的第一部分《布局和交互》的第一次课程实践,导师是 Lyla Fujiwara,主要内容是安装 Android Studio 并制作第一个 Android App。
安装 Android Studio
在前两节课利用 XMLV 查看仿真效果之后,从现在开始,终于可以用真正的 IDE: Android Studio 来学习和实践 Android 了。
把 Android Studio 看作开发 Android App 的工作室,JDK 则是工具箱。因此,在安装 Android Studio 之前,需要先安装 JDK (Java Development Kit)。
- Java 由 Oracle 支持与维护,到下载页面选择相应包下载安装 JDK,完成后打开 Terminal 输入
java -version
验证安装是否成功,若成功,返回值如下:
java version "9.0.1"
Java(TM) SE Runtime Environment (build 9.0.1+11)
Java HotSpot(TM) 64-Bit Server VM (build 9.0.1+11, mixed mode)
- Android Studio 由 Google 提供,到 Android 开发者网站下载安装,成功后软件会正常启动。
具体的安装步骤不再赘述,Udacity 提供了一份 Android Studio 安装故障排除手册可供参考,相信网上也会有大量的资源。另外,因为我用 Mac 开发,所以以下操作都是在 MacBook 进行的。
制作第一个 Android App
- Android Studio 初始界面
点击第一个选项 "Start a new Android Studio project"。
- 配置新工程
一共有四个参数:
(1)Application name(应用名)
显示在 App 应用栏上,也是 App 安装后在设备上显示的名称;
(2)Company Domain(域名)
若无可保持默认;
(3)Package name(安装包名)
默认由应用名和域名的倒叙组成 apk 安装包的名称,可修改,安装包名需要是独一无二的。
(4)Project location(工程存放路径)
工程会存放在名称为应用名的目录内,可修改。
- 选择 App 运行设备和最低 SDK 版本
(1)App 运行设备可选择手机和平板 (Phone and Tablet)、可穿戴设备 (Wear)、电视 (TV)、汽车 (Android Auto)、物联网设备 (Android Things)。
(2)最低 SDK 版本 (Minimum SDK) 可点击 "Help me choose" 帮助选择。例如选择 "API 15: Android 4.0.3 (IceCreamSandwich)" 后,左侧可见目前已支持所有 Android 设备,右侧列出支持的特性,如下图所示。
低版本的 SDK 或 API 能支持更多的设备,但支持更少的特性。
- 选择工程模板
Android Studio 提供了许多工程模板让开发者能够在模板的基础上进行开发,此处选择 Empty Activity。
- 为工程文件命名
工程由许多不同类型的文件组成,如图片文件、声音文件、XML 文件、Java 文件等,可以根据 App 需求将他们的名称进行修改,此处保持默认。最后点击 Finish 完成。
- 等待底部状态栏加载完成,工程新建完毕
需要注意的是,虽然 Google 一直都致力于改善 Android 平台,添加一些出色的新功能,这对开发者来说是个好事,但是有时候也会给教育带来难题。最近,Google 推出了“约束布局 (ConstraintLayout)”,它包含各种不同的组件,让开发者能快速制作自适应 UI。尽管如此,但在本课程中,仍将使用更简单的 RelativeLayout 和 LinearLayout。因此,打开 "app/src/main/res/layout/activity_main.xml" 将以下代码替换 Android Studio 自动生成的 ConstraintLayout 代码。
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
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="com.example.hsujin.helloworld.MainActivity">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!" />
</RelativeLayout>
Android Studio 的界面看上去很复杂,但其实不用了解所有的按钮,只需要在用到时查询即可。此时只需要关注三点:
- 左侧 Project 标签显示了工程文件树,双击文件会在中间打开;
- 文件底部有两个标签,一般在 Text 下编辑,文件会自动保存,善用撤销 (cmd+z) 和重做 (cmd+shift+z);
- 右侧 Preview 标签实时显示效果预览。
到此为止,第一个 Android App 就做好了。从 Android Studio 右侧的 Preview 标签可以看到 App 会显示 "Hello World!" 字样,现在安装到实际的 Android 设备验证。
首先在手机上开启开发者选项 (Developer options) 并勾选 USB 调试 (USB debugging);连接手机后(Windows 平台需要安装驱动)。
准备好后,点击 Android Studio 顶部工具栏的绿色播放按钮或快捷键 "shift+F10" 运行 App,稍后会出现设备选择界面,选择已连接的设备,点击 OK 即可。
如果想用模拟器来仿真 App,则在上面的设备选择界面点击 "Create New Virtual Device" 新建一台虚拟 Android 设备。如果虚拟设备启动后没有自动打开 App,可以再次点击运行按钮 (shift+F10) 并选择虚拟设备,运行结果如下图所示。
App 在虚拟设备上的效果这种方法会大量消耗电脑的性能,并存在 bugs,若要取得可靠的调试结果,建议使用硬件调试。
课程至此,我做了第一个实战项目——商家信息应用。这是个简单的 XML 练习,源码如下。
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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=".MainActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ImageView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:scaleType="centerCrop"
android:src="@drawable/borgesbookshop" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:paddingTop="16dp"
android:text="Borges Bookshop. 小而精的独立文学书店"
android:textColor="@android:color/black"
android:textSize="16sp" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="right"
android:paddingBottom="16dp"
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:paddingTop="8dp"
android:text="不卖畅销书,书籍按作者姓名字母排列摆放。"
android:textColor="@android:color/black"
android:textSize="16sp" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:text="地址:广州市海珠区怡乐路95号二层"
android:textSize="15sp" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:paddingTop="8dp"
android:text="电话:020-83340575"
android:textSize="15sp" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:paddingTop="8dp"
android:text="电邮:borgeslibreria@vip.163.com"
android:textSize="15sp" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingBottom="16dp"
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:paddingTop="8dp"
android:text="微博:http://weibo.com/cantonbon"
android:textSize="15sp" />
</LinearLayout>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="16dp"
android:text="博\n尔\n赫\n斯\n书\n店"
android:textColor="@android:color/white"
android:textSize="34sp"
android:textStyle="bold" />
</RelativeLayout>
App 效果如图所示。
商家信息应用这个 App 虽然非常简单,但也有几点需要注意的基础知识点。
- 文字要重叠在图片之上,所以 TextView 要放在 ImageView 的下面。最先放上的 Views 在最底层,依次层叠。
- 在 ImageView 中,图片 borgesbookshop 需要放在 drawable 目录中,在 Android Studio 左侧工程文件树中展开 res (resource),右键 drawable 点击 "Reveal in Finder" 即可跳到 drawable 目录。注意文件名只能是小写字母或数字,不能出现大写字母或符号。
- ImageView 的宽度和高度设置为 "wrap_content" 时,在手机等小屏设备上可能能占满屏幕,但对于平板等大屏设备仍然会在屏幕上显示大片空白,所以 ImageView 的宽度和高度建议设置为 "match_parent",并与 centerCrop 配合使用。
- 对于一些由更高的 API 支持的属性,例如 fontFamily 属性只能在 API 16 以上的版本使用,这种情况下,运行在 API 15 或以下的设备不受影响,运行 API 16 或以上的设备对属性有效。
- 对于新手,每完成一步都运行 App 到手机进行验证是一个良好的习惯。
网友评论