布局 | 永久链接 | 当前页面 | GitHub 链接 |
---|---|---|---|
默认 |
/ios-sdk |
iOS SDK |
pixlee-ios-sdk
此 SDK 使 Pixlee 客户能够轻松地在他们本地的 iOS 应用程序中包含 Pixlee 相册。它包括一个用于 Pixlee 相册 API 的本地包装器,以及一些即可使用又可定制的 UI 元素,以便您快速开始。此存储库包括 Pixlee iOS SDK 以及一个示例项目,说明如何使用它。
注意:请注意文档中的这些条款。
- 文档中使用“内容”这个词。这指的是照片或视频。
- PXLPhoto 类表示一项内容,可以是照片或视频
基本:目录表
高级:目录
关于SDK
在访问Pixlee API之前,您必须初始化apiKey
属性中设置。然后,您可以使用该单例实例对Pixlee API进行调用。
要加载专辑中的PXLPhotos(content),有两种方法:https://developers.pixlee.com/reference#get-approved-content-from-album或https://developers.pixlee.com/reference#get-approved-content-for-product。
如果要从单个专辑检索内容,请使用sortOptions
和filterOptions”(请参见标头文件以获取更多详细信息),在调用
loadNextPageOfPhotos:
以加载数据之前。您可以通过PXLClient
加载PXLPhotos(content),只需使用loadNextPageOfPhotosForAlbum(album, completionHandler)
。它将按页加载专辑内容,逐页调用loadNextPageOfPhotos:
,并在完成块中返回新加载数据,同时更新专辑内容数组以获取所有内容。
使用演示应用程序开始
-
在终端中打开< strong>示例 文件夹。
-
运行此命令。(您的计算机上没有安装Pod吗?请点击此处以在实际操作前安装Pod )
pod install
-
根据您的要求打开Xcode项目文件
- 选择1:Cocoapods:Example/ExamplePod.xcworkspace
- 选择2:Cartage:Example/ExampleCarthage.xcodeproj
- 选择3:Swift包管理器:Example/ExampleSPM.xcodeproj
-
在Example/Example目录下创建名为PixleeCredentials.plist的文件
- 将以下4个元素添加到PixleeCredentials.plist
- PIXLEE_API_KEY:(String) "替换为您的自定义值" (https://app.pixlee.com/app#settings/pixlee_api)
- PIXLEE_SECRET_KEY:(String) "替换为您的自定义值" (查看:https://app.pixlee.com/app#settings/pixlee_api)
- PIXLEE_ALBUM_ID:(String) "替换为您的自定义值" (查看:https://app.pixlee.com/app#albums)
- PIXLEE_SKU:(String) "替换为您的自定义值" (查看:https://app.pixlee.com/app#products)
- PIXLEE_REGION_ID:(String) "替换为您的自定义值" (查看:https://app.pixlee.com/app#products)
- 将以下4个元素添加到PixleeCredentials.plist
-
在Xcode中,通过点击菜单栏中的产品>运行或按键盘上的Command + R来运行应用程序。
安装
您可以选择以下两种方式之一将SDK添加到您的应用程序中。请将PixleeSDK版本
替换为。
CocoaPods
CocoaPods 是一个用于Cocoa项目的依赖管理器。有关用法和安装说明,请访问他们的网站。要使用CocoaPods将 Alamofire 集成到 Xcode 项目中,请在您的 Podfile
中指定它。
target 'MyApp' do
pod 'PixleeSDK', '~> <PixleeSDK version like 2.5.1>' (Replace with current version, you can find the current version at https://github.com/pixlee/pixlee-ios-sdk/releases)
end
Carthage
Carthage 是一个分散式的依赖管理器,用于构建依赖项并提供二进制框架。要使用 Carthage 将 Alamofire 集成到 Xcode 项目中,请在您的 Cartfile
中指定它。
github "pixlee/pixlee-ios-sdk" ~> <PixleeSDK version like 2.5.1>
Swift 包管理器
Swift 包管理器 Swift Package Manager 是一个用于自动化 Swift 代码分发的工具,并集成到 swift
编译器中。它目前处于早期开发阶段,但 Alamofire 在支持的平台上也支持其使用。
一旦您配置好了 Swift 包,将 Alamofire 添加为依赖项就像将其添加到 Package.swift
的 dependencies
值一样简单。
dependencies: [
.package(url: "https://github.com/pixlee/pixlee-ios-sdk.git", .upToNextMajor(from: "<PixleeSDK version like 2.5.1>"))
]
启动 SDK
示例
#!swift
PXLClient.sharedClient.apiKey = your api key
PXLClient.sharedClient.secretKey = your secret key // (Optional) <----- use this if you use analytics or image-upload
PXLClient.sharedClient.disableCaching = true // (Optional) don't use cache
PXLClient.sharedClient.regionId = your region id // (Optional) <--- set it if you use multi-region.
PXLClient.sharedClient.autoAnalyticsEnabled = true // (Optional) <----- This activates this auto-analytics on PXLGridView and PXLPhotoProductView
API 密钥
- 在哪里获取 Pixlee API 证书?请访问这里: https://app.pixlee.com/app#settings/pixlee_api
- 添加您的 Pixlee API 密钥。
#!swift PXLClient.sharedClient.apiKey = apiKey
密钥(可选)
- 如果进行 POST 请求,请添加您的密钥。
#!swift PXLClient.sharedClient.secretKey = secretKey
禁用缓存:网络 API 缓存(可选)
- 我们遇到了手机缓存请求的问题。因此,如果您愿意,可以通过将
PXLClient
的disableCaching
属性设置为false
来启用网络 API 缓存。默认情况下是禁用的(disableCaching=true)。#!swift PXLClient.sharedClient.disableCaching = true // don't use cache PXLClient.sharedClient.disableCaching = false // use cache
跨区域(可选)
- 如果您使用跨区域功能,可以在此处设置您的区域 ID 以获取该区域可用的照片、单个照片和产品。
#!swift PXLClient.sharedClient.regionId = your region id <--- set it if you use multi-region.
自动分析(可选)
#!swift
PXLClient.sharedClient.autoAnalyticsEnabled = true // (Optional) <----- This activates this auto-analytics on PXLGridView and PXLPhotoProductView
- 这是委托此 SDK 火焰必要的分析事件。如果您不想使用此功能,请忽略这部分内容。
- 如果您使用 PXLGridView,您需要额外的设置 文档:PXLGridView 的自动分析。
- 我们会为您触发哪些分析事件?
loadmore
事件:当您使用PXLClient.sharedClient.loadNextPageOfPhotosForAlbum(album: album)
加载第二页或之后页面时,我们会为您触发loadmore
事件。openedWidget
事件:如果您实现了 文档:PXLGridView 的自动分析 并尝试在屏幕上显示带有多个 PXLPhotos 的 PXLGridView,我们将触发openedWidget
。widgetVisible
事件:如果您实现了 文档:PXLGridView 的自动分析 并尝试在屏幕上显示带有多个 PXLPhotos 的 PXLGridView,我们将触发widgetVisible
。openedLightbox
事件:当您在屏幕上显示带有 PXLPhoto 的 PXLPhotoProductView 时,我们将触发openedLightbox
。
- 注意:您可以在控制台中查看触发的事件。如果您设置存在问题,您可以在控制台中看到我们显示的错误消息。
基本开发指南
- 通过此指南,您可以使用我们的 UI 组件,快速在您的应用程序上实现 SDK 的大部分功能。
- 但是,如果您正在寻找触发获取内容并呈现到您自己的 UI 中的 API,请查看 API:过滤和排序。
步骤 1:初始化 SDK 和自动分析
PXLClient.sharedClient.apiKey = your api key
PXLClient.sharedClient.secretKey = your secret key // (Optional) <----- use this if you use analytics or image-upload
PXLClient.sharedClient.regionId = your region id // (Optional) <--- set it if you use multi-region.
PXLClient.sharedClient.autoAnalyticsEnabled = true // make sure this is true
#!swift
步骤 2:加载列表界面及其数据
步骤 3:加载详细界面
- 实现如下: PXLPhotoProductView
- 请注意,您需要确保在点击 PXLWidgetView 的单元格时加载 PXLPhotoProductView。您可以在此项目的演示应用中找到示例。
API:过滤和排序
有关可用过滤器和排序的信息,请参阅此处: https://developers.pixlee.com/reference#consuming-content
目前,SDK 支持以下过滤器:
min_instagram_followers
min_twitter_followers
denied_photos
starred_photos
flagged_photos (Note: false is equivalent to null here.)
deleted_photos
has_permission (Note: false is equivalent to null here.)
has_product
in_stock_only (Note: false is equivalent to null here.)
content_source
content_type
filter_by_subcaption
has_action_link
submitted_date_start
submitted_date_end
in_categories
computer_vision
filter_by_location
filter_by_radius
SDK 支持以下排序方式:
recency - The date the content was collected.
random - Randomized.
pixlee_shares - Number of times the content was shared from a Pixlee widget.
pixlee_likes - Number of likes the content received from a Pixlee widget.
popularity - Popularity of the content on its native platform.
dynamic - Our "secret sauce" -- a special sort that highlights high performance content and updates according to the continued performance of live content.
示例
//=========================================================
//These parameters are examples. Please adjust, add or remove them during implementation.
//=========================================================
PXLClient.sharedClient.apiKey = <your api key>
PXLClient.sharedClient.secretKey = <your secret key>
// Added regionId to get the currency of the specific region when searching for photos of an album. Here's how you can use it.
// note: - note: you can get the right currencies of your products by adding regionId here
PXLClient.sharedClient.regionId = <your region id> <--- set it if you use multi-region.
//Create an Instance of Album with the Identifier
let album = PXLAlbum(identifier: PXLAlbumIdentifier)
// Create and set filter options on the album.
album.filterOptions = PXLAlbumFilterOptions(minInstagramFollowers: 1)
let dateString = "20190101"
let dateFormatter = DateFormatter()
dateFormatter.dateFormat = "yyyyMMdd"
let date = dateFormatter.date(from: dateString)
filterOptions = filterOptions.changeSubmittedDateStart(newSubmittedDateStart: date)
//These parameters are examples. Please adjust, add or remove them during implementation.
album.filterOptions = filterOptions;
// Create and set sort options on the album.
album.sortOptions = PXLAlbumSortOptions(sortType: .Recency, ascending: false)
album.perPage = 100;
PXLClient.sharedClient.loadNextPageOfPhotosForAlbum(album: album) { photos, error in
guard error == nil else {
print("There was an error during the loading \(String(describing: error))")
return
}
//Use your content array here
print("New content loaded: \(photos)")
}
如果您正在检索 SKU 的内容,请使用 PXLAlbum
类。通过调用 PXLAlbum(sku:<SKU ID 此外>
创建一个实例。与标识符一样,您可以在调用 loadNextPageOfPhotos:
加载照片之前设置必要的 sortOptions
和 filterOptions
(有关更多详细信息,请参阅头文件)。然后通过 PXLClient
加载内容,只需使用 loadNextPageOfPhotosForAlbum(album, completionHandler)
即可。它将按页加载专辑内容,并通过连续调用 loadNextPageOfPhotos:
将每个页面按顺序加载,同时返回新加载的内容到完成块中,并更新专辑的内容数组以获取所有图片。
示例
//=========================================================
//These parameters are examples. Please adjust, add or remove them during implementation.
//=========================================================
PXLClient.sharedClient.apiKey = <your api key>
PXLClient.sharedClient.secretKey = <your secret key>
// Added regionId to get the currency of the specific region when searching for photos of an album. Here's how you can use it.
// note: - note: you can get the right currencies of your products by adding regionId here
PXLClient.sharedClient.regionId = <your region id> <--- set it if you use multi-region.
//Create an Instance of Album with the SKU Identifier
let album = PXLAlbum(identifier: PXLSkuAlbumIdentifier)
// Create and set filter options on the album.
let dateString = "20190101"
let dateFormatter = DateFormatter()
dateFormatter.dateFormat = "yyyyMMdd"
let date = dateFormatter.date(from: dateString)
filterOptions = PXLAlbumFilterOptions(submittedDateStart: date)
//These parameters are examples. Please adjust, add or remove them during implementation.
album.filterOptions = filterOptions;
// Create and set sort options on the album.
album.sortOptions = PXLAlbumSortOptions(sortType: .random, ascending: false)
album.perPage = 100;
PXLClient.sharedClient.loadNextPageOfPhotosForAlbum(album: album) { photos, error in
guard error == nil else {
print("There was an error during the loading \(String(describing: error))")
return
}
//Use your content array here
print("New content loaded: \(photos)")
}
备注
此外,您可以使用 PXLAlbumFilterOptions
和 PXLAlbumSortOptions
控制相册加载数据的方式。要使用这些选项,请使用 PXLAlbumFilterOptions()
或 PXLAlbumSortOptions(sortType:SortType, ascending:Boolean)
创建新实例,设置必要的属性,然后将这些对象设置为相册上的 filterOptions
和 sortOptions
属性。在调用 loadNextPageOfPhotosForAlbum:
之前,请确保设置这些选项。
一旦相册从服务器加载了内容,它将实例化 PXLPhoto
对象,这些对象可以被您的 UI 消费。 PXLPhoto
展示了 Pixlee API 可用的所有内容数据,并提供了多种根据您的需求定制的图像 URL 尺寸。
为了帮助您快速开始,我们还构建了一个相册视图控制器和内容详情视图控制器,您可以在您的应用程序中使用并自定义它们。PXLAlbumViewController
使用 UICollectionView
显示相册中的内容,并包含一个开关,可在网格视图和列表视图之间切换。您可以使用类的 viewControllerForAlbum
方法实例化一个新的视图控制器,并使用提供的相册对象。例如,显示 ViewController
let albumVC = PXLAlbumViewController.viewControllerForAlbum(album:album)
showViewController(VC: albumVC)
相册视图控制器已设置为当用户滚动时自动加载更多内容页面,从而产生无限滚动效果。
如果用户在 PXLAlbumViewController
中点击内容,我们通过 PXLPhotoDetailViewController
显示一个详细视图。您也可以通过实例化一个 PXLPhotoDetailViewController.viewControllerForPhot
实例并传递 PXLPhoto
实例属性来自定义详细视图。内容详细视图配置为显示
- 大内容
- 贴图者的用户名
- 内容发布的时间戳
- 内容平台来源(例如 Instagram)
- 如果有的话,内容的标题
- 与该内容关联的任何产品(作为产品水平列表显示)示例加载详细ViewController
let photoDetailVC = PXLPhotoDetailViewController.viewControllerForPhoto(photo: photo)
let navController = UINavigationController(rootViewController: photoDetailVC)
present(navController, animated: true, completion: nil)
获取 PXLPhoto
如果您想使用相册照片 ID 创建 PXLPhoto,您可以在 SDK 中使用我们的 API 如下获取。
var photoAlbumId = <one of you photo album ids>
if let photoAlbumId = photoAlbumId {
_ = PXLClient.sharedClient.getPhotoWithPhotoAlbumId(photoAlbumId: photoAlbumId) { newPhoto, error in
guard error == nil else {
print("Error during load of image with Id \(String(describing: error))")
return
}
guard let photo = newPhoto else {
print("cannot find photo")
return
}
print("New Photo: \(photo.albumPhotoId)")
}
}
如果您想使用相册照片 ID 和区域 ID 创建 PXLPhoto,您可以使用 SDK 中的我们的 API 如下获取。
var photoAlbumId = <one of you photo album ids>
if let photoAlbumId = photoAlbumId {
_ = PXLClient.sharedClient.getPhotoWithPhotoAlbumId(photoAlbumId: photoAlbumId) { newPhoto, error in
guard error == nil else {
print("Error during load of image with Id \(String(describing: error))")
return
}
guard let photo = newPhoto else {
print("cannot find photo")
return
}
print("New Photo: \(photo.albumPhotoId)")
}
}
分析
如果您需要执行分析调用,可以使用我们的分析服务 PXLAnalyticsService
。单例(singleton)是如何使用的呢,您可以像这样接入:PXLAnalyticsService.sharedAnalytics
。要记录一个事件,您需要实例化一个从 PXLAnalyticsEvent
继承的类的实例(以下列出可用的类型)。然后将它传递给分析服务的 logEvent
方法。SDK 支持以下事件
Add to Cart (PXLAnalyticsEventActionClicked): Call this whenever and wherever an add to cart event happens
User Completes Checkout (PXLAnalyticsEventConvertedPhoto): Call this whenever a user completes a checkout and makes a purchase
User Visits a Page with a Pixlee Widget (PXLAnalyticsEventOpenedLightBox): Call this whenever a user visits a page which as a Pixlee Widget on it
User Clicks on the Pixlee Widget (PXLAnalyticsEventOpenedWidget): Call this whenever a user clicks on an item in the Pixlee widget
PXLAlbums: Load More (PXLAnalyticsEventLoadMoreClicked): Call this whenever a user clicks 'Load More' button on the widget
PXLPhoto: Action Link Clicked (PXLAnalyticsEventActionClicked): Call this whenever a user make an action after clicking on an item in the Pixlee widget
加入购物车
let currency = "USD"
let productSKU = "SL-BENJ"
let quantity = 2
let price = "13.0"
let event = PXLAnalyticsEventAddCart(sku: productSKU,
quantity: quantity,
price: price,
currency: currency)
//EVENT add:cart refer to pixlee_sdk/PXLAbum.h or The Readme or https://developers.pixlee.com/docs/analytics-events-tracking-pixel-guide
PXLAnalyticsService.sharedAnalytics.logEvent(event: event) { error in
guard error == nil else {
print("There was an error \(error)")
return
}
print("Logged")
}
转化
// Setup some constants
let currency = "USD"
// Product 1 example
let productSKU = "SL-BENJ"
let price = "13.0"
let quantity = 2
// product 2 example
let productSKU2 = "AD-1324S"
let price2 = "5.0"
let quantity2 = 5
let cart1 = PXLAnalyticsCartContents(price: price, productSKU: productSKU, quantity: quantity)
let cart2 = PXLAnalyticsCartContents(price: price2, productSKU: productSKU2, quantity: quantity2)
let quantityTotal = 7
let orderId = 234232
let cartTotal = "18.0"
let cartContents = [cart1, cart2]
//EVENT converted: refers to pixlee_sdk/PXLAbum.h or The Readme or https://developers.pixlee.com/docs/analytics-events-tracking-pixel-guide
let event = PXLAnalyticsEventConvertedPhoto(cartContents: cartContents, cartTotal: cartTotal, cartTotalQuantity: quantityTotal, orderId: orderId, currency: currency)
PXLAnalyticsService.sharedAnalytics.logEvent(event: event) { error in
guard error == nil else {
print("There was an error \(error)")
return
}
print("Logged")
}
打开小部件
在触发 LoadNextPage 事件之后进行此事件触发非常重要
let album = PXLAlbum(sku: PXLSkuAlbumIdentifier)
// If you are using https://developers.pixlee.com/reference#get-approved-content-from-album // api/v2/album/@album_id/Photos
// If you are using api/v2/album/sku_from
// Refer to pixlee_sdk PXLAbum.h
PXLClient.sharedClient.loadNextPageOfPhotosForAlbum(album: album) { _, _ in
//It's important to trigger these events after the LoadNextPage event
//EVENT opened:widget refer to pixlee_sdk/PXLAbum.h or The Readme or https://developers.pixlee.com/docs/analytics-events-tracking-pixel-guide
album.triggerEventOpenedWidget(widget: .horizontal) { _ in
print("Logged")
}
}
打开灯箱
// fire this when a PXLPhoto is displayed from your List View containing a list of PXLPhotos
let pxlPhoto:PXLPhoto = photoFromSomewhere
//EVENT opened:lightbox refer to pixlee_sdk/PXLAbum.h or The Readme or https://developers.pixlee.com/docs/analytics-events-tracking-pixel-guide
pxlPhoto.triggerEventOpenedLightbox() { (error) in
print("Logged")
}
点击动作
PXLClient.sharedClient.getPhotoWithPhotoAlbumId(photoAlbumId: "299469263") { newPxlPhoto, error in
guard error == nil else {
print("Error during load of image with Id \(String(describing: error))")
return
}
guard let pxlPhoto = newPxlPhoto else {
print("cannot find pxlPhoto")
return
}
print("New Photo: \(pxlPhoto.albumPhotoId)")
if let product = pxlPhoto.products?.first, let url = product.link?.absoluteString {
pxlPhoto.triggerEventActionClicked(actionLink: url) { _ in
print("triggered")
}
}
}
加载更多
let album = PXLAlbum(sku: PXLSkuAlbumIdentifier)
// If you are using https://developers.pixlee.com/reference#get-approved-content-from-album // api/v2/album/@album_id/Photos
// If you are using api/v2/album/sku_from
// Refer to pixlee_sdk PXLAbum.h
PXLClient.sharedClient.loadNextPageOfPhotosForAlbum(album: album) { _, _ in
/
album.triggerEventLoadMoreTapped { (error) in
print("logged")
}
}
将图片上传到相册
// Example
public func imagePickerController(_ picker: UIImagePickerController, didFinishPickingMediaWithInfo info: [UIImagePickerController.InfoKey: Any]) {
guard let image = info[.editedImage] as? UIImage else {
print("No image found")
return
}
if let albumIdentifier = viewModel?.album.identifier, let albumID = Int(albumIdentifier) {
let pxlNewImage = PXLNewImage(image: image, albumId: albumID, title: "Sample image name", email: "[email protected]", username: "Will", approved: true, connectedUserId: nil, productSKUs: nil, connectedUser: nil)
PXLClient.sharedClient.uploadPhoto(photo: pxlNewImage,
progress: { percentage in
self.applyUploadPercentage(percentage)
},
uploadRequest: { uploadReqest in
let doYouWantToCancelTheRequest = false
if doYouWantToCancelTheRequest {
uploadReqest?.cancel()
}
},
completion: { photoId, connectedUserId, error in
guard error == nil else {
print("🛑 Error while uploading image :\(error?.localizedDescription)")
return
}
guard let photoId = photoId, let connectedUserId = connectedUserId else {
print("🛑 Don't have photo or connectedUserID")
return
}
print("⭐️ Upload completed: photoID:\(photoId), connectedUserID:\(connectedUserId)")
}
)
}
}
UI组件
版本2列表(推荐)
PXLWidgetView(类似于Pixlee网页组件)
- 自动触发API[api/v2/albums/from_sku, api/v2/albums/{album_id}/photos]以获取和显示图片
- 自动触发分析[openedWidget, widgetVisible]
- 提供网格(2列)和列表布局
UI选项
对于网格和列表:加载更多UI(自定义颜色、字体、文本、单元格高度、填充)
-
列表
- 自动播放视频开关:在列表顶部播放视频
-
网格
- 项目间线条大小
- 标题
- 图片URL
- 自定义文本
网格模式 | 列表模式 |
---|---|
示例
#!swift Your View controller
class WidgetExampleViewController: UIViewController {
static func getInstance() -> WidgetExampleViewController {
let vc = WidgetExampleViewController(nibName: "EmptyViewController", bundle: Bundle.main)
return vc
}
var widgetView = PXLWidgetView()
override func viewDidLoad() {
super.viewDidLoad()
widgetView.delegate = self
view.addSubview(widgetView)
if let pixleeCredentials = try? PixleeCredentials.create() {
let albumId = pixleeCredentials.albumId
let album = PXLAlbum(identifier: albumId)
album.filterOptions = PXLAlbumFilterOptions(hasPermission: true, hasProduct: true)
album.sortOptions = PXLAlbumSortOptions(sortType: .approvedTime, ascending: false)
album.perPage = 30
widgetView.searchingAlbum = album
}
}
override func viewDidLayoutSubviews() {
super.viewDidLayoutSubviews()
widgetView.frame = CGRect(x: 0, y: 0, width: view.frame.size.width, height: view.frame.size.height)
}
/*
// MARK: - Navigation
// In a storyboard-based application, you will often want to do a little preparation before navigation
override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
// Get the new view controller using segue.destination.
// Pass the selected object to the new view controller.
}
*/
var videoCell: PXLGridViewCell?
}
// MARK: - Photo's click-event listeners
extension WidgetViewController: PXLPhotoViewDelegate {
public func onPhotoButtonClicked(photo: PXLPhoto) {
print("Action tapped \(photo.id)")
openPhotoProduct(photo: photo)
}
public func onPhotoClicked(photo: PXLPhoto) {
print("Photo Clicked \(photo.id)")
openPhotoProduct(photo: photo)
}
func openPhotoProduct(photo: PXLPhoto) {
present(PhotoProductListDemoViewController.getInstance(photo), animated: false, completion: nil)
}
}
// MARK: Widget's UI settings and scroll events
extension WidgetViewController: PXLWidgetViewDelegate {
func setWidgetSpec() -> WidgetSpec {
// A example of List
/*WidgetSpec.list(.init(cellHeight: 350,
isVideoMutted: true,
autoVideoPlayEnabled: true,
loadMore: .init(cellHeight: 100.0,
cellPadding: 10.0,
text: "LoadMore",
textColor: UIColor.darkGray,
textFont: UIFont.systemFont(ofSize: UIFont.buttonFontSize),
loadingStyle: .gray)))*/
// A example of Grid
WidgetSpec.grid(
.init(
cellHeight: 350,
cellPadding: 4,
loadMore: .init(cellHeight: 100.0,
cellPadding: 10.0,
text: "LoadMore",
textColor: UIColor.darkGray,
textFont: UIFont.systemFont(ofSize: UIFont.buttonFontSize),
loadingStyle: .gray),
header: .image(.remotePath(.init(headerHeight: 200,
headerContentMode: .scaleAspectFill,
headerGifUrl: "https://media0.giphy.com/media/CxQw7Rc4Fx4OBNBLa8/giphy.webp")))))
}
func setWidgetType() -> String {
"replace_this_with_yours"
}
func setupPhotoCell(cell: PXLGridViewCell, photo: PXLPhoto) {
if photo.isVideo {
videoCell = cell
}
// Example(all elements) : cell.setupCell(photo: photo, title: "Title", subtitle: "subtitle", buttonTitle: "Button", configuration: PXLPhotoViewConfiguration(cropMode: .centerFill), delegate: self)
cell.setupCell(photo: photo, title: nil, subtitle: nil, buttonTitle: nil, configuration: PXLPhotoViewConfiguration(cropMode: .centerFill), delegate: self)
}
func scrollViewDidScroll(_ scrollView: UIScrollView) {
}
}
版本 1 的列表
PXLPhotoListView
- 从给定的 PXLPhoto 对象创建无限滚动列表。您需要添加一个 PXLPhoto 对象数组。
//Basic Example ... var photoView = PXLPhotoListView() photoView.delegate = self photoView.frame = view.frame view.addSubview(photoView) photoView.items = [Array Of Photos] }
PXLGridView
每行一个照片 | 每行两个照片 |
---|---|
![]() |
![]() |
具有许多可定制功能的栅格式视图,其中单元格是 PXLPhotoViews。您必须实现 PXLGridViewDelegate
以自定义栅格。
定制选项
cellHeight
:单元格高度cellPadding
:单元格和行之间的填充isMultipleColumnsEnabled
:如果为 true,则两列,如果为 false,则一列isHighlightingEnabled
:是否更改突出显示视图中顶部元素的透明度isInfiniteScrollingEnabled
:如果要启用无限滚动setupPhtoCell(cellPXLGridViewCell: photo:PXLPhoto)
:在这里,您可以像在PXLPhotoView
的基本示例中一样自定义单元格。
可选选项
headerTitle
:标题headerGifName
:包含在应用程序中的标题 gif 图片的名称headerGifUrl
:标题 gif 图片的 URLheaderHeight
:标题高度headerGifContentMode
:标题 gif 图片的内容模式headerTitleFont
:标题字体headerTitleColor
:标题颜色
PXLGridView的示例
//Basic Example
override func viewDidLoad() {
PXLClient.sharedClient.apiKey = your api key
PXLClient.sharedClient.secretKey = your secret key
PXLClient.sharedClient.autoAnalyticsEnabled = false
PXLClient.sharedClient.regionId = your region id <--- set it if you use multi-region.
var gridView = PXLGridView()
photoView.delegate = self
gridView.frame = self.view.bounds
gridView.delegate = self
view.addSubview(gridView)
gridView.items = [Array Of Photos]
}
extension AutoUIImageListViewController: PXLPhotoViewDelegate {
public func onPhotoButtonClicked(photo: PXLPhoto) {
print("Action tapped \(photo.id)")
openPDP(photo: photo)
}
public func onPhotoClicked(photo: PXLPhoto) {
print("Photo Clicked \(photo.id)")
openPDP(photo: photo)
}
func openPDP(photo: PXLPhoto) {
present(PhotoProductListDemoViewController.getInstance(photo), animated: false, completion: nil)
}
}
extension AutoUIImageListViewController: PXLGridViewDelegate {
func isVideoMutted() -> Bool {
false
}
func cellsHighlighted(cells: [PXLGridViewCell]) {
// print("Highlighted cells: \(cells)")
}
func setupPhotoCell(cell: PXLGridViewCell, photo: PXLPhoto) {
if let index = pxlGridView.items.firstIndex(of: photo) {
cell.setupCell(photo: photo, title: "[album photo id: \(photo.albumPhotoId)]\n[album id: \(photo.albumId)] in", subtitle: "Click to Open", buttonTitle: "PXLPhotoProductView", configuration: PXLPhotoViewConfiguration(enableVideoPlayback: true, cropMode: .centerFit), delegate: self)
}
}
public func cellHeight() -> CGFloat {
return 350
}
func cellPadding() -> CGFloat {
return 8
}
func isMultipleColumnEnabled() -> Bool {
return false
}
func isHighlightingEnabled() -> Bool {
return false
}
func isInfiniteScrollEnabled() -> Bool {
return false
}
func scrollViewDidScroll(_ scrollView: UIScrollView) {
// This is an example of how to load more photos as you swipe up to go to the bottom of the scroll. You can use our own way of doing this.
if scrollView == pxlGridView.collectionView && !pxlGridView.items.isEmpty {
let unseenHeight = scrollView.contentSize.height - (scrollView.contentOffset.y + scrollView.frame.height)
// this [single page's height * singlePageRatio] pixels of the remaining scrollable height is used for smooth scroll while retrieving photos from the server.
let singlePageRatio = CGFloat(2.0)
if unseenHeight < (scrollView.frame.height * singlePageRatio) {
loadPhotos()
}
}
}
}
PXLGridView的自动分析
- 如果您想将'VisibleWidget'和'OpenedWidget'分析事件委托给PXLGridView,请使用此代码。相反,如果您想手动触发这两个事件,则不需要使用此代码,并需要实现我们自己的分析代码。请查阅AutoUIImageListViewController.swift以获取示例代码。
- 【重要】请注意,在为您提供检索PXLPhotos列表以发送给分析服务器的正确专辑信息时,给相同的PXLAlbum实例。
#!swift
let album: PXLAlbum
override func viewDidLoad() {
PXLClient.sharedClient.apiKey = your api key
PXLClient.sharedClient.secretKey = your secret key
PXLClient.sharedClient.autoAnalyticsEnabled = true <----- This activates this feature
PXLClient.sharedClient.regionId = your region id <--- set it if you use multi-region.
var gridView = PXLGridView()
...
pxlGridView.autoAnalyticsDelegate = self <-- MUST be implemented
...
}
// this must be implemented to use this feature
extension AutoUIImageListViewController: PXLGridViewAutoAnalyticsDelegate {
func setupAlbumForAutoAnalytics() -> (album: PXLAlbum, widgetType: String) {
(album, "customized_widget_type")
}
}
详细介绍
PXLPhotoProductView
-
您可以使用特定的
PXLPhoto
对象加载此视图。它能够播放视频或显示图片,随图片提供的产品。它还具有一个代理(PXLPhotoProductDelegate
),可以告诉您用户是否点击了产品,或者他们是否想购买产品,它包含了书签功能。通过代理,您可以提供哪些产品已经书签并保持列表在书签按钮点击后更新。 -
要开始播放视频请使用
playVideo()
方法,要停止播放请使用stopVideo()
方法,要静音/取消静音播放音量请使用mutePlayer(muted:Bool)
方法。 -
您可以使用和自定义以下是视图上的关闭按钮
closeButtonImage
: 设置关闭按钮的图像。默认是关闭的X图像closeButtonBackgroundColor
: 关闭按钮的背景颜色。默认是透明颜色。closeButtonTintColor
: 关闭按钮的着色颜色,图像将获得此着色颜色。默认:白色closeButtonCornerRadius
: 关闭按钮的圆角。默认是22,这是完美的圆形。hideCloseButton
: 如果您不需要视图上的关闭按钮,则设置为true
-
您可以使用和自定义以下是视图上的静音按钮
-
muteButtonOnImage
: 设置静音按钮的开启图像。 -
muteButtonOffImage
: 设置静音按钮的关闭图像。 -
muteButtonBackgroundColor
: 静音按钮的背景颜色。默认为透明颜色。 -
muteButtonTintColor
: 静音按钮的着色颜色,图像将获取这个着色颜色。默认:白色 -
muteButtonCornerRadius
: 静音按钮的圆角半径。默认是22,形成完美的圆形。 -
hideMuteButton
: 如果不需要视图上的静音按钮,则设置为true//Basic Example ... let widget = PXLPhotoProductView.widgetForPhoto(photo: photo, delegate: self, ...) widget.frame = self.view.frame self.view.addSubview(widget.view) } //Show modally with animation example ... let widget = PXLPhotoProductView.widgetForPhoto(photo: photo, delegate: self, ...) widget.showModally(hostView: self.view, animated:true) }
-
显示热点(如果可用)
- 如果某些内容在PXLPhoto.boundingBoxProducts中具有热点数据,您可以使用此选项在UI上显示热点。
#!swift
let widget = PXLPhotoProductView.widgetForPhoto(
...
showHotspots: true,
...)
PXLPhotoProductView的自动分析
-
如果您想委托触发到PXLPhotoProductView的
OpenLightbox
分析事件,请使用此代码。另一方面,如果您想手动触发事件,则不使用此代码并实现我们自己的分析代码。请查看PhotoProductListDemoViewController.swift以获取示例代码。#!swift PXLClient.sharedClient.apiKey = your api key PXLClient.sharedClient.secretKey = your secret key PXLClient.sharedClient.autoAnalyticsEnabled = true <----- This activates this feature PXLClient.sharedClient.regionId = your region id <--- set it if you use multi-region. let widget = PXLPhotoProductView.widgetForPhoto(photo: photo, delegate: self) ...
高级
PXLPhotoView
- 显示带有标题、副标题和操作按钮的内容。您可以通过设置
PXLPhotoViewConfiguration
来自定义PXLPhotoView的外观。实现代理(PXLPhotoViewDelegate
)以了解内容点击和动作按钮点击事件。 - 要开始播放视频请使用
playVideo()
方法,要停止播放请使用stopVideo()
方法,要静音/取消静音播放音量请使用mutePlayer(muted:Bool)
方法。//Basic Example ... let photoView = PXLPhotoView(frame:CGRectMake(0,0,200,80), photo:PXLPhoto, title:"Photo Title", subtitle:"Subtitle for it", buttonTitle:"Open it", buttonImage:UIImage(named:"Open button")) self.view.addSubview(photoView) }
PXLPhotoViewConfiguration
PXLPhotoView的配置类。配置选项
textColor:UIColor
: 文本的颜色titleFont:UIFont
: 标题的字体subtitleFont:UIFont
: 副标题的字体buttonFont:UIFont
: 按钮的字体buttonImage:UIImage
:按钮的图像buttonBorderWidth:CGFloat
:按钮的边框宽度enableVideoPlayback:Bool
:是否播放视频delegate:PXLPhotoViewDelegate
:代理cropMode:PXLPhotoCropMode
:图片/视频裁剪模式
故障排除
如果在OSX上运行carthage update
时出错,请通过执行rm -rf ~/Library/Caches/org.carthage.CarthageKit
清除carthage缓存。
库
- InfiniteLayout用于在SDK中实现无限滚动。
- 您可以使用
PXLGridViewDelegate.isInfiniteScrollEnabled: true / false
启用和禁用此功能。
- 您可以使用
许可协议
- pixlee-ios-sdk遵循MIT许可协议。
- InfiniteLayout也遵循MIT许可协议。