Jak utworzyć tabelę interfejsu użytkownika z wieloma kolumnami w Xcode?

Question

Pracuję nad aplikacją iOS 8 z Xcode. Potrzebuję wyświetlić tabelę z wieloma kolumnami i wierszami danych w jednym widoku.

Przykład:

Name    Time In  Time Out  ETA 
Johnnys Supplies 8:30AM  9:00AM  10:15AM 
Franks Company  8:45AM  9:05AM  9:45AM 
Another Inc.  10:12AM  11:00AM  12:04PM 

Wszystkie dane będą odczytywane z JSON/PHP.

Potrzebuję go do pracy jak tableview, gdzie użytkownik może przewijać w pionie, i wybierz indeks. Po wybraniu tego indeksu użytkownik może kliknąć przycisk, aby uruchomić dodatkowe zapytania na podstawie danych w wybranej komórce (itp.).

Jaki jest najłatwiejszy sposób wdrożenia? Musi być sposób w jaki xcode pozwala to zrobić natywnie? Czy czegoś brakuje?

Wszystkie przykłady kodowania przyjęto z zadowoleniem!

znalazłem dwie opcje, ale oba wymagają opłat licencyjnych:

http://www.ioscomponents.com/Home/IOSDataGrid < - $ 400

http://www.binpress.com/app/ios-data-grid-table-view/586 < - $ 130

ktoś zna tych składników?

Answer 1

Widoki tabel systemu iOS są zawsze pojedynczą kolumną. W systemie Mac OS możesz bezpośrednio tworzyć to, co chcesz.

Powiedziawszy to, można utworzyć niestandardowe komórki widoku tabeli, które wyświetlają żądaną treść. W rzeczywistości byłoby to dość łatwe. Wszystko, co można zrobić, to podklasować UITableViewCell i zdefiniować widoki (prawdopodobnie UILabels) dla każdej kolumny, a następnie połączyć je jako właściwości wyjściowe w komórce. Następnie ustaw widok tabeli, aby zarejestrować tę komórkę dla identyfikatora komórki, którego używasz.

Następnie należy wpisać metodę cellForRowAtIndexPath, aby zainstalować dane w różnych właściwościach gniazd.

Można również użyć UICollectionView, ale wygląda na to, że widok tabeli z niestandardowymi komórkami lepiej pasuje do tej aplikacji.

Answer 2

Jaka jest różnica między dwiema kolumnami i dwiema etykietami obok siebie? Dzielnik?

Jest to multi widok tabeli kolumna?

Ponieważ jest to widok stołowy ze zwykłymi UITableViewCell, które mają 3 UILabels i 2 UIViews. Widoki udają dzielniki o szerokości 1 px.

Kod powinien być zrozumiały.

.h

@interface MultiColumnTableViewCell : UITableViewCell 
@property (strong, nonatomic) UILabel *label1; 
@property (strong, nonatomic) UILabel *label2; 
@property (strong, nonatomic) UILabel *label3; 
@end 

.m

@interface MultiColumnTableViewCell() 
@property (strong, nonatomic) UIView *divider1; 
@property (strong, nonatomic) UIView *divider2; 
@end 

@implementation MultiColumnTableViewCell 

- (UILabel *)label { 
    UILabel *label = [[UILabel alloc] init]; 
    label.translatesAutoresizingMaskIntoConstraints = NO; 
    [self.contentView addSubview:label]; 
    return label; 
} 

- (UIView *)divider { 
    UIView *view = [[UIView alloc] init]; 
    view.translatesAutoresizingMaskIntoConstraints = NO; 
    [view addConstraint:[NSLayoutConstraint constraintWithItem:view attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:1 constant:1.0/[[UIScreen mainScreen] scale]]]; 
    view.backgroundColor = [UIColor lightGrayColor]; 
    [self.contentView addSubview:view]; 
    return view; 
} 

- (instancetype)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier { 
    self = [super initWithStyle:style reuseIdentifier:reuseIdentifier]; 
    self.separatorInset = UIEdgeInsetsZero; 
    self.layoutMargins = UIEdgeInsetsZero; 
    self.preservesSuperviewLayoutMargins = NO; 

    self.divider1 = [self divider]; 
    self.divider2 = [self divider]; 

    self.label1 = [self label]; 
    self.label2 = [self label]; 
    self.label3 = [self label]; 

    NSDictionary *views = NSDictionaryOfVariableBindings(_label1, _label2, _label3, _divider1, _divider2); 

    NSArray *constraints = [NSLayoutConstraint constraintsWithVisualFormat:@"H:|-5-[_label1]-2-[_divider1]-2-[_label2(==_label1)]-2-[_divider2]-2-[_label3(==_label1)]-5-|" options:NSLayoutFormatAlignAllCenterY metrics:nil views:views]; 
    [self.contentView addConstraints:constraints]; 

    NSArray *horizontalConstraints1 = [NSLayoutConstraint constraintsWithVisualFormat:@"V:|[_divider1]|" options:0 metrics:nil views:views]; 
    [self.contentView addConstraints:horizontalConstraints1]; 
    NSArray *horizontalConstraints2 = [NSLayoutConstraint constraintsWithVisualFormat:@"V:|[_divider2]|" options:0 metrics:nil views:views]; 
    [self.contentView addConstraints:horizontalConstraints2]; 

    return self; 
} 

@end 

TableViewController:

@implementation MasterViewController 

- (void)viewDidLoad { 
    [super viewDidLoad]; 
    [self.tableView registerClass:[MultiColumnTableViewCell class] forCellReuseIdentifier:@"Cell"]; 
    self.tableView.separatorColor = [UIColor lightGrayColor]; 
} 

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section { 
    return 10; 
} 

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath { 
    MultiColumnTableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"Cell" forIndexPath:indexPath]; 
    cell.label1.text = [NSString stringWithFormat:@"Name %ld", (long)indexPath.row]; 
    cell.label2.text = [NSString stringWithFormat:@"Start %ld", (long)indexPath.row]; 
    cell.label3.text = [NSString stringWithFormat:@"End %ld", (long)indexPath.row]; 
    return cell; 
} 

@end 

Answer 3

Zastosowanie UICollectionView sprawdzić firmy Apple WWDC 2012 sesje

• 205 Wprowadzenie Odwiedzin Kolekcja
• 219 Widoki zaawansowane Collection i budowanie niestandardowych układów

od https://developer.apple.com/videos/wwdc/2012/