Xamarin Forms CollectionView Разработка пользовательского макета - PullRequest
Новая
       48

Xamarin Forms CollectionView Разработка пользовательского макета

0 голосов
/ 17 марта 2020

В приложении, которое я разрабатываю, я использую collectionview для отображения множества изображений. И это мой текущий дизайн .

И это дизайн, который я хочу . где изображения с более короткой высотой будут иметь следующее изображение, заполняющее пробелы.

Вот мой код: 

            <CollectionView x:Name="cv_WallPapers"
                            ItemsSource="{Binding Results, Mode=TwoWay}"
                            HorizontalOptions="FillAndExpand"
                            VerticalOptions="FillAndExpand"
                            Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2"
                            SelectionMode="Single"
                            SelectionChanged="cv_WallPapers_SelectionChanged"
                            >
                <CollectionView.ItemsLayout>
                    <GridItemsLayout Orientation="Vertical"
                                     Span="2"
                                     VerticalItemSpacing="5"
                                     HorizontalItemSpacing="5"/>
                </CollectionView.ItemsLayout>
                <CollectionView.ItemTemplate>
                    <DataTemplate>

                        <Frame Padding="4"
                               BorderColor="#34eba8"
                               BackgroundColor="#34eba8"
                               CornerRadius="10"
                               HasShadow="False">
                            <Image Source="{Binding urls.regular}"
                                   HorizontalOptions="FillAndExpand"/>
                        </Frame>

                    </DataTemplate>
                </CollectionView.ItemTemplate>
            </CollectionView>

Я не знаю, как это сделать в Xamarin. И ценю помощь!

1 Ответ

0 голосов
/ 18 марта 2020

К сожалению, CollectionView в Forms до сих пор не поддерживает такой макет. Однако мы могли бы использовать Custom Renderer в качестве обходного пути в Android. 

public class MyCollectionViewRenderer: CollectionViewRenderer
{
    public MyCollectionViewRenderer(Context context) : base(context)
    {

    }

    protected override void OnElementChanged(ElementChangedEventArgs<ItemsView> elementChangedEvent)
    {
        base.OnElementChanged(elementChangedEvent);

        if(elementChangedEvent.NewElement!=null)
        {
            this.SetLayoutManager(new StaggeredGridLayoutManager(2, 1));
        }

    }
}

In iOS, поскольку UICollectionView в нативном iOS не имеет такого свойства или API, поэтому нам нужно реализовать его вручную (пересчитать размер каждого элемента и установить смещение). Который вы могли бы сослаться https://developer.apple.com/documentation/uikit/uicollectionview/customizing_collection_view_layouts?language=objc. И я опубликую запрос функции как можно скорее.

...