如何在 swift 中创建新闻提要 UI

Posted 2023-03-04

【中文标题】如何在 swift 中创建新闻提要 UI

【英文标题】：How to create news feed UI in swift

【发布时间】：2016-11-08 07:12:40

【问题描述】：

我创建了一个新闻提要应用程序。我从服务器获取新闻数据。在我的数据新闻中，文本或带有文本的图像可用（与 Facebook 提要相同）。 我之前已经成功地在 UITableviewCell 图像中创建了带有文本内容的图像，但是我试图在 UITableViewCell 文本或带有文本的图像中多次尝试，多个单元格的第一个单元格只是文本，第二个单元格是带有文本的图像。如何创建，我知道我没有解释正确的方法，但我想创建与 Facebook 提要（时间线）相同的内容。

以及创建此视图的数组或字典类型。文本视图中的一些单元格和一些单元格图像和文本视图。如何创建动态单元格。我感到很困惑。如何创建新闻提要 ui 以及在哪种类型的数组中创建此新闻提要。请帮忙。我是ios的新手。谢谢。

请找到附件并查看。我想要这个。

仅文本视图

图像和文本视图

【参考方案1】：

像往常一样在单元格中添加UILabel 和UIImageView。 （如果您只显示文本，我建议使用UILabel 而不是UITextView，如果我错了，请纠正我）。设置标签的约束以具有前导、顶部和尾随。将其numberOfLines 设置为 0 并将内容模式设置为word wrap。现在为您的UIImageView 添加一个顶部到UILabel。前导、尾随和底部到superView。现在还为您的UIImageView 设置一个高度约束，这将是一个最小值。在您的单元格内为此约束创建一个IBOutlet。

现在，在您的UIViewController 中设置tableView.estimatedRowHeight 属性和tableView.rowHeight = UITableViewAutomaticDimensions。现在，在您的cellForRowAtIndexPath 中，每当您的单元格包含图像时，将高度约束设置为最小值，否则将其设置为 0。

编辑：

-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath

   CustomCell *cell = [tableView dequeueReusableCellWithReuseIdentifier:@"cell"];

  //select your model from the array corresponding to your indexPath.row
  CustomModel *model = array[indexPath.row]

  // I am assuming you are fetching image from server
  NSString *imageUrlString = model.imageUrl

  //check your model if it contains an image
  if(imageUrlString)
      cell.imageHeightConstraint = 250.0f;
  else
      cell.imageHeightConstraint = 0.0f;
  

【讨论】：

我明白所有要点请仅解释 [cellForRowAtIndexPath] 如何将图像设置高度约束为最小值，否则将其设置为 0。请解释一些代码

我对Objective-C很熟悉，所以我补充了一点，也许它会帮助你快速理解它。

还有一件事，请解决我的最后一个问题。这是我心中的一大困惑。通常创建一个数组 'var products: [String] = ["ponds", "lakme", "milk"] 和图像数组 var images: [String] = ["logoimg.png", "logoimg.png"]。图像数组对象只有两个。所以我的问题是如何决定在哪个单元格中加载图像。否则如何在这个定义对中创建字典。同一图像的新闻文本。

我认为我的解释不正确。请尽量理解并支持

如何决定加载哪个单元格图片和哪个单元格只加载文本

【参考方案2】：

根据您的要求创建一个包含 textView 和 imageView 的自定义 tableViewCell。并通过Link

对于不同类型的数据类型，您必须创建键值对的字典（或字典数组）。请访问Link

如果您有两种类型的提要，一种带有图像，另一种没有图像，那么您可以创建两个不同的自定义单元格并相应地使用它们。

另一种选择是通过创建约束出口使 imageView 的高度为零。但我不支持这个，应该谨慎使用。

最好创建一个包含字典的数组。 如果您没有图像，只需将“图像”的值设置为空字符串。

    var dict1:[String:String] = ["text":"my text....","image":"imagename.png"]
    var dict2: [String:String] = ["text": "my text...", "image":""]
    var myDictArray = [[String:String]]()
    myDictArray.append(dict1)
    myDictArray.append(dict2)

将它们放在 uitableviewcell 中时，只需检查键“image”的字典值。如果它不为空，则加载第一个自定义单元格（带有 imageView 和 textView），否则加载第二个自定义单元格（不带 imageView）

【讨论】：

感谢您的回复，我还创建了自定义 tableviewCell，但是在 tableview 中重新加载了字典数组，当时某些单元格图像不可用，只有文本可用。这种情况将如何管理图像视图隐藏与否

图像中的所有单元格都不是强制性的。两个条件将如何管理

放置一个占位符图像并在下载后将其替换为您的图像。

NO NO 我想要的图像在我的某些提要中不可用，因此条件如何隐藏图像视图

我想要一个 facebook 时间线视图，一些单元格纯文本显示和一些带有文本显示的单元格图像