Question

我需要一个包含N行和M列的表格。

表中的触摸事件应该突出显示当前列和行，并在释放时触发操作。

通过什么可以编写这样的表？

我想过使用2D数组UIView / UIButtons制作表格，并在此表格上放置隐身UIView来处理触摸操作。

你怎么看？或者有更好的解决方案吗？

Answer 1

您有几种选择。

选项1。 UIButtons 的二维数组。

- (void)setupButtons
{
    int N = 3;
    int M = 3;
    CGFloat buttonSize = 50.0f;
    CGFloat padding = 5.0f;

    CGPoint startButtonLocation = CGPointMake(40.0f, 40.0f);
    CGPoint buttonLocation;

    for (int n = 0; n < N; n++)
    {
        buttonLocation.x = startButtonLocation.x + n * (buttonSize + padding);

        for (int m = 0; m < M; m++)
        {
            buttonLocation.y = startButtonLocation.y + m * (buttonSize + padding);

            UIButton *button = [[UIButton alloc] initWithFrame:CGRectMake(buttonLocation.x,
                                                                          buttonLocation.y,
                                                                          buttonSize,
                                                                          buttonSize)];
            button.backgroundColor = [UIColor grayColor];

            [button setTitle:[NSString stringWithFormat:@"%i, %i", n, m]
                    forState:UIControlStateNormal];

            [button addTarget:self
                       action:@selector(buttonTapped:)
             forControlEvents:UIControlEventTouchUpInside];

            [self.view addSubview:button];
        }
    }
}

- (void)buttonTapped:(id)sender
{
    NSLog(@"tapped index: %@", ((UIButton *)sender).titleLabel.text);
}

输出：

enter image description here

选项2。实施 UICollectionView 。

@interface ViewController : UIViewController<UICollectionViewDataSource, UICollectionViewDelegateFlowLayout>
{
    UICollectionView *_collectionView;
}

@implementation
- (void)viewDidLoad
{
    [super viewDidLoad];

     UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc] init];
    _collectionView = [[UICollectionView alloc] initWithFrame:self.view.frame collectionViewLayout:layout];

    _collectionView.dataSource = self;
    _collectionView.delegate = self;

    [_collectionView registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:@"cellIdentifier"];
    [_collectionView setBackgroundColor:[UIColor redColor]];

    [self.view addSubview:_collectionView];
}

- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
{
    return 15;
}

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
    UICollectionViewCell *cell=[collectionView dequeueReusableCellWithReuseIdentifier:@"cellIdentifier" forIndexPath:indexPath];

    cell.backgroundColor = [UIColor greenColor];

    return cell;
}

- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath
{
    return CGSizeMake(50, 50);
}

输出：

enter image description here

当用户点击某个项目时，您可以在以下位置处理：

- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath
{
    // Handling
}

Answer 2

您可以按照建议创建矩阵，也可以NSMutableArray创建NSMutableArrays。

但是，根据您对实现目标的描述，听起来非常像UICollectionView可以为您解决的问题。从编码点来看，它的行为几乎就像UITableView，但允许您创建一个单元格网格：

集合视图提供与表视图相同的常规功能，只是集合视图不仅支持单列布局。集合视图支持可自定义的布局，可用于实现多列网格，平铺布局，圆形布局等等。

查看完整的documentation。

具有行/列突出显示的二维表

2 个答案: