Nativescript: Feature Request: Paged Slider UI component

[dbbk]

There is currently no abstraction for a "paged slider" component (not sure if there's a better name for it). It's where you can scroll horizontally between 'pages' of content, with your position indicated by dots below.

You can see an example of this on the iOS home screen:

[enchev]

We've logged this in our ideas portal:
https://nativescript.ideas.aha.io/ideas/NS-I-32

[jlooper]

+1 for this, so that we can show an introductory tutorial for our apps

[valentinstoychev]

Hey all - good news!! We are working on this and it will be available soon as part of Telerik UI for NativeScript - hopefully as part of our 1.5 release (coming mid-November).

[dbbk]

I'm confused, why would this be a paid component? It's a native component built into the OS SDK. We're just asking for a tns module abstraction.

[valentinstoychev]

@dbbk - my understanding is that this is available on iOS only and the Android counterpart should be implemented in native code - thus the inclusion in Telerik UI.

If there is a native pager in Android, then you are right and we will just do a wrapper and it will be part of the core UI abstractions. cc:/ @ginev.

[toddanglin]

+1 Need this for a few different scenarios. Happy to hear it's coming.

Can you confirm it's still on the v1.5 plan?

[ginev]

This is a feature which is available in the Android RadListView out-of-the-box. It is currently not natively supported by the corresponding iOS component so exposing it to NS through RadListView, part of Telerik UI for NativeScript needs to wait until after the iOS ListView supports it.

[toddanglin]

Just to clarify: You're saying we need to wait for the Telerik UI for iOS ListView to add support for this kind of paging before NativeScript gets the capability?

I'm a little confused why this navigation-like functionality is part of the more complex ListView widget. Seems like ListView is overkill for the scenarios where you want simple swipe-based container navigation.

[alexrainman]

Yes, theres an Android counterpart for this and its called ViewPager. You can match it with UIPageViewController in iOS and make it dynamic with methods to Remove/Add pages programmatically in the fly. On android theres not UIPageControl counterpart by default but theres a library named ViewPagerIndicator: https://github.com/JakeWharton/ViewPagerIndicator

So, this cannot be a paid component.

[valentinstoychev]

thank you all for the feedback on this. I think seeing this from all perspective it is clear that it should be in the open source and free part of NativeScript.

Please cast your votes here - https://nativescript.ideas.aha.io/ideas/NS-I-32.

We, the core team, can't promise on a delivery date, so currently looking for contributors on this one. The team will gladly help with anything if needed.

[alexrainman]

I am going to start working on this later today, so, be ready to answer some questions ;)

[valentinstoychev]

Excellent! We will help you with pleasure! :)

[alexrainman]

I know very well each component in both platforms, so, i will follow your UI plugin tutorial to make it work, so, for sure i will have questions :) Tanke

[ginev]

@toddanglin, actually the ListView and the ViewPager are quite similar: they have similar UI virtualization approach, the have similar data feeding mechanism, they have currency, etc. SInce the Telerik ListView components from the native suites are designed with pluggable layout mechanisms in mind - implementing this for Android was a no-brainer (Google are pushing the RecyclerView component which exposes API for designing UI virtualized layouts). The same should be for the iOS ListView.

[toddanglin]

@ginev Thanks for the extra detail. I'm sure these two widgets are very conceptually similar "under the covers," but the the use cases for a horizontally swiped pager (with limited pages) vs. a vertically scrolled list (with potentially infinite rows) _feel_ very different. Putting it all in one widget with one giant API seems like it would make it harder than it should be to configure.

Does that make sense? It's similar in my mind to why Grid/ListView/TreeList are different discrete widgets in Kendo UI even though they share similar data binding/rendering concepts.

[alexrainman]

@toddanglin Exactly!

[manijak]

Very well explained @toddanglin !
Perhaps I am wrong, but in my head I see this component more simillar to the TabView rather than the ListView. I did post a request a while back where I tried to explain how I see it beeing used: https://github.com/NativeScript/NativeScript/issues/765

The competition allready has it
https://www.fusetools.com/community/examples/pagecontrol

+1 mate @alexrainman

[ginev]

@toddanglin I see your point. It's just how the native Android SDK is currently developed. Google are pushing the RecyclerView with different LayoutManagers instead of HorizontalListView, GridView and ListView as separate components with the same API and different behavior. So we simply provide another behavior for the Android RecyclerView (on which our native component is based) which is the Carousel/Pager/Slider.

So, all being one component here is not a philosophical question. It doesn't limit us from simply providing separate components (dummy classes inheriting from the actual one) and calling them RadGridView, RadListView, RadSliderView, etc. Reusing this will allow us to quickly have all of these, separated or not, quicker than having to write the code for each one separately.

Of course, if we decide to separate the Slider from ListView, we can do that for the NS developer but we will still need to rely on the native implementation.

Here's how things will look like for a NS developer in both cases:

<lv:RadListView items="{{ dataItems }}" >
        <lv:RadListView.listViewLayout>
            <lv:CarouselLayout itemHeight="50" scrollDirection="Vertical"/>
        </lv:RadListView.listViewLayout>
        <lv:RadListView.itemTemplate>
            <StackLayout orientation="vertical">
                <Label fontSize="20" text="{{ itemName }}"/>
                <Label fontSize="14" text="{{ itemDescription }}"/>
            </StackLayout>
        </lv:RadListView.itemTemplate>
    </lv:RadListView>

<lv:RadCarousel items="{{ dataItems }}" itemHeight="50" scrollDirection="Vertical">
        <lv:RadCarousel.itemTemplate>
            <StackLayout orientation="vertical">
                <Label fontSize="20" text="{{ itemName }}"/>
                <Label fontSize="14" text="{{ itemDescription }}"/>
            </StackLayout>
        </lv:RadCarousel.itemTemplate>
    </lv:RadCarousel>

We can choose whatever way we want to go.

[toddanglin]

I think that's the big difference, in my view. I see the "Pager" control we're talking about here more like the TabView, with statically defined views, versus being (primarily) a data bound widget with an item template.

So the markup I'd expect in this case would be more like this:

<PageSlider scrollDirection="horizontal" showPageIndicator="true" pageIndicatorTemplate="..." autoLoop="true" transitionEffect="[slide (default) | fade | pageflip?]">
   <PageSlider.items>
      <PageSliderItem>
          <!--TODO: Some XML markup for page 1 -->
      </PageSlideItem>
      <PageSliderItem>
          <!--TODO: Some XML markup for page 2 -->
      </PageSliderItem>
   </PageSlider.items>
</PageSlider>

A Carousel or ListView are expected to have a larger number of repeated items. The "PageSlider" as we're describing it is meant to have a smaller, more discreet number of items, each uniquely defined.

Does that make sense?

[toddanglin]

RE: pageIndicatorTemplate

Just to be clear on this proposal, this would allow developers to customize what is used for the page indicators. By default, the typical "circle" page indicators should be rendered (with default and :active state styling). But developers could choose to provide a custom template that would allow different shapes or even custom icons for each page.

As an example, the latest Netatmo iOS app uses different icons for each page of the swipable UI in the new version of their app:

That is the kind of scenario I'd expect the pageIndicatorTemplate to support.

[ginev]

@toddanglin In that case having a separate control with additional properties makes sense.

[alexrainman]

+1

[alexcastillo]

+1

[jonnysamps]

+1

[gabrielbiga]

+1

[igorls]

+1

[BenKingBBC]

One year on. No progress with this?

[jonnysamps]

@BenKingBBC You can build this yourself like (for iOS at least)

  <ScrollView orientation="horizontal" ios.pagingEnabled="true" width="100%" height="100%">
    <StackLayout orientation="horizontal" id="sl">
      <template ngFor #picture [ngForOf]="pictures" #i="index">
        <Image ... />
      </template>
    </StackLayout>
  </ScrollView>

[raefa]

@jonnysamps Wow thanks. I had no idea ios.pagingEnabled="true" worked! Just tested this and it worked great.

<Page>
  <ScrollView orientation="horizontal" ios.pagingEnabled="true" width="100%" height="100%">
    <StackLayout orientation="horizontal">
      <Label text="1" width="375" backgroundColor="red" />
      <Label text="2" width="375" backgroundColor="green" />
      <Label text="3" width="375" backgroundColor="blue" />
    </StackLayout>
  </ScrollView>
</Page>

I think a cross platform plugin (with indicators across the bottom in iOS and hiding of the the scrollbar) would still be valuable ... probably does not need to be baked into the core.

[jonnysamps]

Ya, I agree. It would be nice to have a cross platform plugin... until
then...

On Wed, May 4, 2016 at 2:51 PM Raef Akehurst [email protected]
wrote:

@jonnysamps https://github.com/jonnysamps Wow thanks. I had no idea
ios.pagingEnabled="true" worked! Just tested this and it worked great.

I think a cross platform plugin (with indicators across the bottom in iOS
and hiding of the the scrollbar) would still be valuable ... probably does
not need to be baked into the core.

—
You are receiving this because you were mentioned.

Reply to this email directly or view it on GitHub
https://github.com/NativeScript/NativeScript/issues/173#issuecomment-217014636

[syedshahzebhasnain]

Still waiting for this to happen :( eagerly :( and specifically for android !

[bradmartin]

@TheOriginalJosh in the clutch...

• NPM: https://www.npmjs.com/package/nativescript-slides
• Repo: https://github.com/TheOriginalJosh/nativescript-slides

Two things I was able to create with this plugin using already available nativescript components.

• https://www.youtube.com/watch?v=kGby8qtSDjM
• https://www.youtube.com/watch?v=RsEqGAKm62k

[enchev]

Well done @TheOriginalJosh! I'm closing this!

[alexrainman]

Just released nativescript-carousel-view https://www.npmjs.com/package/nativescript-carousel-view

[alexrainman]

It introduces TemplateSelectors, methods to add/remove pages programmatically, events callbacks when selected page changes and much more on the way.

[hikumealan]

What is the status on this?
@toddanglin Was a {N} component ever created for this ask?
The description with the pageIndicatorTemplate is the exact support I need with the ability to position the pageController above the swipe content.

[alexrainman]

@hikumealan https://www.npmjs.com/package/nativescript-carousel-view

[manijak]

@hikumealan
https://www.npmjs.com/package/nativescript-carousel

[hikumealan]

@alexrainman and @manijak These implementations seem to fall short of the discussion @toddanglin was having above.

What happened to having this as a feature of {N}?
The outlined approach seemed like the right solution.

[alexrainman]

@hikumealan fall short?

[toddanglin]

@hikumealan I've been using the NativeScript Slides plugin created by @TheOriginalJosh for the last year (or so). Works great.

The two plugins from @alexrainman and @manijak are great, too! So there are many options for NativeScript now to tackle this common paging slider UI. I think the primary "missing" feature in all of these plugins (as far as I know) is support for defining the pageIndicatorTemplate. I'm sure it could be added with a little work. Otherwise, these "slider UI" components check all the boxes and work cross-plat.

[alexrainman]

@toddanglin what do you mean with setting the pageIndicatorTemplate?

It means using a view as template for each dot? That can be easily done dough.

Mine supports to indicators style: circle and square.

[toddanglin]

@alexrainman Yes, support for user-defined page indicators. While I agree the circle and square account for most common scenarios, there are cases where a developer may want more control over the indicators (see the Netatmo app screenshot example above).

If your carousel plugin can support that kind of template, I think it would be super cool!

Now...based again on the Netatmo example...I think the implementation would have to support an optional "per slide" indicator definition to allow each page to have a unique indicator. Either that or some kind of event would have to fire ("onPageIndicatorCreating") that would give a developer a chance to modify the indicator programmatically per page.

[alexrainman]

@toddanglin i will use same approach with ITemplateSelector :)

[alexrainman]

@toddanglin i am testing version 3 which deprecates SetCurrentPage and uses position binding instead to swipe programmatically. Once i release that, i will work on indicatorTemplate functionality.

[JoshDSommer]

@toddanglin with the Nativescript slides plugin you should be able to set the indicator to whatever shape you want using the available css classes

.slide-indicator-inactive{
    background-color: #fff;
    opacity : 0.4;
    width : 10;
    height : 10;
    margin-left : 2.5;
    margin-right : 2.5;
    margin-top : 0;
    border-radius : 5;
}

.slide-indicator-active{
    background-color: #fff;
    opacity : 0.9;
    width : 10;
    height : 10;
    margin-left : 2.5;
    margin-right : 2.5;
    margin-top : 0;
    border-radius : 5;
}

I imagined some setting a background image or something of that nature too.

[jdnichollsc]

@enchev @bradmartin @TheOriginalJosh Guys, any option to support a Slider component into a ScrollView?
https://github.com/TheOriginalJosh/nativescript-ngx-slides looks really awesome but it does not work well inside of ScrollView.

Thanks in advance

[jdnichollsc]

mmm I don't know... I think that a Paged Slider UI component is a critical component, it should be part of the NativeScript Core. Third-party solutions is fine, but a framework for mobile development should offer a default solution and NativeScript is an excellent framework :)

[GaddMaster]

What is update on original post request ? We also am looking to add this most normal Android functionality. We need be able have a slider like on all android phones on dashboard . Seems wack we cant have it now ?

[jdnichollsc]

@GaddMaster the NativeScript Pager component looks promising, but I have issues with Angular https://github.com/triniwiz/nativescript-pager/issues/35

[jdnichollsc]

@enchev please, reopen this issue 👍

[bhavincb]

+1

[bhavincb]

any updates on this as implementing component in core modules? and how i unasssigned @ginev also.. Lol..!!

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.