iOS:如何制作多列表

时间:2014-11-25 22:12:55

标签: ios objective-c iphone uitableview uicollectionview

我想在iOS 7和8上使用uitableview创建一个表。 该表如下图所示

table

我尝试过使用uitableviewCell,但标签在iphone和iPad上调整不好..加上自动布局很难处理。

我的问题是..无论如何,即使使用uicollectionView我也能做到这一点..请详细说明。

任何帮助将不胜感激

4 个答案:

答案 0 :(得分:2)

就像一个例子。很明显,你必须配置很多东西,但我认为这是一个很好的起点:

.h文件:

#import <UIKit/UIKit.h>

@interface OKCustomFiveLabelsTableViewCell : UITableViewCell

// Here is the place to send through the tableViewDelegate all info about the cell.

@property (nonatomic, strong) NSDictionary *dictInfo;

@end

.m文件

#import "OKCustomFiveLabelsTableViewCell.h"

#define FIRST_LABEL_PERCENT 0.15
#define SECOND_LABEL_PERCENT 0.3
#define THIRD_LABEL_PERCENT 0.2
#define FOURTH_LABEL_PERCENT 0.2
#define FIFTH_LABEL_PERCENT 0.15

//the sum of this five must be 1

@interface OKCustomFiveLabelsTableViewCell ()

@property (nonatomic, strong) UILabel *firstLabel;
@property (nonatomic, strong) UILabel *secondLabel;
@property (nonatomic, strong) UILabel *thirdLabel;
@property (nonatomic, strong) UILabel *fourthLabel;
@property (nonatomic, strong) UILabel *fifthLabel;

@end


@implementation OKCustomFiveLabelsTableViewCell

- (id)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier
{
self = [super initWithStyle:style reuseIdentifier:reuseIdentifier];
if (self) {

    CGFloat width = [UIScreen mainScreen].bounds.size.width;

    self.firstLabel = [[UILabel alloc] initWithFrame:CGRectMake(0, 5, width *FIRST_LABEL_PERCENT, 25)];

    //Configure here your label
    // It´s good idea Use: NSTextAlignamentCenter

    [self.contentView addSubview:self.firstLabel];

    self.secondLabel= [[UILabel alloc] initWithFrame:CGRectMake(width *FIRST_LABEL_PERCENT, 5, width *SECOND_LABEL_PERCENT, 25)];

    //Configure here your label

    [self.contentView addSubview:self.secondLabel];

    self.thirdLabel= [[UILabel alloc] initWithFrame:CGRectMake(width *(FIRST_LABEL_PERCENT + SECOND_LABEL_PERCENT), 5, width *THIRD_LABEL_PERCENT, 25)];

    //Configure here your label

    [self.contentView addSubview:self.thirdLabel];

    self.fourthLabel= [[UILabel alloc] initWithFrame:CGRectMake(width *(FIRST_LABEL_PERCENT + SECOND_LABEL_PERCENT+THIRD_LABEL_PERCENT), 5, width *FOURTH_LABEL_PERCENT, 25)];

    //Configure here your label

    [self.contentView addSubview:self.fourthLabel];


    self.fifthLabel= [[UILabel alloc] initWithFrame:CGRectMake(width *(FIRST_LABEL_PERCENT + SECOND_LABEL_PERCENT+THIRD_LABEL_PERCENT+FOURTH_LABEL_PERCENT), 5, width *FIFTH_LABEL_PERCENT, 25)];

    //Configure here your label

    [self.contentView addSubview:self.fifthLabel];


}
return self;
}

-(void)setDictInfo:(NSDictionary *)dictInfo
{
self.fifthLabel.text = [dictInfo valueForKey:@"identyNumber"];
self.secondLabel.text = [dictInfo valueForKey:@"name"];
self.thirdLabel.text = [dictInfo valueForKey:@"amount"];
self.fourthLabel.text = [dictInfo valueForKey:@"time"];
self.fifthLabel.text = [dictInfo valueForKey:@"type"];

_dictInfo = dictInfo;
}

@end

如果您想要纵向和横向工作,您可能需要编写方法才能正常工作。 (旋转)。但它与旋转方法中的代码相同。

答案 1 :(得分:1)

制作多列表的方法是:

1)每个项目不同UICollectionViewCell

2)标题的单独视图,只是为了不用非数据信息阻塞数据源。

3)仔细管理每个部分中的单元格类和定位,其中每个部分都是一行,每个单元格都是一个列条目。

答案 2 :(得分:1)

您是否尝试过某些第三方组件?在GitHub上为MDSpreadView组件提供了很好的演示。

链接: https://github.com/mochidev/MDSpreadViewDemo

答案 3 :(得分:0)

在您的情况下,我认为,自定义表格视图单元格是您的最佳选择。您可以在故事板中创建和排列它们,并设置适当的IBOutlets。

你可以关注this tutorial,它描述的模式非常好。