從Storyboard實例化幾個可拖動的圖塊-測試代碼和屏幕截圖

Question

在Xcode 5中，我創建了一個單視圖iPhone應用程序並將其簽入GitHub。

我想顯示5個帶有隨機字母及其值的可拖動圖塊。

我寧願在情節提要板中定義圖塊，然后從那里實例化（5次）-因為這樣我可以輕松地編輯圖塊（例如，在圖塊內部移動標簽）。

目前，我的項目如下所示（此處是Xcode的全屏顯示 ）：

目前，情節提要中只有一個磁貼，並且可以拖動：

我添加了Tile類，但不知道如何連接其出口 （因為我只能ctrl拖動到ViewController.h ，而不能拖動到Tile.h ）：

在這里Tile.h ：

@interface Tile : UIView

// XXX How to connect the outlets?
@property (weak, nonatomic) IBOutlet UIImageView *background;
@property (weak, nonatomic) IBOutlet UILabel *letter;
@property (weak, nonatomic) IBOutlet UILabel *value;

@end

和Tile.m ：

#import "Tile.h"

static NSString* const kLetters =  @"ABCDEFGHIJKLMNOPQRSTUWVXYZ";
static UIImage* kTile;
static UIImage* kDragged;

@implementation Tile

+ (void)initialize
{
    // do not run for derived classes
    if (self != [Tile class])
        return;

    kTile    = [UIImage imageNamed:@"tile"];
    kDragged = [UIImage imageNamed:@"dragged"];
}

- (id)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        NSString* randomLetter = [kLetters substringWithRange:[kLetters rangeOfComposedCharacterSequenceAtIndex:random()%[kLetters length]]];
        int randomInteger = (int)arc4random_uniform(10);

        _background.image = kTile;
        _letter.text = randomLetter;
        _value.text = [NSString stringWithFormat:@"%d", randomInteger];
    }
    return self;
}

@end

最后是ViewController.m ：

#import "ViewController.h"

static int const kNumTiles = 5;

@implementation ViewController

- (void)viewDidLoad
{
    [super viewDidLoad];

    UIStoryboard *storyboard = [UIStoryboard storyboardWithName:@"Main" bundle:nil];

    for (int i = 0; i < kNumTiles; i++) {
        // TODO: add a Tile to the VC here
    }
}

- (IBAction)dragTile:(UIPanGestureRecognizer *)recognizer
{
    UIView *tile = recognizer.view;

    if (recognizer.state == UIGestureRecognizerStateBegan ||
        recognizer.state == UIGestureRecognizerStateChanged) {

        CGPoint translation = [recognizer translationInView:[tile superview]];

        [tile setCenter:CGPointMake(tile.center.x + translation.x,
                                    tile.center.y + translation.y)];

        [recognizer setTranslation:CGPointZero inView:tile.superview];

        // TODO: instead of tile.png display dragged.png with shadow
    }
}

@end

在后一個文件中，我不知道

1. 如何從情節提要中實例化5個圖塊？
2. 拖動圖塊時如何顯示陰影（ dragged.png ） ？

更新：

正如Fogmeister所建議的（謝謝！），我添加了一個新文件Tile.xib

（在Xcode菜單中選擇：文件->新建->文件...->用戶界面->視圖）

然后，將“自定義類”設置為Tile ，但是在哪里可以設置（正方形）尺寸？

（ 全屏顯示 ）

更新2：

對於Tile.xib我將“ Size設置為“自由形式”，將“ Drawing為“不透明”，並將尺寸設置為100 x 100（此處為全屏 ）：

為什么我的自定義UIView有白色的角？ 如何使背景透明？

我也想知道，如何在Interface Builder中切換電池的顯示？

Answer 1

如何從情節提要中實例化5個圖塊。

我認為在這里要意識到的是，故事板並不是所有解決方案的解決方案，而應該與已經存在的工具套件一起使用。

例如。 以這種方式創建視圖的多個實例並不是使用Storyboard可以很好地完成的。 故事板應被視為提供應用程序的整體骨干。

為此，我可以采用以下兩種方法之一...

第一路

創建一個名為Tile.xib的新NIB文件，並在其中布局單個Tile視圖。 將插座連接到Tile類文件。 現在在您的視圖控制器中，您可以使用筆尖進行布局來加載Tile類。

Tile *tile = [[[NSBundle mainBundle] loadNibNamed:@"Tile" owner:self options:nil] firstObject];
tile.frame = //blah
[self.view addSubview:tile];

第二路

或忘記筆尖，然后在Tile.m文件的代碼中全部加載Tile視圖。 然后像加載...

Tile *tile = [[Tile alloc] initWithFrame:someFrame];
[self.view addSubview:tile];

拖動圖塊時如何顯示陰影（draged.png）？

為此，您需要在平鋪視圖的圖層上設置陰影。

tile.layer.shadowColor = [UIColor blackColor].CGColor;
tile.layer.shadowRadius = 4.0;
// etc...

您可以在此處閱讀有關陰影的更多信息...

https://developer.apple.com/library/mac/documentation/graphicsimaging/reference/CALayer_class/Introduction/Introduction.html#//apple_ref/doc/uid/TP40004500-CH1-SW78

評論后編輯

為此，我將在Tile.h上擁有一個BOOL屬性，稱為isDragging類的isDragging 。 甚至帶有TileStateDragging和TileStateStatic名為TileState的枚舉。

然后有一個方法...

- (void)setDragging:(BOOL)dragging
{
    _dragging = dragging;

    if (_dragging) {
        //set to the shadow image.
    } else {
        //set the none shadow image.
    }
}

其他注意事項

當前，您在Tile類的initWithFrame中包含代碼，但是您正在使用筆尖（在這種情況下為storyboard）加載該類。 這將運行initWithCoder方法而不是initWithFrame方法，因此該代碼將永遠不會運行。

如果要在創建類時運行代碼，則最好使用awakeFromNib方法。

Answer 2

該問題似乎已解決，但我仍然要花2便士，然后向您展示另一個解決方案，以便您了解完整情況。 您可以在情節UICollectionView中實例化UICollectionView並內聯（在情節UICollectionView中）定義UICollectionViewCell原型。 單元格也是常規視圖，因此您可以在其中（全部在情節提要中）放置完整的圖塊視圖層次結構。 然后，您將需要定義一個自定義UICollectionViewLayout子類，該子類將提供UICollectionViewLayout布局屬性（這些UICollectionViewLayout貼可以隨時間變化，並且可以像其他任何視圖一樣進行動畫處理）。 使用集合視圖將在您的代碼上強加一個結構，該結構將：

1. 縮放到任意數量的瓷磚，
2. 支持諸如磁貼的動畫插入和刪除之類的任務（您仍然需要在布局子類中編寫代碼，但是已經為您定義了所有API，並且不需要發明設計），
3. 將布局代碼與游戲邏輯分開（這當然不是該解決方案所獨有的，但是即使不考慮它也仍然很不錯：）。

對於這個特定的玩具項目，這似乎有些過頭了，但是對於更復雜的情況，您可能需要考慮使用收集視圖。