ios - 想要像 Pinterest 一样制作详细 View

Question

整个周末我都在为 xcode 中的 View 而苦苦挣扎，但仍然无法如愿以偿。我想做一个像 Pinterest 一样的细节 View (见下面的链接)但不知道如何做，它是一个带有自定义单元格的 TableView ， Collection View 还是其他东西......哪种方式是构建它的最简单方法？如果有人能为我提供一些好的意见，我将不胜感激。

祝接下来的一周愉快!!

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

Answer 1

他们正在使用 UICollectionViews 和新的转换 API。

这是一篇实际的博文，作者在高层次上回顾了一些布局:
https://medium.com/@Pinterest_Engineering/behind-the-pins-building-pinterest-3-0-for-ios-100f57f6940

这里是一个 UICollectionView 布局，有人重新创建了他们的主要布局:
https://github.com/chiahsien/CHTCollectionViewWaterfallLayout