如何为 iPhone SDK 应用程序实现手风琴视图? [英] How to implement an accordion view for an iPhone SDK app?

问题描述

有没有人见过 iPhone 的手风琴"(也许称为动画大纲")视图的实现?我找到了 Cocoa 的示例项目，但在尝试移植之前，我希望有人已经发明了轮子.

Has anyone seen an implementation of an "accordion" (maybe called "animated outline") view for the iPhone? I found an example project for Cocoa, but before trying a port, I was hoping that someone has invented the wheel already.

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

To make it clear, in a UIView, consider a stack of sections, each containing a header, and then some contents. When the user touches the header (or through some message/event), if the section is already open => close it; if the section is closed => open it and close any other open section. An example in jQuery looks like: http://docs.jquery.com/UI/Accordion

就我而言，我希望能够在每个部分中放置任何 UIView 内容.

In my case, I'd want to be able to put any UIView contents in each section.

我只是想看看一些已经实现了这一点的真实应用程序 - 只是为了知道这是可能的！

I'd be interested in just seeing some real apps who have implemented this - just to know it's possible!

推荐答案

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

I would just use a UITableView, make each cell's height depend on whether or not it's "open" and then go from there. It's easy to resize the rows and you could just make the total height for the combined cells be the available height in the UITableView so that it looks like an accordion more than just a table.

这是一个应该有效的快速技巧，但在您的 UITableViewController 子类的 .h 文件中:

This is a quick hack that should work, but in your UITableViewController subclass's .h file:

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

在 .m 文件中放置如下内容:

And in the .m file put something like:

- (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.您可以更改所有这些数字并找出这些部分并执行其他任何操作愿意.

This will basically take 4 rows and turn them into collapsable sections where selecting one row will expand it to 240 pixels and collapse all other rows to 40. You can change all of those numbers and figure out the sections and do whatever else you'd like with it.

我已经试过了，它有效.然后，您可以通过将其他内容添加到您的单元格创建代码来完成它，以将您想要的任何内容添加到一个部分(如果您愿意，可能包括滚动 UITextView).

I've tried this out and it works. You can then complete it by adding the other content to your cell creation code to add whatever you'd like to a section (including possibly a scrolling UITextView if you'd like).

这篇关于如何为 iPhone SDK 应用程序实现手风琴视图?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！