Slider control

Using slider control in Cross Platform Swift on Android and iOS

The slider control allows you to implement Carousel like functionality where you can swipe left and right to display different items:

🚧

Naming of control

The current naming of Slider control and Slider line control is a bit confusing. We will rename Sliderline control to Slider control, and Slider control to something like Scroll control in the future.

  • What you know from iOS and Android as slider is called SliderLine
  • Slider control is known as Carousel in iOS and Android

Use Class to describe data container

First, we want to use data from the Pic class to bind to the slider's element. You can use a class or a simpler data type. If you use a class, you currently still need to inherit from EObject.

import ScadeKit

class Pic : EObject { 
    let url : String
    
    init(_ filename:String) {
        self.url = "./assets/\(filename)"
    }
}

Design the page

  1. Add the slider control and center it.
  2. Insert an image control within the slider control

Add code to main page

You use the elementProvider attribute to specify a provider object of type SCDWidgetsElementProvider. A provider maps data to the slider's display element controls, you use it to populate the controls within the slider's elements.

self.slider1.elementProvider = SCDWidgetsElementProvider { (item: Pic, template) in
      
    guard let image = template.getWidgetByName("image1") as? SCDWidgetsImage else { return }

    image.url = item.url
    image.contentPriority = false
}

Capture slide event and slider positions

The event is of type SCDWidgetsSlideEventand has the attributes to and from. In this example, we use to in order to get the url of the Pic object.

Using the items property you can access the next data object we are sliding to.

// Use the onSlide handler to capture slide events
self.slider1.onSlide.append(SCDWidgetsSlideEventHandler { e in 
    guard let nextpos = e?.to, nextpos>=0 && nextpos<self.slider1.items.count else { return }
            let picNext = self.slider1.items[nextpos] as! Pic
                print(picNext)
})

Slide to a specific item

The item count starts at zero, so to goto 2nd item, set .selected = 1. You cannot use the property in the load method(), use the show method instead

override func show(view: SCDLatticeView?) {
  super.show(view:view)

  // selected works only within the show function
  self.slider1.selected = 1
}

Using a more generic element provider

You can use the raw SCDWidgetsElementProvider init method to have access to more technical attributes

slider.elementProvider = SCDWidgetsElementProvider { item in
        guard let slider  = item?.target as? SCDWidgetsSlider,
              let pos = item?.position else { return nil }

   guard let newElement = slider.template?.copyControl() as? SCDWidgetsGridView,
      !newElement.children.isEmpty,
      let image = newElement.getWidgetByName("image1") as? SCDWidgetsImage else { return nil }

   image.url = "Assets/\(pos + 1).png"
   image.contentPriority = false

   return newElement
}

Properties and methods

NameDescriptionValues
selected:IntSpecifies which element of the slider's elements is displayed0 .. (number of elements)-1

Works only in the show() method
elementProvider: SCDWidgetsElementProviderHolds object that maps data to slider's elements visual controls.
onSlide:[SCDWidgetsSlideEventHandler]Add event handler to capture slide events. The event has to and from attributes.-1 if you try to slide left to the beginning and there is no more item
- collection size +1 if you try to swipe right and there is no more element
- to and from contain the respective index number
items:AnyList of items that represent the data that should be displayedIf you use a class, it has to inherit from EObject.
elements:SCDWidgetsElementList of elements. Elements represent the container for the visual controls displayed in the slider