Skip to content

Added Mosaic and Horizontal layout to PXLWidgetView

Latest
Compare
Choose a tag to compare
@SungjunApp SungjunApp released this 30 May 00:26
· 3 commits to master since this release
55cbbda
  • changed the minimum iOS version from 10 to 13:
  • PXLWidgetView additionally supports these below as well as Grid and List
    • Mosaic: similar to our Mosaic on Widget
    • Horizontal: a horizontal version of Mosaic

Demo

Horizontal Mosaic with mosaicSpan=.three Mosaic with mosaicSpan=.four) Mosaic with mosaicSpan=.five

Import guide for SDK users

Mosaic code snippet

  • mosaicSpan: provides three span options, [three, four, five].
  • cellPadding: space between cells
extension WidgetViewController: PXLWidgetViewDelegate {
    func setWidgetSpec() -> WidgetSpec {
        WidgetSpec.horizontal(
            .init(
                mosaicSpan: .five,
                cellPadding: 1,
                loadMore: .init(cellHeight: 100.0,
                                cellPadding: 10.0,
                                text: "LoadMore",
                                textColor: UIColor.darkGray,
                                textFont: UIFont.systemFont(ofSize: UIFont.buttonFontSize),
                                loadingStyle: .gray)))
    }
}
class WidgetViewController: UIViewController {
    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)
            album.sortOptions = PXLAlbumSortOptions(sortType: .approvedTime, ascending: false)
            album.perPage = 18
            widgetView.searchingAlbum = album
        }
    }
    override func viewDidLayoutSubviews() {
        super.viewDidLayoutSubviews()
        // make the view full screen
        widgetView.frame = CGRect(x: 0, y: 0, width: view.frame.size.width, height: view.frame.size.height)
    }
}

Horizontal code snippet

  • cellPadding: space between cells
extension WidgetViewController: PXLWidgetViewDelegate {
    func setWidgetSpec() -> WidgetSpec {
        WidgetSpec.horizontal(
            .init(
                cellPadding: 1,
                loadMore: .init(cellHeight: 100.0,
                                cellPadding: 10.0,
                                text: "LoadMore",
                                textColor: UIColor.darkGray,
                                textFont: UIFont.systemFont(ofSize: UIFont.buttonFontSize),
                                loadingStyle: .gray)))
    }
}
class WidgetViewController: UIViewController {
    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)
            album.sortOptions = PXLAlbumSortOptions(sortType: .approvedTime, ascending: false)
            album.perPage = 18
            widgetView.searchingAlbum = album
        }
    }
    override func viewDidLayoutSubviews() {
        super.viewDidLayoutSubviews()
        // set the height
        widgetView.frame = CGRect(x: 0, y: 0, width: view.frame.size.width, height: view.frame.size.height/5)
    }
}

Full Example

import Foundation
import PixleeSDK
import UIKit

class WidgetViewController: UIViewController {
    static func getInstance() -> WidgetViewController {
        let vc = WidgetViewController(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)
            album.sortOptions = PXLAlbumSortOptions(sortType: .approvedTime, ascending: false)
            album.perPage = 18
            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/5)
    }

    
}

// 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 {
        // An example of Mosaic
//        WidgetSpec.mosaic(
//            .init(
//                mosaicSpan: .five,
//                cellPadding: 1,
//                loadMore: .init(cellHeight: 100.0,
//                                cellPadding: 10.0,
//                                text: "LoadMore",
//                                textColor: UIColor.darkGray,
//                                textFont: UIFont.systemFont(ofSize: UIFont.buttonFontSize),
//                                loadingStyle: .gray)))
        
        // An example of Mosaic
        WidgetSpec.horizontal(
            .init(
                cellPadding: 1,
                loadMore: .init(cellHeight: 100.0,
                                cellPadding: 10.0,
                                text: "LoadMore",
                                textColor: UIColor.darkGray,
                                textFont: UIFont.systemFont(ofSize: UIFont.buttonFontSize),
                                loadingStyle: .gray)))
    }

    func setWidgetType() -> String {
        "replace_this_with_yours"
    }

    func setupPhotoCell(cell: PXLGridViewCell, photo: PXLPhoto) {
        
        cell.setupCell(photo: photo, title: nil, subtitle: nil, buttonTitle: nil, configuration: PXLPhotoViewConfiguration(cropMode: .centerFill), delegate: self)
    }

    func scrollViewDidScroll(_ scrollView: UIScrollView) {
         print("scrollViewDidScroll \(scrollView)")
    }
}