🔍
How to Make an App for Beginners (2020) - Lesson 1 - YouTube
Channel: CodeWithChris
[0]
您好，欢迎观看如何
在本视频中为初学者 制作应用程序，
[3]
即使
您以前从未编写过单行
[7]
代码，我也会向您展示如何制作应用程序。现在，在接下来的
10 节课结束时，您将构建这些应用程序
[11]
和用户界面，我还将向
您展示如何将它们放在您的手机上，以便
[15]
您可以向您的朋友和
家人展示，但更重要的是，我将
[18]
教您
构建任何类型的应用程序所需的基本技能，因此
[22]
通过学习这些初学者课程，您
将在 iOS 应用程序开发中获得非常好的和坚实
[26]
的基础。从
那里您将想要获取我的免费
[30]
7 天应用程序行动计划，您可以在其中
创建自定义应用程序路线图，以
[35]
构建您的应用程序您还想加入我们
活跃的 Facebook 社区，在那里您 可以获得我自己和
[38]
团队 的帮助和支持 ，
许多其他人都
[42]
像您一样学习 iOS，这样您在
创建
[47]
应用程序的过程中就不会被困或孤单。现在我上次教这个时，它
被超过 120 万人观看，
[51]
并且产生了大量的成功故事
，很多人创建了自己的 移动应用程序，你可以
[56]
在我身后的墙上
看到其中一些 。 现在我知道这
[60]
一切都会为你而来，但一切都
从这里开始，你
[65]
准备好了吗？欢迎来到 CodeWithChris
，如果你想
[74]
学习如何制作应用程序，那就去吧。我是 Chris，
我很高兴你来到这里首先要做的事情是
[78]
如何
从头开始创建一个应用程序，
[80]
这一切都始于一个名为
Xcode 的程序，你可以在其中
[85]
为你的应用程序设计用户界面并编写你的
代码进入一个 iPhone 应用程序
[89]
，您可以将它发布到 App Store
，在那里数以百万计的人可以下载
[93]
和使用它，在此之前让我们回溯
一下。 Xcode 是一个您可以
[97]
免费下载的程序，我将
教您如何编写的代码称为
[101]
Swift 编程语言
如果您以前从未编写过代码，请不要 害怕，
[105]
因为我保证您会掌握
它
[108]
下一个 Xcode 只能安装在 Mac
计算机上，但如果您无法访问
[112]
一台，则无需花费
数千美元购买一台，而是 先
[116]
使用 MacStadium 在 Windows 的 Xcode 上查看我的视频 。
好吧， 让我们开始吧
[121]
，
让我向你展示 Xcode，所以
[125]
你要做的第一件事就是
下载 Xcode，如果你还没有下载 Xcode，你
[128]
所要做的就是点击
CMD +键盘上的空格键以
[132]
启动 Spotlight。
输入 App Store 以启动它，然后
[136]
在 Xcode 中的搜索栏中输入
它现在就会找到它我已经
[142]
安装了它，所以如果你
不想继续这样做，我会
[147]
警告你虽然它是一个相当大的
应用程序，所以它确实需要一些
[150]
时间来安装，如果你不能，如果它
给你一个错误消息或类似的东西
[154]
，
向下滚动检查兼容性
[158]
，如果你点击它，它会告诉你它
的 macOS 版本需要这个
[164]
，它需要 10.13.6
，但是当他们升级 Xcode 时，这个
[168]
数字会越来越高，所以
你可能必须更新你的
[173]
macOS 版本才能安装 Xcode 还要
记住这里的大小，即使
[180]
它说 6.1 Gigs它有时需要
一些额外的空间来进行
[185]
安装，所以一旦你
安装了它，继续打开它，你
[192]
会看到一个这样的对话框
，我们在这个视频中要做的是
[196]
创建一个全新的Xcode 项目，所以 如果
你没有看到那个 di ， 请点击创建一个新的 Xcode 项目
[200]
alog 出于某种
原因，也许你已经启动了 Xcode
[204]
，然后你总是可以去文件去
新建并选择项目，这
[209]
会让你到同一个地方，现在
有一堆不同的模板
[213]
可以帮助你
开始
[218]
在这个 iOS 选项卡下， 您可以
更快 地创建我们想要创建 的内容，
[223]
因为 您可以使用 Xcode
和 Swift
[227]
构建不同的平台 ，这是
学习这两者 的好处 但我们
[231]
今天要做 iOS，我们将
选择单视图应用程序，这
[234]
将为我们提供基本的单页应用程序
或单屏应用程序接下来我们将
[240]
要 配置一些选项
我们的新项目，例如
[244]
名称是什么，它的唯一 ID 是什么，
对于产品名称，您可以将其命名为
[249]
我将选择 hello
world 之类的团队下拉列表，您
[254]
可能在这里没有团队，那就是
现在不重要，但是
[258]
当我要创建一个团队时t 到达
您想要将
[262]
应用程序放在实际设备上 的地步，
稍后我将在
[265]
系列组织名称 中向
您展示如何做到这一点， 我将输入
[269]
您的公司名称或您的个人
名称，然后是
[273]
组织 下的常见内容 标识符是 comm 点，
然后是您的姓名或公司名称，因此 与将成为捆绑标识符
[280]
的产品名称结合起来，
您
[284]
会看到该术语被大量使用
，它基本上就像
[288]
您正在创建的应用程序 的唯一 ID 当您
发布您的应用程序时，当您将其上传到
[294]
应用程序商店时，
您将需要该捆绑 ID 好
[297]
，所以接下来非常重要的是确保
您的语言设置为 Swift，因为
[302]
这是我们在这里学习您可以
不选中这些家伙，然后
[306]
单击下一步，您也可以
不选中源代码控制，我们现在
[311]
不打算进行此操作
，然后单击创建，您现在
[315]
将 拥有全新的 Xcode 项目
有点吓人
[318]
因为有所有这些复选框和
下拉菜单，而且你知道这个界面对于
[323]
以前没有见过它的人来说
是相当混乱的，但我现在要
[326]
和你一起浏览它，我还有
一张带有
[331]
图表和所有 内容的参考表给你Xcode 的键盘快捷键
，所以确保你在
[336]
下面的描述中抓住它，所以我们 将从界面
的左侧开始
[340]
，这是导航器区域
，你会在顶部注意到有
[344]
不同的选项卡你可以单击它
一开始可能不是很清楚，
[348]
但是这些是您可以选择的不同导航 器，到目前为止，
您将使用
[352]
的最常见的 是这个项目
导航器，您可以
[355]
在其中查看 Xcode 项目中的所有文件现在
单击这些文件
[361]
中的任何一个都会改变中间称为编辑器
区域的内容，例如，现在我们
[365]
点击了第一个项目文件， 这就是为什么如果我们
点击 ViewController.Sw ，我们会在编辑器区域中
[372]
看到所有项目 属性 如果
你会看到它变成
[376]
了代码编辑器，这样你就可以编写
swift 代码，然后单击
[380]
Main.Storyboard
，这将
[387]
变成一个编辑器，你可以 在其中
为你的应用程序自定义屏幕
[391]
很快就会这样做，这
实际上称为界面构建器，因此您
[395]
可以了解为什么该名称是
下一个方式让我们转到
[400]
Assets.xcassets 这是您
要为
[405]
项目 放置所有图像的地方 您将要使用
然后 Launchscreen.Storyboard 是
[410]
另一种界面构建器文件
，您可以在其中自定义启动
[416]
屏幕，然后 info.plist
为您的项目提供了一些进一步的属性，因此
[420]
在较高级别上，这些是
默认情况下 的文件 已包含在您的
[427]
Xcode 项目中，现在移动到
屏幕的右侧，我们有
[431]
实用程序窗格，您在此处看到
的内容取决于您在
[436]
编辑器区域内单击的内容，因此这就像
进一步向下钻取 一样 例如，如果我们
[442]
进入 Main.S toryboard，我
点击这个白色区域，这是我的
[447]
视图或我的屏幕，它会向我显示 关于它的
更多细节，在
[454]
Viewcontroller.Swift
如果我点击让我们说一些
[457]
代码，那么它会告诉我
一些与此相关的 信息 但请 记住，
[462]
此实用程序窗格
还有一些不同的 选项卡，您可以
[468]
在此处看到，所以如果我们进入
Main.Storyboard，您会看到
[474]
还有几个选项卡，那是
因为我可以为
[478]
这个元素，所以看起来 Xcode
遇到了内部错误，但
[483]
通常这些都很好，你可以
关闭项目并启动它我现在
[487]
不打算这样做它
在界面顶部很好，你有
[491]
你的 Xcode 工具栏现在在工具栏的左侧
，您有一些按钮来
[496]
运行您的项目和停止您的项目
，然后在右侧这
[500]
实际上是一个下拉列表，您可以
在其中选择现在运行
[504]
项目的目标，如果您插入在你的
手机 里 您实际上可以
[508]
从该下拉列表中选择您的手机，但如果您没有
插入手机，请不要担心
[513]
，因为 Xcode 有一堆模拟器
，您可以在其中运行您的项目，
[518]
它会显示在
我们 的屏幕上'将在 中间
[521]
的一秒钟内 执行此操作，您有您的状态栏
，它将向您展示您的
[526]
项目正在发生的事情，它现在正在做什么
，然后在右侧，这里
[530]
有几个更多的控件
我们将进入
[534]
第二个，但在该工具栏的最右侧，
您会看到这些按钮 ，这些
[539]
按钮
现在 对
[543]
您非常有帮助
这个中间的你会
[546]
注意到它 在这里打开
了一个我们还没有
[550]
讨论过的小托盘，这里的这个窗格
被称为调试控制台，当
[555]
你运行你的项目时，假设
你发生了一个错误'将 在此
[560]
调试控制台 中获得
有关该错误的一些详细信息
[564]
所以默认情况下，
如果
[568]
你想显示它，
它 是
[574]
隐藏
的 继续并
[578]
在模拟器上运行我们的项目，所以在
我现在默认向您展示的下拉菜单中，
[584]
它是 iPhone XR，您可以
选择任何您想尝试的产品，
[588]
只需点击这里
的这个大播放按钮，它就会启动iOS
[593]
类似的现在你第一次这样做
可能需要几分钟，但
[597]
随后
在模拟器启动后会快很多， 所以如果你
[601]
不需要 物理 iPhone 设备
，你实际上并不
[607]
需要物理 iPhone 设备 没有一个你仍然可以构建和
测试你的应用程序现在
[614]
我想提一件事，那就是如果
你的模拟器对你的屏幕来说太大了
[618]
，你看不到所有的东西，你
实际上可以缩小它，所以你可以
[622]
进入
模拟器的菜单并选择你知道ph ysical
[627]
大小或点精确或像素精确
您可以使用这些快捷键 CMD+1、
[632]
CMD+2 或 CMD+3 来更改
您看到的模拟器的大小，
[638]
所以这只是一个方便的提示，以防
模拟器太大而无法使用你的
[642]
屏幕，所以当你的应用程序启动时
，你会看到这个白屏
[646]
，那是因为我们还没有真正
向我们的应用程序添加任何东西，但在
[650]
我们这样做之前，让我们谈谈那个
Xcode 项目是如何变成
[655]
我的这个应用程序的在模拟器中看到这个顶层
是视图
[658]
，它是用户现在看到的屏幕， 您可以从 Xcode
项目 中的
[663]
Main.Storyboard 文件中
配置此视图，其
[666]
下的第二层称为
ViewController。现在这个代码文件
[671]
负责管理视图，
例如当用户点击视图时
[676]
，它会让视图控制器
知道，然后您可以在
[679]
该视图控制器中编写代码来处理该点击 以在
后台 运行某些进程 或
[683]
也许
在屏幕上显示一些新信息你
[687]
现在明白了，这个视图控制器
由 Xcode 项目中的 ViewController.Swift
[691]
文件表示，正如
我们之前所说，如果你点击该文件
[696]
，编辑器区域会变成代码
编辑器，你可以在其中 如果您的应用程序有多个屏幕，现在 编写 Swift 代码来
[700]
管理视图
在大多数情况下，每个
[705]
屏幕都会有自己的
视图和视图控制器现在让我们
[709]
回到 Xcode，我们将停止
我们的项目，我们将继续 在视图 中添加
[712]
一些东西以便有
一些东西可以看到让我们点击
[716]
此处的停止图标，然后单击主
故事板，这样您就会看到
[721]
界面构建器，现在我将在
这里向您介绍这个按钮 calle d
[726]
库按钮，所以如果我们单击
它，它将显示一个对象
[731]
或 UI 元素列表，您可以将其添加到
标签中的视图类型中以搜索
[738]
此人，您所要做的就是单击
并将其拖到您的像这样的视图现在
[746]
您将在视图上看到该标签
现在您可以拖动它
[751]
并定位它，但这
并没有真正做任何事情
[755]
，因为 Xcode 实际上有自己
的定位和调整布局项 的方式
[761]
Xcode使用一个称为自动布局的系统
来定位和调整屏幕上的元素
[766]
这个系统使您可以更轻松 地设计一个
在 iPhone、iPad 和
[770]
未来 iOS 设备的所有其他屏幕尺寸 上看起来不错
的单一界面
[775]
现在基本上您所需要的要做的是
为每个元素指定一个规则列表
[780]
，指示它应该如何
定位以及它应该如何
[783]
相对于屏幕上的其他元素 调整大小
，例如，这个元素应该
[788]
与这个其他元素的高度相同，或者
这个元素应该是 cen 在屏幕 上
[792]
显示这些规则称为
约束，在第二课中，您
[796]
将学习更多关于自动
布局和自动布局约束的知识，但
[800]
现在让我们回到 Xcode 并
看看我们如何定位和
[804]
居中我们的标签在屏幕上好吧
，
[809]
所以
回到
[813]
界面
构建
[819]
器 中
之所以称为一条线，是因为我们希望
[824]
基本上将此标签对齐
在屏幕中心，因此我们将
[829]
在容器中水平和垂直 检查
，然后单击添加到约束，
[834]
您可以立即在此处看到这些
代表您刚刚
[839]
添加 的约束的线 以及标签
在屏幕上居中如果你犯了错误
[844]
不用担心
在这里检查它这称为
[849]
文档大纲它基本上
显示了所有元素和所有
[854]
co nstraints 现在在您的视图中，
所以只需打开约束
[859]
，您可以突出显示您
添加的约束，也许您 犯了错误
[862]
或类似的事情，您可以
立即删除它们我可以点击删除
[867]
并摆脱它们或者，如果您
在此尺寸检查 器
[871]
右侧的实用程序窗格中突出显示它们， 或者
您可以选择不同的检查 器，请
[876]
确保您正在查看
属性检查器或
[881]
尺寸检查器，然后您可以编辑
一些你的约束的属性
[885]
我现在将向你展示
他们现在离开
[889]
文档大纲的前导，所以它们已经消失了我
会再做一次，所以你
[893]
现在可以点击你的标签，你可以进入一行并且
在容器中水平和垂直选择
[900]
，然后添加两个
这样的约束接下来我们
[904]
要做的是我们将
在标签内编辑该单词，因此确保您的标签
[910]
突出显示，然后在右侧
再次制作确定你在看g
[913]
在文本下方的属性检查 器中
，您将能够
[918]
输入任何您想要的内容，我将
输入 hello world 和瞧，所以单击
[924]
Xcode 项目上的“运行”按钮
，它将启动模拟器一次 再次，
[929]
您 应该
会
[934]
看到
类似
[938]
这样
的 内容
[942]
。
下一课你将
[946]
在 Xcode 中构建它，但首先，如果你
喜欢这个视频，请给它竖起大拇指 ，
[950]
点击下面的红色订阅按钮
订阅我的频道
[953]
，如果你不想错过下一
课只需点击那个铃铛图标，就可以知道
[956]
它 什么
时候
[961]
发布
了
[964]
下面
然后只需点击那个拇指 第 2 课的 钉子 ，我
[967]
现在
再见
Most Recent Videos:
You can go back to the homepage right here: Homepage