如何实现iPhone SDK应用程序的手风琴视图？

Question

有没有人看到iPhone的"手风琴"(也许称为"动画轮廓")视图的实现？我找到了一个Cocoa的示例项目,但在尝试端口之前,我希望有人已经发明了这个轮子.

为了清楚起见,在UIView中,考虑一堆部分,每个部分包含一个标题,然后是一些内容.当用户触摸标题(或通过某些消息/事件)时,如果该部分已经打开=>关闭它; 如果该部分已关闭=>打开它并关闭任何其他开放部分.jQuery中的一个示例如下:http: //docs.jquery.com/UI/Accordion

在我的情况下,我希望能够在每个部分中放置任何UIView内容.

我有兴趣看到一些真正的应用程序实现了这一点 - 只是为了知道它是可能的!

Answer 1

我只想使用UITableView,让每个单元格的高度取决于它是否"打开"然后从那里开始.调整行的大小很容易,你可以让组合单元格的总高度为UITableView中的可用高度,这样它就像手风琴而不仅仅是一张桌子.

这是一个应该可行的快速入侵,但是在你的UITableViewController子类的.h文件中:

bool sectionopen[4]; ///or some other way of storing the sections expanded/closed state

并在.m文件中添加如下内容:

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {
    return 1;
}

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
    return 4;
}

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath  {
    if (sectionopen[indexPath.row]) {
        return 240;///it's open
    } else {
        return 45;///it's closed
    }

}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    UITableViewCell *mycell = [[[UITableViewCell alloc] init] autorelease];
    mycell.textLabel.text= @"Section Name";
    return mycell;
}


- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {
    ///turn them all off
    sectionopen[0]=NO;
    sectionopen[1]=NO;
    sectionopen[2]=NO;
    sectionopen[3]=NO;

    ///open this one
    sectionopen[indexPath.row]=YES;

    ///animate the opening and expand the row
    [self.tableView reloadSections:[NSIndexSet indexSetWithIndex:0] withRowAnimation:UITableViewRowAnimationFade];
}

这将基本上需要4行并将它们转换为可折叠部分,其中选择一行将其扩展为240像素并将所有其他行折叠为40.您可以更改所有这些数字并找出部分并执行您喜欢的任何其他内容用它.

我已经尝试过这个并且它有效.然后,您可以通过将其他内容添加到单元格创建代码来完成它,以便将您想要的任何内容添加到某个部分(如果您愿意,还可以添加滚动的UITextView).

Answer 2

我找到的每个解决方案都使用UITableView,这对我不起作用,因为我没有显示表格数据.这就是我创建AccordionView控件的原因.用法非常简单:

AccordionView *accordion = [[AccordionView alloc] initWithFrame:CGRectMake(0, 0, 320, 420)];
[self addSubview:accordion];

// Only height is taken into account, so other parameters are just dummy
UIButton *header1 = [[UIButton alloc] initWithFrame:CGRectMake(0, 0, 0, 30)];
[header1.titleLabel setText:@"First row"];

UIView *view1 = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 0, 200)];
// ... add subviews to view1

[accordion addHeader:header1 withView:view1];

// ... add more panels

[accordion setSelectedIndex:0];

在现实生活中它看起来像这样:

黑条是标题,您可以随意自定义它们(我使用的是Three20).