[AC-5535] Support for horizontal list in ListView
| GitHub Issue | n/a |
|---|---|
| Type | New Feature |
| Priority | n/a |
| Status | Resolved |
| Resolution | Won't Fix |
| Resolution Date | 2018-05-18T08:53:41.000+0000 |
| Affected Version/s | n/a |
| Fix Version/s | n/a |
| Components | Titanium SDK & CLI |
| Labels | n/a |
| Reporter | Prashant Saini |
| Assignee | Shak Hossain |
| Created | 2018-01-21T11:37:43.000+0000 |
| Updated | 2018-05-18T14:03:27.000+0000 |
Description
At present, there's no way to create a horizontal list of items inside a ListView.
e.g. As in Play Store app, if we have to create a similar UI, then we will have to give-up the ListView & it would make a huge difference in performance if ImageViews are used.
List Views and Card Views are two different major-UI-elements for navigating between items. They are not supposed to work together, just as Scroll Views should not work together with List Views as well. See the different (native) UI approaches [here](https://developer.android.com/training/material/lists-cards.html). Maybe [~jquick] will have some more background for this, but from what I heard in the past, this would be bad practice (and in fact is also for iOS).
Edited the ticket title to be more clear on the requirements.
Hi Hans, actually I requested 2 different UI element improvements in same ticket. For ListView, the only concern is to be able to create a horizontal list of views as I referred in Play Store app. I am not saying that ScrollView must be present in ListView, only we should be able to create a horizontal-scrolled list-view.
The Google Play app listing UI is a custom view. There's nothing natively built-in to Android or iOS that will quite replicate it. Not even the native Android RecyclerView does quite the same thing. What I think you can do is set up a vertical ScrollView container which has child horizontal ScrollViews in it. Each child horizontal ScrollView should listen to the vertical ScrollView container's "scroll" event to detect if it is still onscreen or not. The "scroll" event provides property "y" to tell you how far down it has scrolled down and the child horizontal ScrollView's (x,y) coordinates will be relative to that event's "y" value. So, the idea is if you scroll far enough off-screen, then you should null out the ImageView's "image" property to unload the image and when the child view scrolls back on-screen, you should re-load the image into the ImageView. You're effectively implementing your own image culling.
Doing it using ScrollView is not a memory efficient solution as the child views will never be recycled even after nulling the images as in ListView. Regarding the native Android recycler-view, it allows to use following types of layout - *Horizontal LinearLayout, Vertical LinearLayout, Grid-layout, & StaggeredGrid*, and RecyclerViews can be nested to any level which can't be done in Ti.UI.ListView. Sooner or later, Android's RecyclerView is a must to have for any cross-platform framework to deal with large data-sets. There could be alternatives like you have described here, but Titanium must provide native RecyclerView so any layout type can be designed keeping memory efficiency at best. We would love to see it in SDK 8.x
[~prashant_saini] would TIMOB-17360 solve this issue for you?
[~prashant_saini], [~topener], I think expanding
ListViewto support more widgets, including modules, may be the way to go for the moment. We're currently experimenting with this now. See: [TIMOB-24817] and [TIMOB-24776]I'm resolving this issue as it is going to be possible to implement using a commonjs module in 7.3.0 according to the linked tickets in the comment above me. If help is needed to implement this I'm happy to help out when the feature is released
Rene, that new ticket for RecyclerView in 7.4.0 is going to be awesome. My humble suggestion is to provide parity for iOS as well. Believe me or not, people are going to use only RecyclerView on Android once it is released. 99% native Android developers in my vicinity use RecyclerView nowadays. Thanks for update :)