想要像Pinterest一样制作详细视图

我一直在整个周末一直在xcode的观点挣扎,但仍然不能如我所愿。 我想做一个Pinterest的detailview(见下面的链接),但无法find如何做到这一点,它是一个tableview自定义单元格,collectionview或其他什么东西..哪种方法是最简单的方法来构build它? 如果有人为我提供了一些好的投入,我会很感激的。

有一个伟大的未来一周!

Pinterest的DeatilView

编辑:这是我现在得到的..但感觉应该有一个更简单的方法..

#import "ViewController.h" enum TableSectionSelected { kUIMainContentSection = 0, kUISecondSection, kUIActivateSection }; @interface ViewController () <UITableViewDelegate, UITableViewDataSource> @property (nonatomic, strong) UIImageView *imageView; @end @implementation ViewController - (void)viewDidLoad { [super viewDidLoad]; self.imageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 300, 300)]; self.imageView.image = [UIImage imageNamed:@"fotolia_54424692.jpg"]; } - (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView { return 3; } - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section { switch (section) { case 0: return 2; break; default: return 1; break; } } - (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath { NSIndexPath *firstCell = [NSIndexPath indexPathForRow:0 inSection:0]; if ([firstCell isEqual:indexPath]) { return 500; } return 44; } - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath: (NSIndexPath *)indexPath { static NSString *CellIdentifier = @"Cell"; UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier forIndexPath:indexPath]; // cell.textLabel.text = [NSString stringWithFormat:@"%@", indexPath]; if (indexPath.section == 0 && indexPath.row == 0) { } switch (indexPath.section) { case kUIMainContentSection: if (indexPath.row == 0) { [cell.contentView addSubview:self.imageView]; UILabel *titleLabel = [[UILabel alloc] initWithFrame:CGRectMake(20, 320, 260, 30)]; titleLabel.text = @"Orange Juice"; [cell.contentView addSubview:titleLabel]; UILabel *detailLabel = [[UILabel alloc] initWithFrame:CGRectMake(20, 370, 260, 44)]; detailLabel.numberOfLines = 0; detailLabel.text = @"Lorem ipsum dolor sit er elit lamet, consectetaur cillium adipisicing pecu, sed do eiusmod tempor incididunt ut labore et dolo"; [detailLabel sizeToFit]; [cell.contentView addSubview:detailLabel]; cell.accessoryType = UITableViewCellAccessoryNone; cell.selectionStyle = UITableViewCellSelectionStyleNone; } else if (indexPath.row == 1) { cell.textLabel.text = @"Hitta Hit"; cell.imageView.image = [UIImage imageNamed:@"fotolia_54424692.jpg"]; cell.accessoryType = UITableViewCellAccessoryDisclosureIndicator; cell.selectionStyle = UITableViewCellSelectionStyleDefault; } break; case kUISecondSection: cell.textLabel.text = @"Joe & The Juice"; cell.imageView.image = [UIImage imageNamed:@"fotolia_54424692.jpg"]; cell.accessoryType = UITableViewCellAccessoryDisclosureIndicator; cell.selectionStyle = UITableViewCellSelectionStyleDefault; break; case kUIActivateSection: cell.textLabel.text = @"Activate"; cell.textLabel.textAlignment = NSTextAlignmentCenter; cell.imageView.image = nil; cell.accessoryType = UITableViewCellAccessoryNone; cell.selectionStyle = UITableViewCellSelectionStyleDefault; break; default: break; } cell.layer.cornerRadius = 3.0; cell.layer.borderColor = [UIColor colorWithHue:0.0 saturation:0.0 brightness:0.0 alpha:0.1].CGColor; cell.layer.borderWidth = 0.5; return cell; } - (NSString *)tableView:(UITableView *)tableView titleForFooterInSection:(NSInteger)section { if (section == kUISecondSection) { return @"Lorem ipsum dolor sit er elit lamet, consectetaur cillium adipisicing pecu, sed do eiusmod tempor incididunt ut labore et dolo"; } else { return @""; } } @end 

他们正在使用UICollectionViews和新的过渡API。

这里有一个实际的博客文章,他们在一些高层次的布局:

http://engineering.pinterest.com/post/67769846580/behind-the-pins-building-pinterest-3-0-for-ios

以下是有人为重新创build主布局而创build的UICollectionView布局:

https://github.com/chiahsien/CHTCollectionViewWaterfallLayout