带侧面标题图像的UITableView

时间:2010-08-04 22:07:56

标签: iphone uitableview ipad uikit sectionheader

iPad上的音乐应用程序有很多有趣的自定义UI功能,其中一个是查看albums of a particular artist时显示的表格视图。

它在每个部分的侧面都有图像,几乎以与部分标题视图非常相似的方式起作用。如果我向下滚动,顶部图像会一直停留在那里,直到下一个图像出现,然后将其关闭,反之亦然。

最初,如果不重新重新实现UITableView似乎是不可能的,但我认为通过简单地将UITableView子类化为在uitableview之外的侧面绘制这些部分图像,只要它调用layoutSubviews,它就是半可行的。 (即每当滚动时)。这有一些小问题:因为它在UITableView之外绘制,任何自动调整都可能会抛出整个布局。我真的只是不确定这一切的可行性。

有什么想法?

<小时/> 编辑:我刚刚意识到我的第一个想法不会起作用,因为桌面视图不会跟踪图像侧的任何触摸,所以如果你触摸它就无法滚动。我认为这里最大的问题是弄清楚如何传播触摸,以便在整个视图中跟踪触摸。

3 个答案:

答案 0 :(得分:1)

你可以以某种方式检查你在tableview(或最顶层等)中的哪个部分,然后简单地让UIView在部分改变时得到更新,我的想法有点难以解释,但它不会有完全重做UITableView,只需在表视图旁边有另一个视图来执行图像,而不是尝试嵌入该功能。

另一种方法可能有点棘手,但是你可以尝试缩进你的单元格,这样它们就不会从表格视图的最左边开始,使得tableview非常宽并且在节头部分中有一个自定义视图包含左侧的图像,希望能正确完成吗?好问题和一个有趣的人。

答案 1 :(得分:0)

在半夜随机思考之后,我终于想出了一个真正的解决方案。

将UITableview嵌入到UIScrollView中,当用户滚动视图时,触摸将通过父滚动视图,而不是tableview本身。几乎所有你需要做的就是layoutSubviews方法;因为每当用户滚动视图时都会调用scrollview的layoutSubviews,只需更改tableview的框架以保持固定在屏幕上,并更改tableview的contentOffset以匹配scrollview的框架。

示例代码:

- (void) layoutSubviews{
    tableView.frame = CGRectMake(self.contentOffset.x, self.contentOffset.y, tableView.frame.size.width, tableView.frame.size.height);
    tableView.contentOffset = self.contentOffset;   
}

此时,你可以将桌面视图调整到一边,然后在另一边做任何你想做的事。

答案 2 :(得分:0)

好的,我做过类似于音乐应用和聚光灯搜索的内容。

我没有子类化UITableView,我刚刚通过它的scrollViewDidScroll方法跟踪了这些部分,并将标题视图添加到tableView的左侧(所以你必须将tableview放在viewController视图的右边,这意味着你不能使用UITableViewController)。

应该在scrollViewDidScroll,ViewDidLoad和didRotateFromInterfaceOrientation中调用此方法:(如果您支持旋转)

请注意,您必须在左侧创建的空间等于您支持的任何界面方向的标题大小。

-(void)updateHeadersLocation
{
for (int sectionNumber = 0; sectionNumber != [self numberOfSectionsInTableView:self.tableView]; sectionNumber++)
{
    // get the rect of the section from the tableview, and convert it to it's superview's coordinates
    CGRect rect = [self.tableView convertRect:[self.tableView rectForSection:sectionNumber] toView:[self.tableView superview]];

    // get the intersection between the section's rect and the view's rect, this will help in knowing what portion of the section is showing
    CGRect intersection = CGRectIntersection(rect, self.tableView.frame);

    CGRect viewFrame = CGRectZero; // we will start off with zero

    viewFrame.size = [self headerSize]; // let's set the size

    viewFrame.origin.x = [self headerXOrigin];

    /*

     three cases:

     1. the section's origin is still showing -> header view will follow the origin
     2. the section's origin isn't showing but some part of the section still shows -> header view will stick to the top
     3. the part of the section that's showing is not sufficient for the view's height -> will move the header view up

     */

    if (rect.origin.y >= self.tableView.frame.origin.y)
    {
        // case 1
        viewFrame.origin.y = rect.origin.y;
    }
    else
    {
        if (intersection.size.height >= viewFrame.size.height)
        {
            // case 2
            viewFrame.origin.y = self.tableView.frame.origin.y;
        }
        else
        {
            // case 3
            viewFrame.origin.y = self.tableView.frame.origin.y + intersection.size.height - viewFrame.size.height;
        }
    }

    UIView* view = [self.headerViewsDictionary objectForKey:[NSString stringWithFormat:@"%i", sectionNumber]];

    // check if the header view is needed
    if (intersection.size.height == 0)
    {
        // not needed, remove it
        if (view)
        {
            [view removeFromSuperview];
            [self.headerViewsDictionary removeObjectForKey:[NSString stringWithFormat:@"%i", sectionNumber]];
            view = nil;
        }
    }
    else if(!view)
    {
        // needed, but not available, create it and add it as a subview

        view = [self headerViewForSection:sectionNumber];

        if (!self.headerViewsDictionary && view)
            self.headerViewsDictionary = [NSMutableDictionary dictionary];

        if (view)
        {
            [self.headerViewsDictionary setValue:view forKey:[NSString stringWithFormat:@"%i", sectionNumber]];

            [self.view addSubview:view];
        }
    }


    [view setFrame:viewFrame];
}
}

我们还需要声明一个可以保持可见视图的属性:

@property (nonatomic, strong) NSMutableDictionary* headerViewsDictionary;

这些方法返回标题视图的大小和X轴偏移量:

-(CGSize)headerSize
{
return CGSizeMake(44.0f, 44.0f);
}

-(CGFloat)headerXOrigin
{
return 10.0f;
} 

我已经构建了代码,以便删除任何不需要的标题视图,因此我们需要一个可以在需要时返回视图的方法:

-(UIView*)headerViewForSection:(NSInteger)index
{
UIImageView* view = [[UIImageView alloc] init];

if (index % 2)
{
    [view setImage:[UIImage imageNamed:@"call"]];
}
else
{
    [view setImage:[UIImage imageNamed:@"mail"]];
}

return view;
}

这是它的外观:

the section's header is moving out of the screen as it's section does

the section's header is moving with the section's origin

它在lanscape中的外观如何,我使用了约束来在tableView的左边给出了44px

in landscape orientation 希望这有助于:)。