UITableView设计

Question

我有UITableView，我想要的设计如下。

​

​

为此，我有如下图像。

bottomRow.png

​

​

middleRow.png

​

​

topAndBottomRow.png

​

​

topRow.png

​

​

为此，我在-(UITableViewCell *) tableView:(UITableView *) tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {中使用了下面的代码

UIImage *selectedImage;
if (indexPath.row==0) {
    selectedImage = [UIImage imageNamed:@"topRow.png"];
} else if (indexPath.row == ([products count]-1)) {
    selectedImage = [UIImage imageNamed:@"bottomRow.png"];
} else {
    selectedImage = [UIImage imageNamed:@"middleRow.png"];
}

if ([products count]==1) {
    selectedImage = [UIImage imageNamed:@"topAndBottomRow.png"];
}

UIImageView *selectedBackgroundImageView = [[UIImageView alloc] initWithImage:selectedImage];
cell.selectedBackgroundView = selectedBackgroundImageView;

selectedBackgroundImageView = [[UIImageView alloc] initWithImage:selectedImage];
cell.backgroundView = selectedBackgroundImageView;

现在，一切都很完美。

，但我的设计师坚持以下几点。

在桌面视图上，我一次可以有4个细胞。现在假设我有6排。

现在，当我有6行(而tableview只能显示4)时，第4行显示bottomRow.png，这是显而易见的。但是我的设计师坚持说，即使是桌面视图也是滚动的，你应该对所有4行都有相同的设计。

编辑1

首先，抱歉没有说清楚。

当UITableView加载时，我只能看到前4个单元，即使有6个单元，因为我已经相应地设置了表视图的高度。要看rest 2细胞，我必须向下滚动。我相信这就是桌面视图的工作原理。

现在假设只有4条记录。对于4条记录，表视图看起来像我拥有的图像。

现在，当我的表视图大小为6( id为1-6)时，第四行将获得图像middleRow.png。在这里，我的设计师想看到的是bottomRow.png。

现在假设我向下滚动。现在我看到有单元格标识为3-6的行。现在有id 3的单元格有middleRow.png，但是我的设计师想看topRow.png。

我知道这很难看，但这正是我的设计师想要看到的。

有什么建议来完成这个任务吗？

Answer 1

实现目标的一种方法是:使用numberOfRows来确定这个单元是否是最后一个单元。在cellForRowAtIndexPath中：

if (indexPath.row==0) {
   selectedImage = [UIImage imageNamed:@"topRow.png"];

.....

else if (indexPath.row == [tableView numberOfRowsInSection:indexPath.section]-1){
   selectedImage = [UIImage imageNamed:@"bottomRow.png"];
}

编辑：

对不起，我误解了你的问题，我有另一个建议，我想你可以试试.

1. customCell，使用自定义方法设置其图像。例如, [customCell setSelectedImage: UIImage imageNamed:@"middleRow.png"；

1. 在cellForRowAtIndexPath中，可以将所有单元格设置为: middleRow.png

1. 加载tableView后，使用self.tableView visibleCells运行检查方法；

例如

 - (void) setImageForTopAndBottomCells{

         CustomCell *topCell = [[self.tableView visibleCells] objectAtIndex: 0];
         CustomCell *bottomCell = [[self.tableView visibleCells] objectAtIndex: self.tableView.visibleCells.count-1];

         [topCell setSelectedImage: [UIImage imageNamed:@"topRow.png"]; 
         [bottomCell setSelectedImage: [UIImage imageNamed:@"bottomRow.png"]; 
  }

1. 如果tableView是可滚动的，请将ViewController设置为UIScrollView委托，在委托方法scrollViewDidScroll中，再次运行setImageForTopAndBottomCells方法。

有可能有更好的方法来实现你想要的比我提出的方法，让我知道，如果你找到一个。

Answer 2

如果结合使用scrollViewDidScroll:、indexPathsForVisibleRows和reloadRowsAtIndexPaths:withRowAnimation:，并使用如下内容：

1. 每次表视图滚动时，都会使用UIScrollViewDelegate方法scrollViewDidScroll:获得可见行列表。
2. 如果滚动到足以改变背景，则调用UITableView的reloadRowsAtIndexPaths:withRowAnimation:来传递所有需要新背景的索引路径。
3. 与其使用indexPath.row == 0查找顶部，不如对其他行使用[indexPath isEqual:[tableView indexPathsForVisibleRows][0]]和相同的内容

希望这能有所帮助。

Answer 3

您可以在CellForRowAtIndexPath方法中使用middlerow.png作为UITableViewCell的背景视图。下面是代码

 cell.backgroundView = [[UIImageView alloc] initWithImage[[UIImageimageNamed:@"middlerow.png"]stretchableImageWithLeftCapWidth:0.0 topCapHeight:5.0]];

之后，您可以更改表视图的角半径(添加边框颜色/宽度)。但首先，您必须添加QuartzCore框架。

self.table.layer.borderColor=[[UIColor colorWithRed:209.0/255 green:209.0/255 blue:209.0/255 alpha:1.0] CGColor];
self.table.layer.borderWidth =3.0;
self.table.layer.cornerRadius =10.0;

希望这能有所帮助。