课程实践 1: 制作第一个 Android App

这是 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)。

  1. 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)
  1. Android Studio 由 Google 提供,到 Android 开发者网站下载安装,成功后软件会正常启动。

具体的安装步骤不再赘述,Udacity 提供了一份 Android Studio 安装故障排除手册可供参考,相信网上也会有大量的资源。另外,因为我用 Mac 开发,所以以下操作都是在 MacBook 进行的。

制作第一个 Android App
  1. Android Studio 初始界面
目前最新版本为 V3.0.1,从 V3.0.0 开始加入 Kotlin 支持

点击第一个选项 "Start a new Android Studio project"。

  1. 配置新工程

一共有四个参数:
(1)Application name(应用名)
显示在 App 应用栏上,也是 App 安装后在设备上显示的名称;
(2)Company Domain(域名)
若无可保持默认;
(3)Package name(安装包名)
默认由应用名和域名的倒叙组成 apk 安装包的名称,可修改,安装包名需要是独一无二的。
(4)Project location(工程存放路径)
工程会存放在名称为应用名的目录内,可修改。

  1. 选择 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 能支持更多的设备,但支持更少的特性。

  1. 选择工程模板

Android Studio 提供了许多工程模板让开发者能够在模板的基础上进行开发,此处选择 Empty Activity。

  1. 为工程文件命名

工程由许多不同类型的文件组成,如图片文件、声音文件、XML 文件、Java 文件等,可以根据 App 需求将他们的名称进行修改,此处保持默认。最后点击 Finish 完成。

  1. 等待底部状态栏加载完成,工程新建完毕

需要注意的是,虽然 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 的界面看上去很复杂,但其实不用了解所有的按钮,只需要在用到时查询即可。此时只需要关注三点:

  1. 左侧 Project 标签显示了工程文件树,双击文件会在中间打开;
  2. 文件底部有两个标签,一般在 Text 下编辑,文件会自动保存,善用撤销 (cmd+z) 和重做 (cmd+shift+z);
  3. 右侧 Preview 标签实时显示效果预览。

到此为止,第一个 Android App 就做好了。从 Android Studio 右侧的 Preview 标签可以看到 App 会显示 "Hello World!" 字样,现在安装到实际的 Android 设备验证。

首先在手机上开启开发者选项 (Developer options) 并勾选 USB 调试 (USB debugging);连接手机后(Windows 平台需要安装驱动)。
准备好后,点击 Android Studio 顶部工具栏的绿色播放按钮或快捷键 "shift+F10" 运行 App,稍后会出现设备选择界面,选择已连接的设备,点击 OK 即可。

Nexus 6P 手机已连接
App 在手机上的实际效果

如果想用模拟器来仿真 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 虽然非常简单,但也有几点需要注意的基础知识点。

  1. 文字要重叠在图片之上,所以 TextView 要放在 ImageView 的下面。最先放上的 Views 在最底层,依次层叠。
  2. 在 ImageView 中,图片 borgesbookshop 需要放在 drawable 目录中,在 Android Studio 左侧工程文件树中展开 res (resource),右键 drawable 点击 "Reveal in Finder" 即可跳到 drawable 目录。注意文件名只能是小写字母或数字,不能出现大写字母或符号。
  3. ImageView 的宽度和高度设置为 "wrap_content" 时,在手机等小屏设备上可能能占满屏幕,但对于平板等大屏设备仍然会在屏幕上显示大片空白,所以 ImageView 的宽度和高度建议设置为 "match_parent",并与 centerCrop 配合使用。
  4. 对于一些由更高的 API 支持的属性,例如 fontFamily 属性只能在 API 16 以上的版本使用,这种情况下,运行在 API 15 或以下的设备不受影响,运行 API 16 或以上的设备对属性有效。
  5. 对于新手,每完成一步都运行 App 到手机进行验证是一个良好的习惯。
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 221,635评论 6 515
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 94,543评论 3 399
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 168,083评论 0 360
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 59,640评论 1 296
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 68,640评论 6 397
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 52,262评论 1 308
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,833评论 3 421
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,736评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 46,280评论 1 319
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 38,369评论 3 340
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,503评论 1 352
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 36,185评论 5 350
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,870评论 3 333
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 32,340评论 0 24
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,460评论 1 272
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,909评论 3 376
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 45,512评论 2 359

推荐阅读更多精彩内容