Skip to content

Added Mosaic and Horizontal options to PXLWidgetView
Compare
Choose a tag to compare
@SungjunApp SungjunApp released this 04 May 02:09
· 5 commits to master since this release
2.4.0
c9efc8e
This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
GPG key ID: 4AEE18F83AFDEB23
Expired
Learn about vigilant mode.

Added Mosaic and Horizontal options to PXLWidgetView

Mosaic Horizontal

Import guide for SDK users

Step 1: import this sample code into the app project

  • layout 
    <com.pixlee.pixleesdk.ui.widgets.list.PXLWidgetView
    android:id="@+id/widget"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>
  • kotlin 
    binding.widget.initiate(
    widgetTypeForAnalytics = "your_widget_type", // this will be used when this view automatically fires openedWidget, widgetVisible analytics
    viewType = PXLWidgetView.ViewType.Mosaic(gridSpan = 4, lineSpace = Space(lineWidthInPixel = 4.px.toInt(),includingEdge = false)),
    apiParameters = PXLKtxBaseAlbum.Params(
            // album images
            searchId = PXLKtxBaseAlbum.SearchId.Album(BuildConfig.PIXLEE_ALBUM_ID), // product images: searchId = PXLKtxBaseAlbum.SearchId.Product(BuildConfig.PIXLEE_SKU),
            filterOptions = PXLAlbumFilterOptions().apply {
                // hasProduct and hasPermission are often used together for displaying photos with tagged products and gotten the permission from their creators
                // if you don't see any photos after the loading is done, go to https://app.pixlee.com/app#albums/{your album id} and make sure your photos have the same filter conditions as your filterOptions.
                hasProduct = true
                hasPermission = true

                // more filter options
                // - hasPermission = true
                // - inStockOnly = true
                // - .. there are more. Please check README or PXLAlbumFilterOptions class for more filter options
            },
            sortOptions = PXLAlbumSortOptions().apply {
                sortType = PXLAlbumSortType.RECENCY
                descending = true
            }
    ),
    configuration = PXLPhotoView.Configuration().apply {
        pxlPhotoSize = PXLPhotoSize.MEDIUM
        imageScaleType = ImageScaleType.CENTER_CROP
    },
    loadMoreTextViewStyle = TextViewStyle().apply {
        text = "Load More"
        textPadding = TextPadding(0, 22.px.toInt(), 0, 22.px.toInt())
        size = 24.px
        color = Color.BLACK
    },
    onPhotoClickedListener = { view, photoWithImageScaleType ->
        // TODO: open lightbox
        ViewerActivity.launch(this, photoWithImageScaleType)
    }
)

Step 2: Set up Horizontal or Mosaic

  • To use Horizontal from PXLWidgetView, you can edit this and replace the value of viewType in the code example with your edited code. 
    viewType = PXLWidgetView.ViewType.Horizontal(squareSizeInPixel = <your square Size In Pixel>, lineWidthInPixel = 4.px.toInt()),
  • To use Mosaic from PXLWidgetView, you can edit this and replace the value of viewType in the code example with your edited code. 
    viewType = PXLWidgetView.ViewType.Mosaic(gridSpan = 4, lineSpace = Space(lineWidthInPixel = 4.px.toInt(),includingEdge = false)),
Assets 2
Loading