刚开始?
使用我们新的 XDK!XDK 可以为用户提供更丰富的消息体验,并将添加新功能。请在https://github.com/layerhq/iOS-XDK查看仓库。不要担心,Atlas-iOS 同时仍将得到支持。
Atlas
Atlas 是一套轻量级、灵活的用户界面组件集合,旨在帮助开发者快速轻松地将原生通信体验集成到他们的应用程序中。它是从头设计的,以便与 LayerKit 集成,LayerKit 是访问 Layer 通信平台的原生 iOS SDK。LayerKit 为开发者提供了一个简单、面向对象的接口,用于访问 Layer 平台提供的丰富消息功能。Atlas 在此基础上提供了现成的 UI 组件,这些组件直接向用户展示了这些功能。
概览
Atlas提供多种完整的用户界面体验以及大量独立的视图库。它旨在同时解决三个使用场景。
- 提供开箱即用的美观、高质量的消息体验,默认情况下,Atlas的风格与iMessage非常相似。
- 通过集成
UIAppearance
和Interface Builder,可以快速轻松地对用户体验进行品牌化。所有字体、颜色等内容都可以通过一组丰富的UIAppearance
选择器进行自定义。这使得开发者能够迅速将消息功能添加到现有应用程序中,并将组件与现有风格相匹配。 - 通过允许开发者将自定义视图插入到任何一种体验中,以完全自定义用户界面。开发者应在保留驱动消息UI的框架的同时实现任何设计。
Atlas与LayerKit深度集成。这将实现与通信API的最大集成,并保持用户界面组件非常干净、简单和轻量级。LayerKit提供三个基本模型(对话、消息和消息部分)和一个用于访问消息数据查询系统。这些模型和查询功能用于驱动Atlas UI组件。
需求
Atlas需要iOS >= 8.0。每个版本对LayerKit的版本要求是紧密耦合的。请参阅发布说明以获取具体信息。
示例应用
为了更容易地开始使用Atlas,我们提供了Atlas Messenger示例应用程序。源代码库中包含构建说明。或者,您可以通过访问Experience Atlas页面,在自己的Layer沙盒中检查Atlas。
API 快速入门
下表详细介绍了Atlas中最重要的类,并直接链接到当前头文件。所有类都有完整的文档。
控制器 | |
---|---|
ATLAddressBarViewController | 一个提供可选消息用户的可搜索地址输入体验的控制器。 |
ATLConversationListViewController | 一个提供所有用户所有对话的可编辑列表的控制器。 |
ATLConversationViewController | 一个提供可滚动、自动分页查看对话中消息的控制器。 |
ATLParticipantTableViewController | 一个提供可选参与通信的排序、可搜索表格视图的控制器。 |
ATLTypingIndicatorViewController | 一个提供打字提示视图并显示参与者名单的控制器。 |
协议 | |
ATLAvatarItem | 一个对象采用的协议,用于表示用户头像。 |
ATLConversationPresenting | 视图采用的协议,用于展示Layer Conversation对象。 |
ATLMessagePresenting | 视图采用的协议,用于展示Layer Message对象。 |
ATLParticipant | 对象采用的协议,用于表示会话中的参与者。 |
ATLParticipantPresenting | 对象采用的协议,用于表示会话中的参与者。 |
视图 | |
ATLMessageInputToolbar | 一个提供动态尺寸消息输入界面的输入工具栏。 |
ATLMessageComposeTextView | 一个支持文本、图片和位置数据的灵活、可扩展的文本视图。 |
完整的API文档可以在 CocoaDocs 上找到。
安装
Atlas可以通过CocoaPods直接集成到您的应用程序中,或者直接导入源代码文件。请注意,Atlas直接依赖于LayerKit,必须满足此依赖才能构建组件。
CocoaPods安装
推荐的安装路径是 CocoaPods。CocoaPods提供了一种简单、按版本的依赖管理系统,它自动化了手动配置库和框架的繁琐和容易出错的部分。您可以通过以下方式使用CocoaPods将Atlas添加到您的项目中
$ sudo gem install cocoapods
$ pod setup
现在在您的项目目录的根目录下创建一个 Podfile
并添加以下内容
pod 'Atlas'
执行以下完成为完成安装
$ pod install
这些说明将为您的本地CocoaPods环境设置并将Atlas导入您的项目中。
Carthage安装
Atlas和LayerKit还支持通过 Carthage 进行安装。Carthage是一个设计得尽可能简单的简单集中式包管理器。Carthage不会对你的项目进行任何修改,所以安装过程比CocoaPods更复杂一些。要开始,请确保你已经 安装了Carthage,然后创建一个Cartfile
,内容如下
github "layerhq/Atlas-iOS"
接下来通过执行 carthage update
来初始化你的环境
$ carthage update
接下来,将 Atlas.framework
和 LayerKit.framework
从 Carthage/Build/iOS
复制到您的项目中,并链接到您的应用程序目标。然后在 Xcode 中选择您的应用程序目标,转到 构建阶段 面板,点击 +
图标,选择 新建运行脚本阶段。设置内容为:
/usr/local/bin/carthage copy-frameworks
在 输入文件 部分添加
$(SRCROOT)/Carthage/Build/iOS/LayerKit.framework
$(SRCROOT)/Carthage/Build/iOS/Atlas.framework
现在构建您的应用程序目标,一切应该已经设置好了。
源代码安装
如果您希望直接从源代码将 Atlas 安装到您的应用程序中,那么请克隆存储库并将代码和资源添加到您的应用程序中
- 从
代码
和资源
目录将文件拖放到项目中,并指示 Xcode 将项目复制到目标组文件夹中。 - 更新项目设置,包括链接器标志:
-ObjC -lz
- 将以下 Cocoa SDK 框架添加到您的项目中:
'CFNetwork', 'Security', 'MobileCoreServices', 'SystemConfiguration', 'CoreLocation', 'AssetsLibrary', 'ImageIO'
请注意,LayerKit 是 Atlas 的依赖项。在手动安装 Atlas 时, LayerKit 也必须以相同的方式安装。有关如何操作的说明,请参阅 LayerKit 发布存储库。
构建并运行您的项目以验证安装成功。
入门
- 子类化 - 继承 ATLConversationViewController 或 ATLConversationListViewController
- 实现 - 这两个控制器都声明了委托和数据源协议。您的子类必须实现这些协议。
- 自定义 - Atlas 利用
UIAppearance
协议,允许轻松定制组件。 - 通信 - 使用 LayerKit SDK 和 Atlas 构建引人入胜的通讯应用程序。
MIME 类型
Layer 消息包含任意数量的消息部分。每个消息部分都使用了开发者指定的 MIME 类型。Atlas 利用 MIME 类型的信息来确定如何处理特定的消息部分。开发者必须注意为内容分配合适的 MIME 类型,否则 Atlas 将无法处理。为了方便起见,Atlas 导出了一些常量,用于其支持的 MIME 类型。
NSString *ATLMIMETypeTextPlain; // text/plain
NSString *ATLMIMETypeImagePNG; // image/png
NSString *ATLMIMETypeImageJPEG; // image/jpeg
NSString *ATLMIMETypeImageGIF; // image/gif
NSString *ATLMIMETypeLocation; // location
注意:设置 LYRClient
属性 autoDownloadMIMETypes
,包括 ATLMIMETypeImageJPEGPreview
和 ATLMIMETypeImageGIFPreview
,以确保 Atlas UI 正确显示预览。
组件详情
ATLConversationListViewController
《ATLConversationListViewController》提供了用于显示层对话列表的自定义 UITableViewController
子类。对话通过对话标签、最新消息内容和最后一条消息的日期表示。此控制器处理基于最后一条消息日期获取和排序对话。
初始化
《ATLConversationListViewController》使用 LYRClient 对象进行初始化。
ATLConversationListViewController *viewController = [ATLConversationListViewController conversationListViewControllerWithLayerClient:layerClient];
自定义
《ATLConversationListViewController》显示《ATLConversationTableViewCell》。单元格本身通过 UIAppearance
选择器提供可定制性。
[[ATLConversationTableViewCell appearance] setConversationLabelFont:[UIFont boldSystemFontOfSize:14]];
[[ATLConversationTableViewCell appearance] setConversationLabelColor:[UIColor blackColor]];
ATLConversationViewController
《ATLConversationViewController》提供了用于显示单个层对话的自定义 UICollectionViewController
子类。控制器使用 LYRClient
对象和 LYRConversation
对象进行初始化。它通过 LayerKit 获取、显示和发送消息。控制器利用《ATLMessageInputToolbar》对象允许文本和内容输入。
初始化
ATLConverationViewController *viewController = [ATLConversationViewController conversationViewControllerWithLayerClient:self.layerClient];
定制
ATLConversationViewController 组件展示接收和发出的 ATLMessageCollectionViewCell 风格。单元格本身通过 UIAppearance 选择器提供定制功能。
[[ATLOutgoingMessageCollectionViewCell appearance] setMessageTextColor:[UIColor whiteColor]];
[[ATLOutgoingMessageCollectionViewCell appearance] setMessageTextFont:[UIFont systemFontOfSize:14]];
[[ATLOutgoingMessageCollectionViewCell appearance] setBubbleViewColor:[UIColor blueColor]];
ATLParticipantTableViewController
ATLParticipantTableViewController 提供了一个用于显示符合 ATLParticipant 协议的用户列表的 UINavigationController
子类。控制器支持根据姓氏或名字排序和排序参与者。控制器还提供多选支持和可选的选择器。
初始化
ATLParticipantTableViewController 使用参与者列表和排序类型进行初始化。
ATLParticipantPickerSortType sortType = ATLParticipantPickerSortTypeFirstName;
ATLParticipantTableViewController *controller = [ATLParticipantTableViewController participantTableViewControllerWithParticipants:participants sortType:sortType];
定制
ATLParticipantTableViewController 显示 ATLParticipantTableViewCell。单元格本身通过 UIAppearance
选择器提供定制功能。
[[ATLParticipantTableViewCell appearance] setTitleColor:[UIColor blackColor]];
[[ATLParticipantTableViewCell appearance] setTitleFont:[UIFont systemFontOfSize:14]];
订阅者
虽然Atlas组件提供了高度可定制的TableView和CollectionView单元格,但可以通过实现自定义单元格并设置组件的cellClass
属性来实现UI组件的高级定制。Atlas组件的CollectionView和TableView单元格共享一个共同的展示器模式,其中每个显示在组件中的单元格都符合一个特定的展示器协议。如果您想用自己构建的单元格替换默认单元格,可以通过实现符合展示器模式的单元格并设置控制器中的cellClass
属性来轻松实现。
展示器包括ATLParticipantPresenting、ATLConversationPresenting和ATLMessagePresenting。
配置UI外观
Atlas利用了Apple的UIAppearance
协议,这使得您能够非常容易地更改UI外观。以下是一个符合UIAppearance
的所有Atlas属性的列表。
ATLMessageCollectionViewCell
ATLOutgoingMessageCollectionViewCell和ATLIncomingMessageCollectionViewCell继承这个类)
(@property (nonatomic) UIFont *messageTextFont
@property (nonatomic) UIColor *messageTextColor
@property (nonatomic) UIColor *messageLinkTextColor
@property (nonatomic) UIColor *bubbleViewColor
@property (nonatomic) CGFloat bubbleViewCornerRadius
ATLAddressBarTextView
@property (nonatomic) UIFont *addressBarFont
@property (nonatomic) UIColor *addressBarTextColor
@property (nonatomic) UIColor *addressBarHighlightColor
ATLAvatarView
@property (nonatomic) UIImage *imageView;
@property (nonatomic) CGFloat avatarImageViewDiameter
@property (nonatomic) UIFont *initialsFont
@property (nonatomic) UIColor *initialsColor
@property (nonatomic) UIColor *imageViewBackgroundColor
@property (nonatomic) BOOL presenceStatusEnabled;
@property (nonatomic) LYRIdentityPresenceStatus presenceStatus;
ATLPresenceStatusView
@property (nonatomic) UIColor *statusColor;
@property (nonatomic) UIColor *statusBackgroundColor;
@property (nonatomic) ATLMPresenceStatusViewMode mode;
ATLConversationCollectionViewHeader
@property (nonatomic) UIFont *participantLabelFont
@property (nonatomic) UIColor *participantLabelTextColor
ATLConversationTableViewCell
@property (nonatomic) UIFont *conversationTitleLabelFont
@property (nonatomic) UIColor *conversationTitleLabelColor
@property (nonatomic) UIFont *lastMessageLabelFont
@property (nonatomic) UIColor *lastMessageLabelColor
@property (nonatomic) UIFont *dateLabelFont
@property (nonatomic) UIColor *dateLabelColor
@property (nonatomic) UIColor *unreadMessageIndicatorBackgroundColor
@property (nonatomic) UIColor *cellBackgroundColor
ATLParticipantSectionHeaderView
@property (nonatomic) UIFont *sectionHeaderFont
@property (nonatomic) UIColor *sectionHeaderTextColor
@property (nonatomic) UIColor *sectionHeaderBackgroundColor
ATLParticipantTableViewCell
@property (nonatomic) UIFont *titleFont
@property (nonatomic) UIFont *boldTitleFont
@property (nonatomic) UIColor *titleColor
自定义消息气泡
希望利用《ATLMessageCollectionViewCell》中的Atlas消息气泡外观的应用程序,但希望在气泡内部显示自己的UI,应创建《ATLBaseCollectionViewCell》的子类。
应用程序应将子视图添加到子类的《bubbleView》属性中,并通过调用《updateBubbleWidth:》来配置气泡宽度。
[self updateBubbleWidth:<cell_width>];
此外,应用程序可以通过调用configureCellForType:
来指定单元格是传入还是传出。传出单元格将被锚定到收集视图的右侧,而传入单元格将被锚定到左侧。
[self configureCellForType:ATLOutgoingCellType];
or
[self configureCellForType:ATLIncomingCellType];
贡献
Atlas是由Layer维护的一个开源项目。反馈和贡献总是受欢迎的,维护者会尽量快速处理补丁。请随意在GitHub上提交拉取请求或问题。
许可证
Atlas是在Apache许可证2.0的条款下授权的。有关详细信息,请参阅LICENSE文件。
联系方式
Atlas是由Layer团队在旧金山开发的。如果您对这个项目有任何技术问题或关切,请随时联系Layer支持。