Apple Developer Connection
Member Login Log In | Not a Member? Contact ADC

< 前ページ次ページ > 目次を隠す

Core Animationレイヤの配置

NSViewは、ビューのサイズを変更する場合にそのスーパーレイヤを基準にして相対的に位置変更を行う、従来の「ストラット&スプリング」モデルを提供します。レイヤはこのモデルをサポートしていますが、Core Animationは、開発者が独自のレイアウトマネージャを記述できる、より一般的なレイアウトマネージャメカニズムを提供しています。カスタムレイアウトマネージャ(CALayoutManagerプロトコルを実装)をレイヤに対して指定できます。これは次にレイヤのサブレイヤのレイアウトを指定する役割を担います。

この章では、制約レイアウトマネージャと一連の制約の設定方法について説明します。

制約レイアウトマネージャ

制約に基づくレイアウトでは、レイヤの位置とサイズを、その兄弟レイヤやスーパーレイヤとの関係を使って指定できます。関係は、サブレイヤのconstraintsプロパティ内の配列に格納されているCAConstraintクラスのインスタンスによって表されます。

図 1に、関係を指定するときに使用できるレイアウト属性を示します。


図 1  制約レイアウトマネージャの属性

Constraint layout manager attributes

制約レイアウトを使用する場合は、まずCAConstraintsLayoutManagerのインスタンスを作成して、これを親レイヤのレイアウトマネージャとして設定します。次に、CAConstraintオブジェクトをインスタンス化してこれらをaddConstraint:を使用してサブレイヤの制約に追加することによって、サブレイヤの制約を作成します。各CAConstraintインスタンスは同じ軸上の2つのレイヤ間で1つのジオメトリ関係をカプセル化します。

兄弟レイヤは、レイヤのnameプロパティを使って名前によって参照されます。特殊な名前であるsuperlayerは、スーパーレイヤを参照するために使用されます。

2つの関係の最大値を各軸に指定しなければなりません。レイヤの左右の端に制約を指定すると、幅が変わります。左端と幅に制約を指定すると、レイヤの右端がスーパーレイヤのフレームを基準にして相対的に移動します。多くの場合は、1つの端だけに制約を指定し、同じ軸のレイヤのサイズは2番目の関係として使用されます。

リスト 1に示すコード例では、レイヤを作成し、次に制約を使用して位置決めされたサブレイヤを追加します。図 2に、結果のレイアウトを示します。


図 2  制約に基づくレイアウトの例

Example constraints based layout

リスト 1  レイヤの制約の設定

 
// theLayerの制約レイアウトマネージャを作成して設定する
theLayer.layoutManager=[CAConstraintLayoutManager layoutManager];
 
CALayer *layerA = [CALayer layer];
layerA.name = @"layerA";
 
layerA.bounds = CGRectMake(0.0,0.0,100.0,25.0);
layerA.borderWidth = 2.0;
 
[layerA addConstraint:[CAConstraint constraintWithAttribute:kCAConstraintMidY
                                                 relativeTo:@"superlayer"
                                                  attribute:kCAConstraintMidY]];
 
[layerA addConstraint:[CAConstraint constraintWithAttribute:kCAConstraintMidX
                                                 relativeTo:@"superlayer"
                                                  attribute:kCAConstraintMidX]];
 
[theLayer addSublayer:layerA];
 
CALayer *layerB = [CALayer layer];
layerB.name = @"layerB";
layerB.borderWidth = 2.0;
 
[layerB addConstraint:[CAConstraint constraintWithAttribute:kCAConstraintWidth
                                                 relativeTo:@"layerA"
                                                  attribute:kCAConstraintWidth]];
 
[layerB addConstraint:[CAConstraint constraintWithAttribute:kCAConstraintMidX
                                                 relativeTo:@"layerA"
                                                  attribute:kCAConstraintMidX]];
 
 
[layerB addConstraint:[CAConstraint constraintWithAttribute:kCAConstraintMaxY
                                                 relativeTo:@"layerA"
                                                  attribute:kCAConstraintMinY
                                                     offset:-10.0]];
 
[layerB addConstraint:[CAConstraint constraintWithAttribute:kCAConstraintMinY
                                                 relativeTo:@"superlayer"
                                                  attribute:kCAConstraintMinY
                                                     offset:+10.0]];
 
[theLayer addSublayer:layerB];

このコードが実行することを以下に示します。

  1. CAConstraintsLayoutManagerのインスタンスを作成し、これをtheLayerlayoutManagerプロパティとして設定します。

  2. CALayer(layerA)のインスタンスを作成し、レイヤのnameプロパティを「layerA」に設定します。

  3. layerAの境界矩形は(0.0,0.0,100.0,25.0)に設定されます。

  4. CAConstraintオブジェクトを作成し、これをlayerAの制約として追加します。

    この制約は、layerAの水平方向の中心をスーパーレイヤの水平方向の中心に合わせます。

  5. 2番目のCAConstraintオブジェクトを作成し、これをlayerAの制約として追加します。

    この制約は、layerAの垂直方向の中心をスーパーレイヤの垂直方向の中心に合わせます。

  6. layerAtheLayerのサブレイヤとして追加します。

  7. CALayer(layerB)のインスタンスを作成し、レイヤのnameプロパティを「layerB」に設定します。

  8. CAConstraintオブジェクトを作成し、これをlayerAの制約として追加します。

    この制約は、layerAの幅に対してlayerBの幅を設定します。

  9. 2番目のCAConstraintオブジェクトを作成し、これをlayerBの制約として追加します。

    この制約は、layerBの水平方向の中心をlayerAの水平方向の中心と同じになるように設定します。

  10. 3番目のCAConstraintオブジェクトを作成し、これをlayerBの制約として追加します。

    この制約は、layerBの上の端をlayerAの下の端より10ポイント下に設定します。

  11. 4番目のCAConstraintオブジェクトを作成し、これをlayerBの制約として追加します。

    この制約は、layerBの下端をスーパーレイヤの下端より10ポイント上に設定します。

!

警告: 制約は、同じ属性の循環参照となるように作成することもできます。レイアウトを算出できない場合の動作は定義されていません。



< 前ページ次ページ > 目次を隠す


Last updated: 2007-12-06




Did this document help you?
Yes: Tell us what works for you.

It’s good, but: Report typos, inaccuracies, and so forth.

It wasn’t helpful: Tell us what would have helped.
Get information on Apple products.
Visit the Apple Store online or at retail locations.
1-800-MY-APPLE

Copyright © 2007 Apple Inc.
All rights reserved. | Terms of use | Privacy Notice