iOS教程：创建完整的演练

使用开源Sejima框架创建iOS应用演练组件。

什么是Sejima框架

这个全新的框架提供了常用的用户界面组件，以减少开发时间并大大减少代码重复。

Sketch app用户也可以使用它，因为框架存储库包含Sejima.sketch文件，其中包含所有可用组件以帮助设计人员构建应用程序屏幕。

总览

本教程旨在构建以下演练组件，我们几乎只能使用Storyboards在大多数现代移动应用程序中找到它。

创建xCode项目

启动xCode并创建一个Single View App然后键入“ Next”按钮并将项目命名为“ Walkthrough”。

使用椰子

您可以使用Cocoapods或Carthage安装框架。 让我们为本教程选择Cocoapods。 如果您的计算机上尚未安装该软件，请打开您喜欢的Terminal应用程序并运行以下命令。

 须藤宝石安装cocoapods 

一旦安装了Cocoapods，请使用终端转到您的项目路径，然后键入以下pod命令来设置项目工作区。

  cd桌面/演练/ 
 荚初始化 
 吊舱安装 

如果一切正常，您应该在终端中看到以下内容。

 分析依赖关系 
 下载依赖项 
 生成豆荚项目 
 整合客户项目 

  [！]从现在开始，请关闭任何当前的Xcode会话，并对该项目使用`Walkthrough.xcworkspace`。 
 发送统计 
 吊舱安装完成！  Podfile有0个依赖项，总共安装了0个pod。 

关闭您的xCode项目，然后如上所述，在xCode中打开Walkthrough.xcworkspace 。

安装Sejima框架

从Pods项目中打开Podfile ，然后添加Sejima框架依赖项。

 豆荚'Sejima' 

返回终端并输入install命令，以确保将Sejima框架添加到您的项目中。

 吊舱安装 

 分析依赖关系 
 下载依赖项 
 安装Sejima（0.1.6） 
 生成豆荚项目 
 整合客户项目 
 发送统计 
 吊舱安装完成！  Podfile有1个依赖项，总共安装了1个pod。 

让我们来构建一下演练

页面控制

现在项目已准备就绪，我们可以开始对演练进行“编码”。 打开Main.storyboard文件，并添加具有自定义类MUPageControl的UIView以及下面显示的布局约束。

横向寻呼机

要使本演练页面具有多个屏幕可滚动，请添加具有以下布局约束的自定义类MUHorizontalPager的UIView 。

从“ Attributes Inspector面板中将“ Horizontal Margin更改为20。

跳过按钮

最后，让我们添加一个带有自定义类UIButton及其约束的UIView ，以添加跳过按钮。

调整组件属性

现在，我们将直接在故事板上的Attributes Inspector更改Sejima框架公开的可用组件属性。

主视图

将主视图背景色更改为＃373E40。

跳过按钮

将按钮“ Title ，“ Title Color和“ Background Color更改为“清除颜色”。

页面控制

定义Number of Pages和Current Page Color以及Page Indicator Color 。 也将Background Color更改为“ Clear Color 。

View Controller会自动更新以反映组件属性的更改。

添加演练内容

在情节UIViewController中添加新的UIViewController ，并添加具有以下布局约束的UIImageView 。 从“ Attributes Inspector面板中将“ Content Mode更改为“ Center ”。

标题和详细信息文本组件

使用具有以下布局约束的自定义类MUHeader添加新的UIView 。

在“ Attributes Inspector面板中更改“ Title和“ Detail ” Attributes Inspector 。 不要忘记将“ Background Color更改为“ Clear 。

设计部分就是这样。

让我们做一些编码

打开ViewController.swift文件并如下更新。

选择演练内容视图控制器，并将自定义类定义为WalkthroughContentVC 。

最后，为同一视图控制器定义Outlets 。

您可以在Sejima框架提供的Sample应用程序中找到完整的示例。

MoveUpwards / Sejima
iOS用户界面库。 通过在GitHub上创建一个帐户来为MoveUpwards / Sejima开发做出贡献。 github.com