Android: Dragging the first item of a list section moves the section header (and more issues)

[hansemannn]

See this test case and video for an example. Also incorrect on Android: When dragging (for example) the 2nd cell of the 2nd section to the last position of the 1st section, you would expect a targetItemIndex = 4 and targetSectionIndex = 0. Instead, it shows targetItemIndex = 0 and targetSectionIndex = 1, which is incorrect.

[hansemannn]

Workaround: Add an empty cell and subtract the index afterwards again.

[m1ga]

It's interesting! The direction of the movement is changing the output values:

const myTemplate = {
    childTemplates: [
        {
            type: 'Ti.UI.Label',
            bindId: 'title'
        }
    ]
};

const win = Ti.UI.createWindow();

const listView = Ti.UI.createListView({
    templates: { template: myTemplate },
    editing: true,
    defaultItemTemplate: 'template',
    sections: [
        Ti.UI.createListSection({
            headerTitle: 'Section 0',
            items: [
                { properties: { canMove: true, height: 43 }, title: { text: 'Title 0' } },
                { properties: { canMove: true, height: 43 }, title: { text: 'Title 1' } },
                { properties: { canMove: true, height: 43 }, title: { text: 'Title 2' } },
                { properties: { canMove: true, height: 43 }, title: { text: 'Title 3' } }
            ]
        }),
        Ti.UI.createListSection({
            headerTitle: 'Section 1',
            items: [
                { properties: { canMove: true, height: 43 }, title: { text: 'Title 0' } },
                { properties: { canMove: true, height: 43 }, title: { text: 'Title 1' } },
                { properties: { canMove: true, height: 43 }, title: { text: 'Title 2' } },
                { properties: { canMove: true, height: 43 }, title: { text: 'Title 3' } }
            ]
        })
    ]
});

listView.addEventListener('move', event => {
    console.warn("Start pos", event.sectionIndex, event.itemIndex);
    console.warn("End pos", event.targetSectionIndex, event.targetItemIndex);
});

win.add(listView);
win.open();

if I drag the element 0 - 3 upwards and place it at 0 - 3 again it log 0 - 3. If I drag it move it down and place it at 0 - 3 again it say 1 - 0

https://user-images.githubusercontent.com/4334997/188286364-46f8d09e-cc9a-4cb5-a7eb-0d477d079ccd.mp4

The Section title is part of the listview_holder. So that is moving with the item.

Looking at other examples like https://medium.com/@saber.solooki/sticky-header-for-recyclerview-c0eb551c3f68 it looks like they set different itemViewTypes to the elements to differentiate between header, footer and content. So rather than having it connected to the row it will be a separate item. Then normal items are smaller too: those RealtiveLayouts would be gone (less items -> more speed :wink: )

Hope that makes sense and I'm not completely wrong here :smile:

Edit: One issue with separating header + items: think we'll run into issues with the section number :thinking: Having section header and item 0 connected we will always have a section start. All in all it might be a heavy task to get that right.

[m1ga]

Just hacked around a bit, something like this The title text and position is hard-coded to 0 and "test header". But the header has a separate XML file now and each normal item doesn't have empty header/footer layouts

[m1ga]

Some stuff for brainstorming and so it won't get lost:

• move header/footer part from /android/modules/ui/res/layout/titanium_ui_listview_holder.xml into a custom xml
• when creating the items in this loop https://github.com/tidev/titanium_mobile/blob/74b00ce2b37f3fab45d5fe0c53b0033a2b999b53/android/modules/ui/src/java/ti/modules/titanium/ui/widget/listview/TiListView.java#L685-L721 move sectionHasHeader above the for (final ListItemProxy item : sectionItems) { loop and if true add another item for the header
• add id_header_holder in https://github.com/tidev/titanium_mobile/blob/f80e1dc35b7e1d8795fd096db2b350fddc94e88c/android/modules/ui/src/java/ti/modules/titanium/ui/widget/listview/ListViewAdapter.java#L36 and use the new xml
• use id_header_holder in https://github.com/tidev/titanium_mobile/blob/f80e1dc35b7e1d8795fd096db2b350fddc94e88c/android/modules/ui/src/java/ti/modules/titanium/ui/widget/listview/ListViewAdapter.java#L115-L116 when getItemViewType is returning a header
• adjust https://github.com/tidev/titanium_mobile/blob/f80e1dc35b7e1d8795fd096db2b350fddc94e88c/android/modules/ui/src/java/ti/modules/titanium/ui/widget/listview/ListViewHolder.java#L66-L86 so if viewGroup is a header (e.g. pass another varilable) use the headerTitle parts

[hansemannn]

Excellent research @m1ga, very interesting! Happy to sponsor the changes.

[m1ga]

Still just a test :smile:

My branch: https://github.com/m1ga/titanium_mobile/commit/20bc384caf2153b0b0853c3cf81f4dbaf89b2a84 (contains some logs and no headerViews or footers)

https://user-images.githubusercontent.com/4334997/189485698-fe0b4ffc-e5eb-4b3e-af77-cdf446ae751c.mp4

Currently broken when a section is empty...

Have to pause it for a bit due to other work that's why I've put my branch online.