Want to make a detailview just like Pinterest

问题

I've been struggling with a view in xcode this whole weekend but still can't get it as I want. I want to do a detailview like Pinterest (see link below) but can't find out how to do it, is it a tableview with custom cells, collectionview or something else.. Which way's the easiest way to build it? Would be so grateful if someone got some good inputs for me..

Have a great upcoming week!!

Pinterest DeatilView

EDIT: This is what I got at the moment.. But feels like there should be an easier way to..

#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

回答1:

They are using UICollectionViews and the new transitioning APIs.

Here is an actual blog post by them going over some of the layouts at a high level:
https://medium.com/@Pinterest_Engineering/behind-the-pins-building-pinterest-3-0-for-ios-100f57f6940

Here is a UICollectionView layout someone made to recreate their main layout:
https://github.com/chiahsien/CHTCollectionViewWaterfallLayout

来源：https://stackoverflow.com/questions/23861121/want-to-make-a-detailview-just-like-pinterest

标签

ios

objective-c

tableview