Horizontal scrolling cards

  1. 5 years ago

    AntonioDB

    13 Aug 2018 User since 2018

    Hi, to all!
    Which is the best way for replicate horizontal scrolling cards, that you can see it in action in the App Store or iTunes Music Store?
    I want to set for these (with Inspector), custom shadow, corner radius and text inside, and I want to open them in another window for show content.

    Many thanks for your help.

  2. andrea

    13 Aug 2018 Administrator User since 2016

    Hi @AntonioDB ,
    I think that the Carousel control has all the features you need.

  3. AntonioDB

    13 Aug 2018 User since 2018

    Hi @andrea, and many thanks for your quickly reply.
    In Carousel I can't get it more cells for insert others cards content.
    If I press "+" button I can view "Cell" icon, but nothing happens (if I press, I can't add it).
    I can charge images only from "Assets", in fact if I set image in "ImageView" inside the cell, I can't view it from Carousel.
    In addition I can't set custom size for the cell, I've tried but in the Carousel I can view only square images.
    I couldn't find any other way to get the result.
    Is possible to add more (custom) cells to Carousel (for view more cards with texts), without use a database?

  4. andrea

    13 Aug 2018 Administrator User since 2016
    Edited 5 years ago by andrea

    Ciao @AntonioDB

    • the + button near the Carousel let you add subnodes to the control, in this case the Carousel accepts only one template Cell subnode (and by default a new Carousel already have a Cell subnode, you can directly customize that template Cell)
    • The content of the Carousel (and the number of the displayed cards) is defined by the DataSet configured for the Carousel in the DataSet property inspector (in the Cell inspector section of the Carousel). You can use the Asset dataset (it is a built-in dataset that provides all the objects inserted in the Asset folder, it returns the name and the image), or a Database, or data from an HTTP API with the HTTPClient and other types of data sources.
    • By default, the cell is squared, but you can get the aspect ratio you want by changing the frame of the ImageView inside the Cell, and also add other controls inside the Cell (for example a Label to show the Text)

    You can see how to use some of that tools in our tutorials , in particular:

    • How to use the Asset dataSet to show images in a control in this tutorial: https://docs.creolabs.com/tutorials/ebook.html (just use a Carousel instead of the PageContainer used in the tutorial)
    • How to add controls to a CustomView ed expose properties that will be populated by a DataSet (your cell is a CustomView and you can add a text property to show your text related to the image) in this tutorial: https://docs.creolabs.com/tutorials/lets-cook-nav.html (in particular from point 8 to point 15, here the CustomView is used in a TableView but the same concept applies to the Carousel)
  5. AntonioDB

    14 Aug 2018 User since 2018

    Ciao @andrea, and many thanks for your great reply.
    I've follow your advices and I've almost reached the target.
    Is possible, using "DidSelectCell" (or other method) for open different Window for every one images?
    For example: Image1 open Window2, Image2 open Window3, etc.

  6. andrea

    14 Aug 2018 Administrator User since 2016

    @AntonioDB
    You can use the DidSelectCell event of the carousel to open a different window depending on the selected cell, for example with the following code:

    if (index == 0) Window2.open()
    else if (index == 1) Window3.open()
    else if (index == 2) Window4.open()
    // ..etc.. 

    The DidSelectCell event is only invoked when the user tap on a cell of the Carousel, not when the user just scroll the Carousel. If you want to open a detail Window for the item shown in the center of the carousel, you can add a button with the same code and use the Carousel1.currentItemIndex property to get the index of the center item.
    Please see the attached sample project "carouselMultipleDetailWindows".

    Or, if all the detail windows have the same structure and just different data from a dataSet, you can add just one detail window and change the displayed content depending on the selected index.
    You can do this in the following ways:

    • in the same way the lets-cook-nav tutorial does
    • or using a View with a CustomView template and a DataSet and the rowIndex property of the View defines which row of the dataset must be used (Please see the attached sample project "carouselSingleDetailWindow".).
  7. AntonioDB

    15 Aug 2018 User since 2018

    Wonderful! :)
    For the project that I had in mind, the "carouselMultipleDetailWindows" is exactly what I wanted!
    But also the "carouselSingleDetailWindow", will surely be useful for other purposes.
    Thank you so much @andrea for your support and for your perfect explanation!

or Sign Up to reply!