iOS 7 - 如何在表格视图中显示日期选择器？

Question

在WWDC 2013视频中,Apple建议在iOS 7的表格视图中显示选择器.如何在表格视图单元格之间插入和动画视图？

像这样,从Apple日历应用程序:

Answer 1

在iOS7中,Apple发布了示例代码DateCell.

演示表格单元格中日期对象的格式化显示,并使用UIDatePicker编辑这些值.作为此表的委托,该示例使用方法"didSelectRowAtIndexPath"打开UIDatePicker控件.

对于iOS 6.x及更早版本,UIViewAnimation用于在屏幕上向下滑动UIDatePicker.对于iOS 7.x,UIDatePicker以内联方式添加到表视图中.

UIDatePicker的action方法将直接设置自定义表格单元格的NSDate属性.此外,此示例演示如何使用NSDateFormatter类来实现自定义单元格的日期格式外观.

您可以在此处下载示例代码:DateCell.

Answer 2

您可以使用下面我以前给出的答案或雨燕使用这个新类我做了,使这个任务很多简单和清晰:https://github.com/AaronBratcher/TableViewHelper

我发现Apple提供的代码在几个方面存在问题:

• 您不能拥有静态tableView,因为它们使用tableView:cellForRowAtIndexPath方法
• 如果您在最后一个日期选择器单元格下面没有其他行,则代码会崩溃

对于静态单元格表​​,我在日期显示单元格下面定义了日期选择器单元格,并有一个标识我是否正在编辑它的标记.如果我是,我返回适当的单元格高度,否则我返回单元格高度为零.

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
    if (indexPath.section == 0 && indexPath.row == 2) { // this is my picker cell
        if (editingStartTime) {
            return 219;
        } else {
            return 0;
        }
    } else {
        return self.tableView.rowHeight;
    }
}

单击显示日期的行时,我更改标志并执行更新动画以显示选择器.

-(void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {
    if (indexPath.section == 0 && indexPath.row == 1) { // this is my date cell above the picker cell
        editingStartTime = !editingStartTime;
        [UIView animateWithDuration:.4 animations:^{
            [self.tableView reloadRowsAtIndexPaths:@[[NSIndexPath indexPathForRow:2 inSection:0]] withRowAnimation:UITableViewRowAnimationFade];
            [self.tableView reloadData];
        }];
    }
}

如果我在同一个表中有多个日期/时间选择器,我会在点击时相应地设置标志并重新加载相应的行.我发现我可以保留我的静态表,使用更少的代码,并且更容易理解发生了什么.

Answer 3

使用storyboard和静态表我可以使用以下代码实现相同的结果.这是一个很好的解决方案,因为如果你有许多形状奇特的单元格或想要有多个动态显示/隐藏的单元格,这些代码仍然可以工作.

@interface StaticTableViewController: UITableViewController

@property (weak, nonatomic) IBOutlet UITableViewCell *dateTitleCell; // cell that will open the date picker. This is linked from the story board
@property (nonatomic, assign, getter = isDateOpen) BOOL dateOpen;

@end


@implementation StaticTableViewController

-(CGFloat) tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath{

    // This is the index path of the date picker cell in the static table
    if (indexPath.section == 1 && indexPath.row == 1 && !self.isDateOpen){
        return 0;
    }
    return [super tableView:tableView heightForRowAtIndexPath:indexPath];
}

-(void) tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath{
    UITableViewCell* cell = [tableView cellForRowAtIndexPath:indexPath];
    [tableView beginUpdates];
    if (cell == self.dateTitleCell){
        self.dateOpen = !self.isDateOpen;
    }
    [tableView reloadData];
    [self.tableView endUpdates];
}

Answer 4

我从Apple获取了DateCell源代码,并删除了storyboard文件.

如果你想要一个没有故事板,请看看:https: //github.com/ajaygautam/DateCellWithoutStoryboard

Answer 5

关于这一点的最好的教程之一是iOS 7在线UIDatePicker - 第2部分.基本上我在这里使用静态表视图单元格并实现一些其他方法.我用Xamarin和C#:

你必须活跃Clip Subviews.

设置高度:

public override float GetHeightForRow (UITableView tableView, NSIndexPath indexPath)
{
    if (indexPath.Row == 4) {
        return (datePickerIsShowing) ? 206f : 0.0f;
    }

    return base.GetHeightForRow(tableView,indexPath);
}

比一个类变量: private bool datePickerIsShowing = false;

显示日期选择器:

private void showDatePickerCell(){
    datePickerIsShowing = true;
    this.TableView.BeginUpdates ();
    this.TableView.EndUpdates ();
    this.datePicker.Hidden = false;
    this.datePicker.Alpha = 0.0f;

    UIView.Animate (0.25, animation:
        () => {
            this.datePicker.Alpha = 1.0f;
        }
    );
} 

隐藏日期选择器:

private void hideDatePickerCell(){
    datePickerIsShowing = false;
    this.TableView.BeginUpdates ();
    this.TableView.EndUpdates ();

    UIView.Animate (0.25,
        animation: () => {
            this.datePicker.Alpha = 0.0f;
        },
        completion: () => {
            this.datePicker.Hidden = true;
        }
    );
} 

并调用此函数:

public override void RowSelected (UITableView tableView, NSIndexPath indexPath)
{
    if (indexPath.Row == 3) {
        if (datePickerIsShowing) {
            hideDatePickerCell ();
        } else {
            showDatePickerCell ();
        }
    }

    this.TableView.DeselectRow (indexPath, true);
}