ios - 从 Storyboard 中实例化几个可拖动的图 block - 附上测试代码和屏幕截图

Question

在 Xcode 5 中我创建了 a single view iPhone app并将其 checkin GitHub。

我想显示 5 个带有随机字母及其值的可拖动图 block 。

我更愿意在 Storyboard 中定义图 block ，然后从那里实例化它(5 次)- 因为这样我可以很容易地编辑图 block (例如移动图 block 内的标签)。

目前我的项目看起来像这样(这里是 fullscreen of Xcode ):

目前 Storyboard 中只有一个图 block ，它是可拖动的:

我添加了一个 Tile 类，但不知道如何连接它的 socket (因为我只能按住 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. 如何从 Storyboard 中实例化 5 个图 block ？
2. 如何在拖动图 block 时显示阴影(dragged.png)？

更新:

按照 Fogmeister 的建议(谢谢!)我添加了一个新文件 Tile.xib

(在 Xcode 菜单中选择:File -> New -> File... -> User Interface -> View)

然后我将自定义类设置为 Tile，但是我可以在哪里设置(正方形)尺寸？

(这里fullscreen)

更新 2:

对于 Tile.xib，我将 Size 设置为 Freeform，将 Drawing 设置为 Opaque，并将尺寸设置为 100 x 100(此处 fullscreen ):

为什么我自定义的UIView有白角？如何使背景透明？

另外我想知道如何在Interface Builder中切换电池的显示？

Answer 1

如何从 Storyboard 中实例化 5 个图 block 。

我认为这里要认识到的是， Storyboard并不是万能的解决方案，而是应该与已经存在的工具套件一起使用。

例如。以这种方式创建多个 View 实例不是使用 Storyboard可以很好地完成的事情。 Storyboard应被视为提供应用程序的整体支柱。

要做到这一点，我会采用两种方式之一...

第一种方式

创建一个名为 Tile.xib 的新 NIB 文件，并在其中布置您的单个 Tile View 。将 socket 连接到 Tile 类文件。现在在您的 View Controller 中，您可以使用 nib 加载 Tile 类进行布局...

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

第二种方式

或者忘记 nib 并在 Tile.m 文件中的代码中加载 Tile View 。然后加载它......

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

拖动瓦片时如何显示阴影(被拖动的.png)？

为此，您需要在平铺 View 的图层上设置阴影...

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 上创建一个名为 isDragging 的 BOOL 属性。或者甚至是一个名为 TileState 的枚举，带有 TileStateDragging 和 TileStateStatic。

然后有一个方法...

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

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

其他一些注意事项

目前您在 Tile 类的 initWithFrame 中有代码，但您正在使用 nib(在本例中为 Storyboard)加载该类。这将运行方法 initWithCoder 而不是 initWithFrame 因此此代码永远不会运行。

如果您想在创建类时运行代码，您可能最好使用 awakeFromNib 方法。