[Solved] RadListView image display bug in IOS

[Miklos]

Hi!

I use Nativescript angular version and get image path from api.

Insert to RadlistView but the image dont show correct. This video show what is the problem: https://youtu.be/vv2dwh1p0VE

Why disable or remove image out of display and why download again when image is in the screen again? I remove loadMode asyn but the problem not solved.

Thank you for your help

<RadListView [items]="dataItems" height="100%">
<ng-template tkListItemTemplate let-item="item">
<StackLayout class="list-group-item list-item-template-style">
<Image class="list-newcatalog-photo"
[src]="item.imageUrl"
loadMode="async"
width="100%"></Image>
</StackLayout>
</ng-template>
<ListViewLinearLayout
tkListViewLayout
scrollDirection="Vertical"
spanCount="1"></ListViewLinearLayout>
</RadListView>

[Nick Iliev]

Hi Miklos,

Thank you for your interest in NativeScript!
The video link you have provided is not working (YouTube opening the link with "This video is not available") so I was not able to fully understand and reproduce the issue. Can you please provide a working link and/or sample project to demonstrate the issue (you can archive the project with deleted node_modules and platforms folder).

Bear in mind that loadSync property is working for Android only (makes no difference on iOS) and it aims to prevent the UI from freezing when larger images are loaded.


Regards,
Nikolay Iliev
Progress Telerik

[Miklos]

My video link was not public. Sorry I fixed this.

https://youtu.be/vv2dwh1p0VE

I have this problem.

Please help me.

Thanx

 

[Nick Iliev]

Hello Miklos,

On iOS behind RadListView and ListView stands UICollectionView which has the requirements that its cells must have a predefined size. This means that size can't be assigned dynamically (as in your case) and the RadListView must "know" the size of the image that will be loaded into the cell.

One possible approach would be to create grids using GridLayout and specify the size of the row (or column) that will load the image from your online API source.

e.g.

<RadListView [items]="items" height="100%">
    <ng-template tkListItemTemplate let-item="item" let-i="index">
        <GridLayout rows="auto 300" class="list-group-item list-item-template-style">
            <Label row="0" [text]="i + 1" textWrap="true"></Label>
            <Image row="1" class="list-newcatalog-photo" [src]="item.imageUrl" loadAsync="true" ></Image>
        </GridLayout>
    </ng-template>
    <ListViewLinearLayout tkListViewLayout scrollDirection="Vertical" spanCount="1"></ListViewLinearLayout>
</RadListView>

With the above snippet, the image will be loaded in the second grid row (row="1") which has height value of 300dp (device independent pixels). This way the UICollectionView will "know" each cell size and load all images as expected.

Demonstration application that shows this technique while using online API can be found here.

Regards,
Nikolay Iliev
Progress Telerik

[Miklos]

Hi!

Have you got any idea how can I make list width screen width images?

I want to zoom image in the list. Can I do this? Because the pinch example not working in list item.

Lot of thanx

Bumbella

[Nick Iliev]

Hi Miklos,

You can create your list view item template to take all available space  (or a particular part of it) using different layouts. For example, you can use GridLayout and set the image column to have space of * (meaning take all available space)

For example, the below snippet will create four equally sized boxes (each containing a label)

<GridLayout rows="*, *" columns="*, *">
    <Label text="0, 0" row="0" col="0"></Label>
    <Label text="0, 1" row="0" col="1"></Label>
    <Label text="1, 0" row="1" col="0"></Label>
    <Label text="1, 1" row="1" col="1"></Label>
</GridLayout>

Using the above technique, you can set your item template and the image you are loading to be placed in a similar cell.

Regarding the zoom functionality, it is not an out-of-the-box one, and you will need an implementation that can handle the scaling and translation of the elements you want to zoom in and out. I have recently ported an existing example to an Angular based application here. The demo application demonstrates how to zoom, drag and reset the state of an element so you might reuse it or even improve the implementation.


Regards,
Nikolay Iliev
Progress Telerik

[Miklos]

Thank you for your lot of help.

Can I disable list scrolling when I zoom image? Because this problem both platform

IOS: https://youtu.be/rD0VuBql070

Android: https://youtu.be/bbalz5HVCzM

Thanx

[Nikolay Tsonev]

Hi Miklos,

Thank you for writing us back.

I reviewed your case, however, there is no functionality, which provides a way to disable the scroll of the ListView. Something that could help is using isUserInteractionEnabled and to set it to false. This will disable the interaction for the whole component. For example:

<RadListView id="lvid" row="1" [items]="dataItems" isUserInteractionEnabled="false">
        <ng-template tkListItemTemplate let-item="item">
            <StackLayout orientation="vertical">
                <Label class="nameLabel" [text]="item.name"></Label>
                <Label class="descriptionLabel" [text]="item.description"></Label>
            </StackLayout>
        </ng-template>
    </RadListView>

Bear in mind that this property will also affect the child components and could disable the gestures 

Regards,
nikolay.tsonev
Progress Telerik