iOS:如何制作多列表

Posted

技术标签:

【中文标题】iOS:如何制作多列表【英文标题】:iOS: How To make multiple column table 【发布时间】:2014-11-25 22:12:55 【问题描述】:

我正在尝试在 ios 7 和 8 上使用 uitableview 制作表格。 表格如下图所示

我尝试过使用 uitableviewCell 进行操作,但标签在 iphone 和 iPad 中的调整效果不佳……而且自动布局很难处理。

我的问题是.. 有没有即使使用 uicollectionView 也可以做到这一点.. 以及如何详细说明。

任何帮助将不胜感激

【问题讨论】:

你是如何放置标签的?你能发布一些代码吗? 最好的方法是使用自定义表格视图单元格。 我看到您得到了很多答案,但我怀疑您对齐标签的方式存在问题,可以通过简单的修复来修复。我建议在探索各种途径之前发布代码...... 【参考方案1】:

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

.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

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

【讨论】:

虽然 setDictInfo .. 永远不会被调用 它是 setter,在您放置视图控制器委托时调用:cell.dictInfo = .....【参考方案2】:

您是否尝试过一些第三方组件? GitHub 上有一个很好的 MDSpreadView 组件演示。

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

【讨论】:

【参考方案3】:

制作多列表格的一种方法是:

1) 每个项目都有一个不同的UICollectionViewCell

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

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

【讨论】:

【参考方案4】:

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

你可以关注this tutorial,这个模式描述得非常好。

【讨论】:

以上是关于iOS:如何制作多列表的主要内容,如果未能解决你的问题,请参考以下文章

如何在 ASP 中制作自动回发多选列表框?

iOS:用 iPhone 日历列表的背景颜色制作一个圆圈

当卡片数据由循环提供时,如何从物化(css)卡片制作多项目轮播?

如何将应用程序的图标(使用 Trigger.io 制作的应用程序)添加到 iOS 内容共享菜单

MVVMCross:如何制作无限滚动视图并下推刷新视图?

jQuery制作淘宝商城商品列表多条件查询功能