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

问题描述

有没有人看过iPhone的手风琴（也许叫做动画大纲）视图的实现？我找到了一个Cocoa的示例项目，但在尝试端口之前，我希望有人已经发明了这个轮子。

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

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

我有兴趣看到一些已实现此功能的真实应用 - 只是为了知道它是可能的！

解决方案

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

这是一个应该有效的快速入侵，但在你的UITableViewController子类的.h文件中：

  bool sectionopen [4] ; ///或其他一些存储扩展/关闭状态的方式
  

并在.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]）{
返回240; ///它打开
}否则{
返回45; ///它已关闭
} 
 
} 
 
  - （UITableViewCell *）tableView：（UITableView *）tableView cellForRowAtIndexPath：（NSIndexPath *）indexPath {
 UITableViewCell * mycell = [[[UITableViewCell alloc] init] autorelease]; 
 mycell.textLabel.text = @Section Name; 
返回mycell; 
} 
 
 
  - （void）tableView：（UITableView *）tableView didSelectRowAtIndexPath：（NSIndexPath *）indexPath {
 ///全部关闭
 sectionopen [0] = NO; 
 sectionopen [1] = NO; 
 sectionopen [2] = NO; 
 sectionopen [3] = NO; 
 
 ///打开这个
 sectionopen [indexPath.row] = YES; 
 
 ///为开头设置动画并展开行
 [self.tableView reloadSections：[NSIndexSet indexSetWithIndex：0] withRowAnimation：UITableViewRowAnimationFade]; 
} 
  

这基本上需要4行并将它们变成可折叠的部分，其中选择一行将它扩展为240像素，并将所有其他行折叠为40.您可以更改所有这些数字并找出各个部分，并使用它做任何其他想做的事情。

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

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.

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

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!

解决方案

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.

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

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];
}

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.

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屋！