Tag: Tim Robinson

构建像Lego这样的应用程序—教程12

用图像，标签和按钮插座构建自定义的“产品”单元。 1.简介 在本教程12中，我们将使用“自动布局”，堆栈视图，图像视图，标签和按钮为“产品”场景构建自定义单元格布局。 表格视图将动态调整单元格的大小以适合内容。 2.从这里开始 在教程11中，我们通过自动调整单元格高度来结束“新闻”场景。 如果您从那里继续，那么您将拥有所需的一切。 跳至步骤3。 如果您想从本教程重新开始 ，可以按照以下步骤下载项目： 👉启动终端应用程序（从“应用程序”文件夹中）。 Terminal在终端中，输入：cd〜 cd ~/Documents ，然后按Return 。 👉将以下内容粘贴到Terminal中，然后按Return ： git clone –recurse-submodules –branch Start-Tutorial-12 https://bitbucket.org/barefeetware/lego-tutorial-social.git Terminal在终端中查看下载进度，然后等待下载完成。 👉在您的Documents文件夹中，打开lego-tutorial-social文件夹。 👉打开Social.xcode.proj文件。 本教程假定您知道如何完成本系列中已经介绍的任务。 如果不确定，请回顾以前的教程中更详细的步骤。 3.删除文件 在将更多文件添加到项目之前，让我们删除一些不再需要的文件。 当我们第一次创建项目时， FirstViewController.swift和SecondViewController.swift文件是作为Tabbed App模板的一部分创建的。 我们已经从使用这些文件的情节提要中删除了场景（并用“新闻和产品”场景替换了它们），因此我们也可以删除这些Swift文件。 👉在项目浏览器中单击FirstViewController.swift文件一次。 按键盘上的delete键。 Xcode提示您进行确认。 单击Move to Trash按钮。 👉同样，单击SecondViewController.swift文件并将其删除（即， Move to Trash ）。 Project Navigator显示这些文件已消失。 或者，我们可以单击第一个文件，按住Shift键单击第二个文件，以选择两个文件，然后按Delete键立即将两个文件删除。 4.产品单元 让我们使用在教程7中创建“新闻”单元时所学的知识，快速创建“产品”单元。 我们的目标是像在Lego中一样将子视图组装成堆栈视图。 👉控制单击或右键单击“ Social组”文件夹。 在出现的弹出菜单中，选择“ […]

构建像Lego这样的应用程序-教程2

风景和场景 1.简介 导航移动应用程序与使用Web浏览器根本不同。 客户喜欢移动UI（用户界面）的简单性和可预测性。 他们可以使用相同的导航操作从一个应用程序切换到另一个应用程序，以在功能之间切换，滚动列表，向下钻取更具体的内容等等。 在本系列的教程2中，我们将讨论如何在其他内容中管理视觉内容，包括超级视图中的子视图以及父场景中的子场景。 我们将介绍标签栏控制器和标签栏。 确保您已完成本系列的教程1。 我们将从教程1停止的地方开始。 回想一下，我们的目标是构建一个看起来像这样的应用程序： 在教程1中，我们创建了一个模板选项卡式应用程序。 它只有两个标签栏项目（底部的“新闻/第一和第二”图标），但是我们需要三个标签栏项目。 我们还需要每个导航栏。 每个场景（新闻，产品和聊天）都需要一个滚动列表。 2.场景，视图控制器和视图 为了组装我们的应用程序，我们需要知道用于描述基本构建块的三个术语：“场景”，“视图控制器”和“视图”。 场景提供了要显示在iPhone屏幕上的内容。 它包含一个视图和一个视图控制器。 场景的视图包含要显示的视觉元素。 场景的视图控制器是告诉场景的代码。 术语“场景”和“视图控制器”通常可互换使用，表示同一事物。 非正式地，您可能还会听到人们将其称为“页面”，“窗口”或“屏幕”。 从技术上讲，iPhone仅具有一个物理“屏幕”，每个应用程序都仅存在于一个“窗口”中。 👉在项目浏览器中，单击Main.storyboard将其选中。 you如您所见，在Xcode的Interface Builder中，情节提要包含我们在教程1中创建的三个关联场景，标题分别为： Tab Bar Controller ， News和Second 。 👁在文档大纲中查找。 您可以在大纲视图中看到相同的三个场景，每个Scene都以后缀Scene命名。 在应用程序中导航时，它会呈现不同的场景。 到目前为止，当我们运行应用程序时，我们可以在新闻场景和第二场景之间切换。 场景的视觉内容称为其“视图”。 👉在“文档大纲”中，展开“ News Scene和位于其下方的“ News视图控制器（通过单击每个视图左侧的三角形）。 👁您可以看到它包含“ News视图控制器和场景的“ View 。 3.超级视图和子视图 视图始终具有矩形形状。 一个视图可能包含其他视图。 包含的视图称为“超级视图”，其中的视图称为“子视图”。 例如，我们的News场景的视图当前包含两个子视图： News标签和Loaded by FirstViewController标签。 👉在文档大纲中展开“ News […]

构建像Lego这样的应用程序-教程1

创建一个应用模板 1.简介 我们所有人每天都在使用应用来简化和丰富我们的生活，但是构建它们似乎是一项巨大的挑战。 如果您对应用程序有一个想法-甚至是一个非常简单的想法-雇用某人创建它可能会花费数千美元。 实际上，开始并不难。 在本系列中，我将演示您可以像创建乐高积木一样轻松地创建应用程序。 我们将共同努力： 可视地创建真正的工程组件。 像乐高积木一样组装它们。 在iPhone上运行该应用。 LEGO®是LEGO Group of Companies的商标，并不赞助，授权或认可本教程系列。 我们构建的应用程序将真正做到“原生”。 我们将使用Apple的工具集来构建iOS平台“原生”的应用程序。 这将是一个真实的应用程序，而不是使用某些原型工具构建的，也不是设计为看起来像应用程序的网页。 该应用程序将如下所示： 您可以在Tutorial Index上达到顶峰，但是您需要从本教程开始按顺序进行学习。 要继续学习本教程系列，您不需要成为专家。 您只需要： 能够运行最新软件的Mac。 Xcode（我们将在第一个教程中一起下载）。 有关如何使用Mac的实用知识，例如如何：启动应用程序，双击，拖动文件，按住Shift键，控制单击，复制和粘贴以及选择多个对象。 渴望学习如何构建应用程序。 如果您是寻找最佳原型和应用程序设计工具的设计师，请先通读： 像Lego一样构建应用程序-设计师简介 2.安装Xcode 首先，您将需要Apple的Xcode软件。 免费。 在本教程中，我将展示Xcode 10.1。 尽管下载量较大（6GB），但这是因为它包含构建iPhone，iPad，Mac和Apple TV应用程序所需的一切。 Mac在Mac上，启动App Store并搜索Xcode 。 下载并安装。 根据您的Internet连接和Mac的速度，这可能需要一两个小时。 因此，您可能想吃午饭或继续吃点别的东西。 👉启动Xcode。 code首次启动Xcode时，可能会要求许可以安装更多组件。 允许它这样做。 准备就绪后，您将看到“欢迎使用Xcode”窗口。 3.创建一个新项目 好。 现在我们准备构建一个应用程序。 👉单击Create a new Xcode project 。 code […]

构建像Lego这样的应用程序—教程11

动态尺寸 1.简介 在教程10中，我们完成了“新闻”单元格中的属性。 当我们在运行时查看单元格时，详细信息文本和图像都被截断并且没有显示其全部内容。 在本教程11中，我们将采用一些机制来允许内容增长，并使单元自动设置其大小。 2.默认像元高度 创建NewsTableViewCell布局时，我们在顶部和底部边距处都包含了约束。 这使单元可以确定显示所有内容所需的高度（即“内部内容大小”）。 如果文本或图像变大，则单元格知道它需要更高的高度。 默认情况下，表格视图将自动确定其单元格的高度以适合其内容。 👉选择“新闻”场景中的两个单元格。 一种方法是单击一个单元格，然后在单击另一个单元格的同时按住shift键。 选择大小检查器（标尺图标）。 Size在“大小”检查器中的“ Row Height标签旁边，关闭“ Custom复选框。 Row Height字段将更改为Default 。 画布中的单元格缩小到44点高。 您将不再看到内容。 👉运行应用程序。 在运行时，表格视图动态设置单元格的高度以匹配内容。 但是，在设计时，仅看到单元格高44点并不能为我们提供有用的预览。 这是一个难题。 如果我们使用自定义高度，则设计时间单元格是有用的高度，但是它们不会在运行时进行调整。 如果使用默认高度，则在设计时压缩单元格内容，但在运行时动态调整。 幸运的是，我们可以选择将单元格的高度设置为Interface Builder中看起来不错的值（即在设计时），并修改视图控制器以动态设置每个单元格的高度以适合其运行时的内容。 3.查看控制器单元的高度 如前所述，每个场景都有一个“视图控制器”，其中包含运行它的代码。 顾名思义，视图控制器在运行时控制场景内的所有视图（包括单元格的高度）。 我们需要视图控制器中的代码来动态调整像元高度。 幸运的是，这些代码已经在BFWControl框架中为我们编写了。 首先，让我们将Interface Builder中的单元格恢复为有用的预览高度。 👉切换回Xcode。 在仍选中两个单元格的情况下，在“大小”检查器中，将“ Row Height输入为220 。 我们可以输入我们喜欢的任何行高，以便合理地预览情节提要中的单元格。 我们也可以像以前一样通过拖动单元格的底部手柄来调整它们的高度。 其次，我们将告诉视图控制器在运行时设置每个单元格的高度，以匹配其内容的固有高度。 我们只需要将News视图控制器更改为AdjustingTableViewController并打开其intrinsicHeightCells属性即可。 clicking通过单击标题栏中的黄色图标来选择表视图控制器。 在右侧面板中选择“身份检查器”。 👉在Identity Inspector中的“ Class字段中，键入Adj然后从弹出菜单中选择AdjustingTableViewController 。 点击Return或Tab （在键盘上）。 Xcode应该以BFWControls自动输入Module […]