objective-c - iPad 自定义/动态布局

Question

我是 iOS 开发的新手。我已经阅读了几个教程并了解了基础知识，但目前我被困在如何继续前进。我正计划为基本的家庭自动化（即开关灯、测量温度等）创建一个应用程序。后端都设置好了，所以这只是前端。这就是我打算做的：

应用程序的主视图应显示平面图或房屋布局
在这个平面图上，您应该能够添加灯光/传感器/等。- 让我们说对象保持通用
这些对象应该是可拖动的，以便您可以根据它们的实际位置（物理上）将它们排列在平面图上 - 理想情况下，这种拖动模式是可切换的，类似于在主屏幕上重新排列图标
每个对象都应该有一个弹出视图（即设置调光器强度、开关灯等）

我知道有很多工作要做，但我真的不知道如何设置它。目前的替代品：

创建一个自定义 UIView 子类，其中包含在自定义代码中进行绘图的所有逻辑，即拖动、弹出框定位等 - 但我觉得我不会真正利用 iOS 框架功能
将平面图显示为 UIImageView 和每个对象的一个 UIButton。这样做的好处是我可以使用 StoryBoard 进行布局和布线（即为弹出框创建 segues 等） - 但我根本无法弄清楚如何使用可变数量的按钮来做到这一点（因为我不知道提前有多少按钮）。有没有办法在代码中创建这些按钮？
使用自定义 UITableView。我已经看到了几个示例，即使布局与表格无关（例如在我的示例中），它们似乎也使用表格视图，但是我还没有找到任何教程可以更详细地解释此概念

还是我完全走错了路？任何输入表示赞赏。

感谢：D。

更新：经过更多的研究和思考，我认为使用 iOS 6 的方法是使用带有自定义布局的 UICollectionView。一旦我想出了一个完整的解决方案，我会在这里发布。对于较旧的 iOS 版本，我认为使用 Option Nr 会很有希望。2 - 即在代码中创建每个 UIButton（用于自动化对象，例如灯）并使用自定义 UIView 子类来对这些按钮进行布局。

score 3 · Accepted Answer

好的，我认为 UICollectionView 非常适合这种使用场景，我很幸运能够开始使用 iOS 编程，就像它被引入框架一样。下面的示例是一个 UICollectionView，它根据元素的固有坐标显示其元素。这个例子也可以应用于在地图上定位对象。我在其他地方找不到任何示例，所以我将在此处发布主要步骤（因为我是初学者，请纠正任何错误）。

首先，我在 XCode 中创建了一个带有一个视图和故事板的简单项目。我删除了标准视图并插入了一个集合视图控制器，并将我的 UICollectionViewController 子类配置为应该使用的类（在情节提要中控制器的属性中）。

对于演示，只需将默认 UICollectionViewCell 的背景设置为一种颜色，并将此示例的 Identifier 设置为“AutomationCell”（如果您更改它，请务必调整下面的代码）。

首先，我创建了一个简单的对象，其中包含一些属性，这些属性表示应该在平面图上显示的对象：

@interface AULYAutomationObject : NSObject

@property NSString *title;
@property CGPoint position;

@end

然后我需要我自己的委托作为标准 UICollectionViewDelegate 的子类，因为我的自定义 UICollectionViewLayout 将无法直接访问 dataSource 对象。因此，我提供了一种方法，可以为我提供对象的位置：

@protocol AULYAutomationObjectLayoutDelegate <UICollectionViewDelegate>

- (CGPoint)getPositionForItemAtIndexPath:(NSIndexPath *)indexPath;

@end

确保在您的控制器中实现此协议，如下所示：

@interface AULYViewController : UICollectionViewController <AULYAutomationObjectLayoutDelegate>

然后我在视图控制器子类中实现了标准数据源和委托方法以及我的自定义方法：

@interface AULYViewController ()

@property NSArray *objects;
@property (strong, nonatomic) IBOutlet UICollectionView *collectionView;

@end

@implementation AULYViewController

- (void)viewDidLoad
{
    [super viewDidLoad];

    // Set up the data source
    NSMutableArray *automationObjects = [[NSMutableArray alloc] initWithCapacity:10];

    // add some objects here...

    self.objects = [automationObjects copy];

    UILongPressGestureRecognizer *longPressRecognizer = [[UILongPressGestureRecognizer alloc] initWithTarget:self action:@selector(handleTapGesture:)];
    [self.collectionView addGestureRecognizer:longPressRecognizer];
}

#pragma mark - UICollectionViewController 
- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView
{
    return 1;
}

- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
{
    return self.objects.count;
}

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
    AULYAutomationObjectViewCell *cell = [collectionView     dequeueReusableCellWithReuseIdentifier:@"AutomationCell" forIndexPath:indexPath];
    // If you have a custom UICollectionViewCell with a label as outlet 
    // you could for example then do this:
    // AULYAutomationObject *automationObject = self.objects[indexPath.row];
    // cell.label.text = automationObject.title;
    return cell;
}

#pragma mark - AULYAutomationObjectLayoutDelegate

- (CGPoint)getPositionForItemAtIndexPath:(NSIndexPath *)indexPath
{
    AULYAutomationObject *automationObject = self.objects[indexPath.item];
    return automationObject.position;
}

在实际项目中，您可能会从对象模型位置到屏幕上的位置（例如 GPS 数据到像素）进行一些转换，但为了简单起见，这里省略了这一点。

完成之后，我们仍然需要设置我们的布局。这具有以下属性：

@interface AULYAutomationObjectLayout : UICollectionViewLayout

@property (nonatomic, strong) NSIndexPath *draggedObject;
@property (nonatomic) CGPoint dragPosition;

@end

以及以下实现：

@implementation AULYAutomationObjectLayout

- (void)setDraggedObject:(NSIndexPath *)draggedObject
{
    _draggedObject = draggedObject;
    [self invalidateLayout];
}

- (void)setDragPosition:(CGPoint)dragPosition
{
    _dragPosition = dragPosition;
    [self invalidateLayout];
}

- (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath
{
    UICollectionViewLayoutAttributes *layoutAttributes = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath];
    id viewDelegate = self.collectionView.delegate;
    if ([viewDelegate respondsToSelector:@selector(getPositionForItemAtIndexPath:)])
    {
        CGPoint itemPosition = [viewDelegate getPositionForItemAtIndexPath:indexPath];
        layoutAttributes.center = itemPosition;
        layoutAttributes.size = CGSizeMake(ITEM_SIZE, ITEM_SIZE);
    }

    if ([self.draggedObject isEqual:indexPath])
    {
        layoutAttributes.center = self.dragPosition;
        layoutAttributes.transform3D = CATransform3DMakeScale(1.5, 1.5, 1.0);
        layoutAttributes.zIndex = 1;
    }

    return layoutAttributes;
}

- (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect
{
    NSMutableArray *allAttributes = [[NSMutableArray alloc] initWithCapacity:4];
    for (NSInteger i = 0; i < [self.collectionView numberOfItemsInSection:0]; i++)
    {
        NSIndexPath *indexPath = [NSIndexPath indexPathForItem:i inSection:0];
        UICollectionViewLayoutAttributes *layoutAttributes = [self layoutAttributesForItemAtIndexPath:indexPath];
        [allAttributes addObject:layoutAttributes];
    }
    return allAttributes;
}

- (BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds
{
    return YES;
}

- (CGSize)collectionViewContentSize
{
    return [self.collectionView frame].size;
}

@end

要在情节提要中设置自定义布局，只需转到控制器视图的属性并选择自定义作为布局类型 - 然后选择您的自定义类。

现在要使用长按手势启用拖放支持，只需将以下内容添加到您的控制器：

- (void)handleTapGesture:(UITapGestureRecognizer *)sender
{
    AULYAutomationObjectLayout *automationLayout = (AULYAutomationObjectLayout *)self.collectionView.collectionViewLayout;
    if (sender.state == UIGestureRecognizerStateBegan)
    {
        CGPoint initialPinchPoint = [sender locationInView:self.collectionView];
        NSIndexPath* tappedCellPath = [self.collectionView indexPathForItemAtPoint:initialPinchPoint];
        [self.collectionView performBatchUpdates:^{
            automationLayout.draggedObject = tappedCellPath;
            automationLayout.dragPosition = initialPinchPoint;
        } completion:nil];
    }
    else if (sender.state == UIGestureRecognizerStateChanged)
    {
        automationLayout.dragPosition = [sender locationInView:self.collectionView];
    }
    else if (sender.state == UIGestureRecognizerStateEnded)
    {
        AULYAutomationObject *automationObject = self.objects[automationLayout.draggedObject.item];
        automationObject.position = [sender locationInView:self.collectionView];
        [self.collectionView performBatchUpdates:^{
            automationLayout.draggedObject = nil;
            automationLayout.dragPosition = CGPointMake(0.0, 0.0);
        } completion:nil];
    }
}

一个重要的注意事项：（这至少花费了我一个小时）：使用 transform3D 时，您应该确保将 QuartzCore 导入链接的框架（在方向设置下方的项目属性中）。否则，您将收到一个 Mach-O 链接器错误，提示找不到 _CATransform3DMakeScale。

objective-c - iPad 自定义/动态布局

1 回答 1

Related

Reference