内联 UIPicker 实现 [英] Inline UIPicker Implementation

问题描述

我正在尝试在表格视图单元格内实现一个内联 UIPicker，类似于 this 和 this SO 问题.我相信我的实现已经很接近了，但目前，当我选择适当的单元格时，不会显示选择器.关于我做错了什么，有人能指出我正确的方向吗?谢谢！

I'm attempting to implement an inline UIPicker inside a table-view cell, similar to both this and this SO question. I believe I'm close in my implementation, but at the moment, no picker is displayed when I select the appropriate cell. Can anyone point me in the right direction in regards to what I'm doing wrong? Thank you!

下面是我确定每个部分中出现哪些行的位置:

Below is where I determine what rows occur in each section:

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    switch (indexPath.section) {
        case NotificationsSection:
            return [self tableView:tableView cellForAreaOneRowAtIndexPath:indexPath];
            break;
        case RedZoneSection:
            return [self tableView:tableView cellForAreaTwoRowAtIndexPath:indexPath];
            break;
        case TimeOfDaySection:
            return [self tableView:tableView cellForAreaThreeRowAtIndexPath:indexPath];
            break;
        default:
            return nil;
            break;
    }
}

下面是我检查每个部分中的行数的地方.我怀疑我的问题可能出在这里，但我不完全确定.

Below is where I check the number of rows in each section. I suspect my problem may lie here, but I am not completely sure.

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
    switch (section) {
        case AreaOneSection:
            return AreaOneRows;
            break;
        case AreaTwoSection:
            return TotalAreaTwoRows;
            break;
        case AreaThreeSection:
            return TotalAreaThreeRows;
            break;
        default:
            return 0;
            break;
    }
}

下面是我返回每一行的高度:

Below is where I return the height for each row:

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
    CGFloat rowHeight = self.tableView.rowHeight;
    //    if (indexPath.section == TimeOfDaySection && indexPath.row == HourTimeZoneRow  && self.timePickerIsShowing == NO){
    return rowHeight;
}

最后，下面是我检查用户是否选择了我想在下面插入 UIPicker 单元格的索引路径的地方.如果他们这样做了，那么我会调用一个方法来显示选择器.

Finally, below is where I check if the user selected the index path that I want to insert the UIPicker cell below. If they did, then I call a method to show the the picker.

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
{
    [self.tableView deselectRowAtIndexPath:indexPath animated:YES];

    if (indexPath.section == SectionThree && indexPath.row == RowOne  && self.timePickerIsShowing == NO){

        [tableView beginUpdates];
        [self showTimePicker];
        [tableView endUpdates];
    } else{
        [self hideTimePicker];
        [self.tableView deselectRowAtIndexPath:indexPath animated:YES];
    }
}

最后，下面是我显示和隐藏 UIPicker 的地方.

Finally, below is where I show and hide the UIPicker.

- (void)showTimePicker
{
    self.timePickerIsShowing = YES;
    self.timePicker.hidden = NO;
    //build the index path to where the picker should be inserted here
    NSIndexPath *indexPath = [NSIndexPath indexPathForRow:HourTimeZoneRow + 1 inSection:TimeOfDaySection];

    static NSString *CellIdentifier = @"TimePickerCell";
    UITableViewCell *cell = (UITableViewCell*)[self.tableView  dequeueReusableCellWithIdentifier:CellIdentifier];
    if (!cell) {
        cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier];
    }
    _timePicker = [[UIPickerView alloc] initWithFrame:CGRectMake(0, 0, self.tableView.bounds.size.width, 160)];
    [cell.contentView addSubview:self.timePicker];

    [self.tableView insertRowsAtIndexPaths:@[indexPath] withRowAnimation:UITableViewRowAnimationFade];
    [self.tableView reloadData];
    self.timePicker.alpha = 0.0f;
    [UIView animateWithDuration:0.25 animations:^{
        self.timePicker.alpha = 1.0f;
    }];
}

- (void)hideTimePicker {
    self.timePickerIsShowing = NO;
    self.timePicker.hidden = YES;
    [self.tableView reloadData];
    [UIView animateWithDuration:0.25
                     animations:^{
                         self.timePicker.alpha = 0.0f;
                     }
                     completion:^(BOOL finished){
                         self.timePicker.hidden = YES;
                     }];
}

推荐答案

在你的 showPicker 函数中，你似乎什么都没做?您创建一个单元格，用它做一些事情，然后在该功能结束时它就会消失.从我能看到的任何地方都没有添加单元格?

In your showPicker function, you don't seem to do anything? You create a cell, do things with it then it dies when that function ends. The cell is not added anywhere from what I can see?

您需要在 cellForRowAtIndexPath 中添加选择器，对于您知道需要选择器的索引路径.

You need to add the picker inside cellForRowAtIndexPath, for the index path you know needs a picker.

我所做的需要很少的编码.我在包含选择器视图的界面构建器中创建了一个原型单元.就我而言，我还在选择器上方添加了一个工具栏，我可以在其中放置按钮以允许取消和完成.添加合适的属性以传递当前值以供选择器最初显示.添加一个委托，用于通知创建者(您的 tableView)选择器值的更改.您可以等待它完成拾取，或者通过在每次值更改时重新加载正在编辑的单元格来使用它来更新单元格的编辑值.我更喜欢选择器可以选择一个值，你可以提交或取消它.

What I do requires very little coding. I create a prototype cell in interface builder which contains a picker view. In my case I also add a toolbar above the picker which I can put buttons in to allow Cancel and Done. Add suitable properties to pass in the current values for the picker to show initially. Add a delegate to use to inform the creator (your tableView) of changes in picker values. You can wait for it to finish picking, or use it to update live the cell its editing values for by reloading the cell being edited every time the value changes. I prefer that the picker can pick a value and you can commit it or cancel it.

当一个单元格需要编辑时，我更新我的数据模型以插入一个编辑条目，然后调用[tableView reload].在我的例子中，选择一个单元格开始编辑，点击取消/完成结束编辑.

When a cell needs edited, I update my data model to insert an editing entry then call [tableView reload]. In my case selecting a cell starts editing, clicking cancel/done ends editing.

此时表格视图将开始询问单元格.这次其中之一将是您的新选择器单元格，它将用于编辑它下面的单元格.创建它时，您将要编辑的数据的数据模型引用传递给它.

The table view at this point will start asking for cells. This time one of those will be your new picker cell, which will be for editing the cell it is below. When you create it you pass it the data model reference for the data it is to edit.

因此，您可以通过简单地添加一个新的原型单元格类型并在需要时在 cellForRowAtIndexPath 中创建它来实现这一切.

So you can achieve all this by simply adding a new prototype cell type and creating it inside cellForRowAtIndexPath when required.

您可以选择如何移除选取器.在我的情况下，我有取消/完成按钮，它只是从数据模型中删除条目并再次重新加载表，导致它永远不会被创建.您也可以将模式设置为单击单元格进行添加，然后再次单击进行删除.同样，您只需更新数据模型并重新加载.了解时间选择器如何在 Calander 应用上工作以进行新约会.

You have a choice as to how to remove the picker. In my case I have Cancel/Done buttons which just removes the entry from the data model and reloads the table again, resulting in it never being created. You could also make the mode as being click on a cell to add and click again to remove. Again you just update the data model and reload. See how the time picker works on the Calander app for a new appointment.

您可能认为这是大量的重装.然而，它只影响屏幕上的内容，我发现它比一直试图找出受影响的单元格更容易.它也非常流畅.当它工作时，您可以随时优化代码.

You may be thinking this is a lot of reloads. However it only affects what is on screen and I found it to be easier than trying to figure out the affected cells all the time. Its also very smooth. When it is working you can always optimize the code.

在单元格中使用约束以确保它具有您想要的布局.

Use constraints in the cell to make sure it has the layout you want.

这篇关于内联 UIPicker 实现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！