Как я могу настроить UITableViewCell как Twitter?

Question

Я обнаружил, что граница iPad UITableViewCell на twitter.app имеет двухпиксельную линию, выглядит красиво и профессионально, как я могу это сделать?Спасибо!

Answer 1

Наконец-то я привык использовать код UITableViewCell, и я думаю, что он выглядит хорошо. :)

Файл MenuViewController.m:

- (id)initWithFrame:(CGRect)frame {
    if (self = [super init]) {
        [self.view setFrame:frame]; 

        _tableView = [[UITableView alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height) style:UITableViewStylePlain];
        [_tableView setDelegate:self];
        [_tableView setDataSource:self];
        [_tableView setBackgroundColor:[UIColor clearColor]];
        [_tableView setSeparatorStyle:UITableViewCellSeparatorStyleNone];

        UIView* footerView =  [[UIView alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, 1)];
        [_tableView setTableFooterView:footerView];
        [footerView release];        

        [self.view addSubview:_tableView];
    }
    return self;
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    static NSString *CellIdentifier = @"Cell";

    DoubleSeparatorCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
    if (cell == nil) {
        cell = [[[DoubleSeparatorCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier] autorelease];
        [cell setSelectionStyle:UITableViewCellSelectionStyleNone];
    }

    NSString *text;
    UIColor *upperLineColor,*lowerLineColor,*viewColor;

    upperLineColor = RGBA(255, 255, 255, 30);
    lowerLineColor = RGBA(0, 0, 0, 50);
    viewColor = RGBA(0,0,0,5);

    if ([indexPath row] == 0) {
        text = NSLocalizedString(@"...", nil);
    } else if ([indexPath row] == 1) {
        text = NSLocalizedString(@"...", nil);
    } else if ([indexPath row] == 2) {
        text = NSLocalizedString(@"...", nil);
    } else {
        text = NSLocalizedString(@"...", nil);
    }
    [cell.textLabel setText:text];
    [cell.textLabel setTextColor:RGBA(170, 170, 170, 100)];
    [cell.textLabel setShadowColor:[UIColor blackColor]];
    [cell.textLabel setShadowOffset:CGSizeMake(1, 1)];

    [cell.upperLine setBackgroundColor:upperLineColor];
    [cell.lowerLine setBackgroundColor:lowerLineColor];
    [cell.contentView setBackgroundColor:viewColor];

    return cell;
}

DoubleSeparatorCell.h

@interface DoubleSeparatorCell : UITableViewCell {
    UIView *upperLine;
    UIView *lowerLine;
}
@property (nonatomic ,retain) UIView *upperLine;
@property (nonatomic ,retain) UIView *lowerLine;
@end

DoubleSeparatorCell.m

- (id)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier
{
    self = [super initWithStyle:style reuseIdentifier:reuseIdentifier];
    if (self) {
        self.upperLine = [[UIView alloc] init];
        self.lowerLine = [[UIView alloc] init];
        [self.contentView addSubview:self.upperLine];
        [self.contentView addSubview:self.lowerLine];
    }
    return self;
}

- (void)layoutSubviews {
    [super layoutSubviews];
    [self.upperLine setFrame:CGRectMake(0, 0, self.contentView.frame.size.width, 1)];
    [self.lowerLine setFrame:CGRectMake(0, self.contentView.frame.size.height - 1, self.frame.size.width, 1)];
}

Answer 2

Поскольку UITableViewCell наследуется от UIView, ячейка имеет представление содержимого.Вы можете добавить свои собственные подпредставления (метки и текстовые поля) к этому contentView и расположить их программно или с помощью Interface Builder.

Существует множество онлайн-учебников о том, как этого добиться.Просто поищите в Google «учебник по созданию интерфейса uitableviewcell».

Ознакомьтесь с этим довольно хорошим учебником Custom UITableViewCell Using Interface Builder.

Answer 3

Я хотел бы отметить, что у этих ячеек, которые вы видите на скриншоте, светло-серая верхняя граница 1 точка и темно-серая нижняя граница 1 точка (или, возможно, это пиксели - извините, мои глаза не так хороши: )).

Так что это может быть что-то вроде взлома (давай, дикари, люди), но ты мог бы:

1. Создать UILabel topBorder с фреймом CGRect (0,0, cell.contentView.frame.size, width, 1)
2. Создание UILabel bottomBorder с фреймом CGRect (0, cell.contentView.frame.size.height - 1, cell.contentView.frame.size.width, 1)
3. Установить цвет topBorder на UIColor lightGrayColor (или настроить для точных цветов)
4. Установить цвет нижнего края на UIColor darkGrayColor (то же самое)
5. Добавление обоих подвидов в cell.contentView

Обратите внимание, что вам не нужно создавать подкласс UITableCellView - просто добавьте эти шаги в tableView: cellForRowAtIndexPath: метод, и они появятся.

Наслаждайтесь

Дэмиен

Answer 4

Срикар уже показал вам правильный путь. Кстати, я просто хочу добавить следующее:

Вы можете программно разрезать ячейку, что можно сделать, унаследовав собственный класс UITableViewCell. Затем создайте экземпляр класса ячейки табличного представления и добавьте его в UITableView. Теперь клетка твоя.

Happy Coding , Arun

Answer 5

Переопределить метод drawRect и рисовать линии по мере необходимости.

- (void)drawRect:(CGRect)rect
{
      CGRect bounds = [self bounds];
      CGContextRef context      = UIGraphicsGetCurrentContext();    
      CGContextSetLineWidth(context, 1.0);
      CGContextSetStrokeColorWithColor(context, [topColor CGColor]);
      // border top
      CGContextMoveToPoint(context, bounds.origin.x, bounds.origin.y);
      CGContextAddLineToPoint(context, bounds.origin.x+bounds.size.width, bounds.origin.y);
      CGContextStrokePath(context); 
      // border bottom
      CGContextSetLineWidth(context, 1.0);
      CGContextSetStrokeColorWithColor(context, [lowerColor CGColor]);

      CGContextMoveToPoint(context, bounds.origin.x, bounds.origin.y+1);
      CGContextAddLineToPoint(context, bounds.origin.x+bounds.size.width, bounds.origin.y+1);

      CGContextStrokePath(context); 
}