iPhone:Howto构建一个类似于联系人地址单元的自定义表格视图单元格

问题描述:

这可能已经被讨论过了,但我找不到问题。iPhone:Howto构建一个类似于联系人地址单元的自定义表格视图单元格

我需要在表格视图中显示/编辑地址。查看iPhone通讯录应用程序中的地址单元格,看起来他们使用单个单元格来显示和编辑地址。

我首先想到它是通过使用4个自定义单元格来编辑地址,但我看不到地址类型字段如何跨越4行,另外,当选中时,它选择了所有4行。这让我认为它是通过一个单独的表格视图单元完成的,该单元具有UItextField的自定义排列。

目前我正在走这条道路。现在我坚持的事情是处理单元之间的灰线。我原本打开了UItextField边框,但那看起来不太好。所以我正在考虑做自定义绘图。但是,这似乎并没有在细胞之上。

有没有人有任何想法苹果如何构建这个地址单元?

谢谢

我已经有了一些工作,但我不知道如果它的内置。我基本上创建了一个UIView,它为地址的各个字段保存UITextFields。我为它构建了一个自定义控制器,它管理数据并在字段之间绘制灰色的线条,就像联系人中的灰色线条一样。

然后我将这个自定义UIView添加到UITableView单元格。我的理解是,这是推荐的方式,因为drawRect中的任何绘图都保留在UITableViewCell的边界内。我在UITableView单元类中使用drawRect的实验在UITableView的背景上绘制了线条,而不是单元格。

这基本上有效,但有一件事我不喜欢。为了让灰线延伸到UITableViewCell的边界,我必须确保放置在它中的UIView尺寸完全相同,以便在drawRect中完成的任何绘图可以向右延伸到UITableViewCell的边缘。

但是,如果我使用不透明的背景,我会松开单元的漂亮圆角,因为它会在顶部绘制。所以我不得不使用透明背景。我的理解是,出于性能原因建议使用不透明背景,所以我不确定是否真的能够正确构建此控件。幸运的是屏幕上不会再有2或3个。

如果您希望在表格视图中的每个单元格之间有一条线,那么请使用样式'分组' - 请参阅界面构建器中的属性检查器中的表格视图选项卡。每个小组的成员之间会有连线。

您是否考虑使用UITableViewCells而不是以编程方式添加UIViews?您可以轻松地将标签和文本字段+垂直线添加到这样的XIB。这个作品真的很好,我用下面的代码:

@protocol PersonDetailCellViewControllerDelegate 

-(void)didUpdateTextField:(int)index withText:(NSString*)text; 

@end 


@interface PersonDetailCellViewController : UITableViewCell <UITextFieldDelegate> { 

    IBOutlet UILabel* keyLabel; 
    IBOutlet UITextField* valueTextField; 

    int index; 
    id<PersonDetailCellViewControllerDelegate> delegate; 

} 

@property (nonatomic, retain) IBOutlet UILabel* keyLabel; 
@property (nonatomic, retain) IBOutlet UITextField* valueTextField; 
@property (nonatomic, retain) id<PersonDetailCellViewControllerDelegate> delegate; 
@property (nonatomic, assign) int index; 

@end 

@implementation PersonDetailCellViewController 

@synthesize keyLabel, valueTextField, delegate, index; 

- (BOOL)textField:(UITextField *)textField shouldChangeCharactersInRange:(NSRange)range replacementString:(NSString *)string { 
if(delegate) { 
    [delegate didUpdateTextField:index withText:[textField.text stringByReplacingCharactersInRange:range withString:string]]; 
} 
return YES; 
} 

- (BOOL)textFieldShouldClear:(UITextField *)textField { 
    return YES; 
} 
- (BOOL)textFieldShouldReturn:(UITextField *)textField { 
    return YES; 
} 

@end 

与相应的UITableView方法

// Customize the appearance of table view cells. 
- (UITableViewCell *)tableView:(UITableView *)aTableView cellForRowAtIndexPath:(NSIndexPath *)indexPath { 

    PersonDetailCellViewController *cell = (PersonDetailCellViewController*)[aTableView dequeueReusableCellWithIdentifier:CELL_KEY_VALUE_ID]; 

    if(cell == nil) { 
     NSArray* topLevelObjects = [[NSBundle mainBundle]loadNibNamed:@"PersonDetailCellView" owner:nil options:nil]; 

     for(id currentObject in topLevelObjects) { 
      if([currentObject isKindOfClass:[UITableViewCell class]]) { 
       cell = (PersonDetailCellViewController*)currentObject; 

       cell.valueTextField.backgroundColor = [UIColor clearColor]; 
       cell.valueTextField.borderStyle = UITextBorderStyleNone; 
       cell.selectionStyle = UITableViewCellSelectionStyleGray; 

       if([Language sharedLanguage].rightToLeft) { 
        // set the alignment right because we are flipping the whole available text field, not just the area which actually has text 
        cell.keyLabel.textAlignment = UITextAlignmentRight; 
        cell.valueTextField.textAlignment = UITextAlignmentLeft; 

        // flip cell contents 
        cell.contentView.layer.transform = CATransform3DMakeRotation(M_PI, 0.0f, 1.0f, 0.0f); 
        // flip text back so that readable 
        cell.keyLabel.layer.transform = CATransform3DMakeRotation(M_PI, 0.0f, 1.0f, 0.0f); 
        cell.valueTextField.layer.transform = CATransform3DMakeRotation(M_PI, 0.0f, 1.0f, 0.0f); 
       } 

       cell.selectionStyle = UITableViewCellSelectionStyleGray; 

       break; 
      } 
     } 
    } 

    cell.keyLabel.text = [keys objectAtIndex:indexPath.section]; 
    cell.valueTextField.placeholder = [hints objectAtIndex:indexPath.section]; 
    cell.valueTextField.delegate = cell; 

    if(indexPath.section == 0) { 
     cell.valueTextField.text = self.name; 
    } else if(indexPath.section == 1) { 
     cell.valueTextField.text = self.mobile; 
    } else if(indexPath.section == 2) { 
     cell.valueTextField.text = self.home; 
    } 

    if(indexPath.section == 1) { 
     cell.valueTextField.keyboardType = UIKeyboardTypePhonePad; 
    } else { 
     cell.valueTextField.keyboardType = UIKeyboardTypeDefault; 
    } 

    // open keyboard 
    if(indexPath.section == 0) { 
     [cell.valueTextField becomeFirstResponder]; 
    } else { 
     [cell.valueTextField resignFirstResponder]; 
    } 

    cell.delegate = self; 
    cell.index = indexPath.section; 

    return cell; 
} 

最好的问候,托马斯。

+0

THanks Thomas。我已经使用分组单元格。我试图模拟地址单元在联系人中的工作方式。使用联系地址表示正在使用单个单元。 Plus - 与联系人地址编辑一样 - 我在每行上使用多个字段。 – drekka 2011-01-25 13:21:18

方法如下:

  • 使用UITableViewCellStyleValue2风格为你的
  • 设置的cell.detailsTextLabelnumberOfLines属性中的号码选择
  • 的落实-(CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath方法并返回使用该计算的高度公式:44.0f + (numberOfLines - 1) * 19.0f

我在某处读到了这个I互联网,但不记得来源。今天刚刚尝试过,它完美无瑕。

+0

谢谢你。当我格式化地址的只读显示时,这将非常有用。这是编辑模式显示给我的问题:-) – drekka 2011-01-25 13:24:51