想要像 Pinterest 一样制作 detailview [英] Want to make a detailview just like Pinterest

问题描述

整个周末我都在为 xcode 中的视图而苦苦挣扎，但仍然无法如我所愿.我想做一个像 Pinterest 这样的 detailview(见下面的链接)，但不知道怎么做，它是一个带有自定义单元格、collectionview 或其他东西的 tableview.哪种方式是最简单的构建方法?如果有人为我提供一些好的意见，我将不胜感激..

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..

祝您下周愉快！

Pinterest DeatilView

这就是我目前得到的......但感觉应该有一种更简单的方法......

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

推荐答案

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

They are using UICollectionViews and the new transitioning APIs.

这是他们在高层次上介绍一些布局的实际博客文章:
https://medium.com/@Pinterest_Engineering/behind-the-pins-building-pinterest-3-0-for-ios-100f57f6940

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

这是某人为重新创建其主要布局而制作的 UICollectionView 布局:
https://github.com/chiahsien/CHCollectionViewWaterfallLayout

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

这篇关于想要像 Pinterest 一样制作 detailview的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！