TableView中的多个单元格

时间:2014-06-10 19:49:15

标签: ios objective-c uitableview

我是第一次写一个应用程序,我需要它从数据库中提取图像并列出它们供用户点击。如果这很难理解,我提前道歉。我遇到的问题是我需要在一个单元格中放置多个图像(或者标题中提到的每行只有多个单元格),我需要将每个图像指向其自己唯一的详细信息页面。所以有两个问题:是否可以将多个单元格放在一行中(基于屏幕宽度)?当一个数组超出界限时,我是否可以写一个例子来停止循环?

我所拉的图像都具有相同的尺寸(360x125),因此我根据方向获取容器的宽度和高度,并根据我可以放入单元格的数量来调整它们的大小。

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
    // Array the images are stored in.
    Companies *item = _feedItems[indexPath.row];

    // I grab the screen size and adjust if the screen is in landscape
    CGRect result = [UIScreen mainScreen].bounds;
    CGFloat width = CGRectGetWidth(result);
    CGFloat height = CGRectGetHeight(result);
    UIInterfaceOrientation interfaceOrientation = [UIApplication sharedApplication].statusBarOrientation;
    if(UIInterfaceOrientationIsPortrait(interfaceOrientation)){
        result.size = CGSizeMake(width, height);
    } else if(UIInterfaceOrientationIsLandscape(interfaceOrientation)) {
        result.size = CGSizeMake(height, width);
    }

    // if the width is less than 480 I fit one image and set the cells height, 
    // else I set the height to that if there were two images.
    if(result.size.width <= 480) {
        return (item.imageName.size.height / item.imageName.size.width) * CGRectGetWidth(self.listTableView.bounds);
    }
    if(result.size.width > 480) {
        return (item.imageName.size.height / item.imageName.size.width) * CGRectGetWidth(self.listTableView.bounds) / 2;
    }
    return (item.imageName.size.height / item.imageName.size.width) * CGRectGetWidth(self.listTableView.bounds);
}

如果宽度大于480,那么我放两张图片而不是一张。这可能会增加到每行三张图像,我还没有在iPad上测试它。

然后我将图像绘制到单元格中:

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    NSString *cellIndentifier = @"BasicCell";
    UITableViewCell *myCell = [tableView dequeueReusableCellWithIdentifier:cellIndentifier];
    myCell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:cellIndentifier];

    CGRect result = [UIScreen mainScreen].bounds;
    CGFloat width = CGRectGetWidth(result);
    CGFloat height = CGRectGetHeight(result);

    UIInterfaceOrientation interfaceOrientation = [UIApplication sharedApplication].statusBarOrientation;
    if(UIInterfaceOrientationIsPortrait(interfaceOrientation)){
        result.size = CGSizeMake(width, height);
    } else if(UIInterfaceOrientationIsLandscape(interfaceOrientation)) {
        result.size = CGSizeMake(height, width);
    }

    UIImageView *myImageView;
    UIImageView *myImageView2;

    if(result.size.width <= 480) {
        Companies *item = _feedItems[indexPath.row];

        myImageView = [[UIImageView alloc] initWithFrame:CGRectMake(0,0,CGRectGetWidth(self.listTableView.bounds), (item.imageName.size.height / item.imageName.size.width) * CGRectGetWidth(self.listTableView.bounds))];

        myImageView.tag = 1;
        myImageView.image = item.imageName;

        [myCell addSubview:myImageView];
    }
    if(result.size.width > 480) {
        Companies *item = _feedItems[indexPath.row * 2];
        Companies *item2 = _feedItems[(indexPath.row * 2) + 1];

        myImageView = [[UIImageView alloc] initWithFrame:CGRectMake(0,0,CGRectGetWidth(self.listTableView.bounds) / 2, (item.imageName.size.height / item.imageName.size.width) / 2 * CGRectGetWidth(self.listTableView.bounds))];
        myImageView2 = [[UIImageView alloc] initWithFrame:CGRectMake(CGRectGetWidth(self.listTableView.bounds) / 2,0,CGRectGetWidth(self.listTableView.bounds) / 2, (item.imageName.size.height / item.imageName.size.width) / 2 * CGRectGetWidth(self.listTableView.bounds))];

        myImageView.tag = 1;
        myImageView2.tag = 2;
        myImageView.image = item.imageName;
        myImageView2.image = item2.imageName;

        [myCell addSubview:myImageView];
        [myCell addSubview:myImageView2];
    }

    return myCell;
}

这是我到目前为止的代码,当方向为纵向时它将正常工作。但是,当方向设置为横向时,我得到预期的错误NSRangeException index beyond bounds。因为这个

Companies *item = _feedItems[indexPath.row * 2];
Companies *item2 = _feedItems[(indexPath.row * 2) + 1];

我想要拉出图像和后面的图像,放入同一个单元格(抱歉,如果这令人困惑)。这就是我使用y = 2xy = 2x + 1的原因。问题是当x超过y的最高值时。因此,如果数组有8个图像[0 - 7],它将循环遍历单元格绘制过程8次,如果我一次绘制两个,它将在第3个循环上绘制第8个图像:0[0,1] 1[2,3] 2[4,5] 3[6,7]错误将到来在第四个循环:4[8,9]索引8超出界限7.是否有一个例外我可以编写以避免这种情况?或者我使用的错误思维过程应该以不同的方式处理?

我怎样才能做到这一点,一旦我把两个图像放在同一行,每个图像都有自己的点击事件处理程序并重定向到他们自己的唯一页面(现在调用是在表格单元格视图上,这样当我点击同一行中的任一图像时,页面将重定向到同一行。)

我的限制是:我需要通过php页面从mysql数据库中提取数据。将被拉出的图像数量是随机的。图像是360 x 125,因此我无法将它们拉得太多,因此如果用户翻转到横向视图或使用更大的平板电脑或手机,则需要在同一行上有多个图像。有一个更好的方法吗?

1 个答案:

答案 0 :(得分:0)

为了防止越界错误,只需检查项目计数如下:

if (_feedItems.count < (indexPath.row*2+1)){
    Companies *item2 = _feedItems[(indexPath.row * 2) + 1];
    // rest of set up for second image
}

要检测图像印刷事件,请为每个图像添加一个点击手势识别器。

myImageView.userInteractionEnabled = YES; // This is important!
UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(onImageTap:)];   
[tap setNumberOfTouchesRequired:1];
[tap setNumberOfTapsRequired:1];
[tap setDelegate:self];
[myImageView addGestureRecognizer:tap];

在onImageTap方法中:

-(void)onImageTap:(UITapGestureRecognizer *)recognizer 
 {
     int tag = recognizer.view.tag;
     // rest of code based on image tag
 }

一旦你完成了这项工作并熟悉表视图,你应该通过继承UITableViewCell来查看自定义表视图单元,并了解表视图单元重用。

如果您喜欢冒险,我建议您查看UICollectionView,因为它可以让您连续显示两个项目并将每个项目视为不同的单元格。如果每行严格要两个项目,则必须管理单元格之间的间距。