在类似于 facebook 或 pinterest 的 tableview 单元格中显示图像

Posted 2023-03-04

【中文标题】在类似于 facebook 或 pinterest 的 tableview 单元格中显示图像

【英文标题】：displaying images in a tableview cell similar to facebook or pinterest

【发布时间】：2019-09-10 18:13:37

【问题描述】：

我正在开发一个包含对话列表的应用，并且在这些对话中可以包含一个或多个图像。我希望它看起来类似于 facebook 的操作方式，它采用类似网格的格式，根据存在的数量增加或缩小图像，并可以选择单击带有大量对话的叠加层图片。

这是我正在尝试做的基本想法

搜索我找到的最接近我想要的是this，但这个例子相当粗略，只是简单的文本，我需要能够制作图像并处理使用计数器设置覆盖。

【问题讨论】：

你想通过collectionView显示不同的照片（不同大小），对吧？

是的，我们的想法是它最多可以容纳 5 张图片，而第五张图片会有一个点击操作，会打开一个对话框来显示整个列表，就像 facebook 一样。跨度>

【参考方案1】：

只是关于如何实现的一些想法，让我们以third view in the sample为例，在你的collectionView中，你应该有一个名为isExpand的属性来检查你是否需要扩展图像：

public bool isExpand get; set;

然后在itemSource中：

public override nint GetItemsCount (UICollectionView collectionView, nint section)

    // Return the number of items

    if (isExpand)
    
        return Numbers.Count;
    
    else 
        return Numbers.Count > 5 ? 5: Numbers.Count;
    

在GetCell：

public override UICollectionViewCell GetCell (UICollectionView collectionView, NSIndexPath indexPath)

    // Get a reusable cell and set it's title from the item
    var cell = collectionView.DequeueReusableCell ("Cell", indexPath) as TextCollectionViewCell;
    cell.Title = Numbers [(int)indexPath.Item].ToString();

    if (!isExpand)
    
        //add the button on the fifth image or an image with button icon
        if (indexPath.Row == 4)
        

        
    
    else
    
        //remove the button on the fifth image
    

    return cell;

而在itemSelected 或button click action：

public override void ItemSelected(UICollectionView collectionView, NSIndexPath indexPath)

    if (isExpand)
    
        // reload the dataSoure with all the images
    
    else 
        // handle the click action on the fifth image
        if (indexPath.Row == 4)
        
            // reload the dataSoure with 5 images