自動レイアウトが使用されているときに、CALayerのアンカーポイントを調整するにはどうすればよいですか？
注：この質問が尋ねられて以来、事態は続いています。最近の概要については here をご覧ください。
自動レイアウトの前に、フレームを保存し、アンカーポイントを設定し、フレームを復元することにより、ビューを移動せずにビューのレイヤーのアンカーポイントを変更できます。
自動レイアウトの世界では、フレームを設定しなくなりましたが、ビューの位置を目的の場所に戻すというタスクの制約はありません。制約をハックしてビューの位置を変更できますが、回転やその他のサイズ変更イベントでは、これらは再び無効になります。
次の明るいアイデアは、「レイアウト属性の無効なペア（左と幅）」を作成するため、機能しません。
layerView.layer.anchorPoint = CGPointMake(1.0, 0.5);
// Some other size-related constraints here which all work fine...
[self.view addConstraint:
[NSLayoutConstraint constraintWithItem:layerView
attribute:NSLayoutAttributeLeft
relatedBy:NSLayoutRelationEqual
toItem:layerView
attribute:NSLayoutAttributeWidth
multiplier:0.5
constant:20.0]];
ここでの私の意図は、layerViewの左端、アンカーポイントが調整されたビューを、幅の半分に20を加えた値（スーパービューの左端から挿入したい距離）に設定することでした。
自動レイアウトでレイアウトされたビューで、ビューの場所を変更せずにアンカーポイントを変更することは可能ですか？ハードコードされた値を使用し、回転ごとに制約を編集する必要がありますか？しないことを願っています。
ビューに変換を適用したときに正しい視覚効果が得られるように、アンカーポイントを変更する必要があります。
[編集：警告：その後の議論全体は、iOS 8によって時代遅れになるか、少なくとも大幅に緩和される可能性があります。これにより、ビュー変換が適用されたときにレイアウトのトリガーを間違えることがなくなります。]
自動レイアウトとビュー変換
自動レイアウトは、ビューの変換ではまったく機能しません。私が認識できる限り、その理由は、トランスフォーム（デフォルトのIDトランスフォーム以外）を持つビューのフレームを台無しにすることは想定されていないからですが、それがまさにオートレイアウトの機能です。自動レイアウトが機能する方法は、layoutSubviewsでランタイムがすべての制約を駆け巡り、それに応じてすべてのビューのフレームを設定することです。
つまり、制約は魔法ではありません。それらはただのやることリストです。 layoutSubviewsは、To Doリストを作成する場所です。そして、フレームを設定することでそれを行います。
これをバグと見なすことはできません。この変換をビューに適用する場合：
v.transform = CGAffineTransformMakeScale(0.5,0.5);
ビューの中心が以前と同じ場所に半分のサイズで表示されることを期待しています。しかし、その制約に応じて、それは私がまったく見ないものかもしれません。
[実際、ここで2つ目の驚きがあります。ビューに変換を適用すると、すぐにレイアウトがトリガーされます。これは私には別のバグのようです。または、おそらくそれが最初のバグの中心です。私が期待するのは、少なくともレイアウト時間まで、変換で逃げることができることです。デバイスが回転します-ちょうどレイアウト時までフレームアニメーションを回避できるように。しかし、実際にはレイアウト時間はすぐに始まります。これは間違っているようです。]
解決策1：制約なし
現在の解決策の1つは、ビューに半永久的な変換を適用し（何らかの理由で一時的に単に振るのではなく）、ビューに影響するすべての制約を削除する場合です。残念ながら、これは通常、自動レイアウトがまだ行われているため、画面からビューが消える原因になります。現在、ビューを配置する場所を示す制約はありません。そのため、制約を削除することに加えて、ビューのtranslatesAutoresizingMaskIntoConstraintsをYESに設定します。ビューは古い方法で動作するようになり、自動レイアウトの影響を実質的に受けません。 （明らかにisは自動レイアウトの影響を受けますが、暗黙的な自動サイズ変更マスク制約により、その動作は自動レイアウト前とまったく同じになります。）
解決策2：適切な制約のみを使用する
それが少し極端に思える場合、別の解決策は、意図した変換で正しく機能するように制約を設定することです。たとえば、ビューが純粋に内部の固定幅と高さによってサイズ調整され、純粋に中心によって配置される場合、スケール変換は期待どおりに機能します。このコードでは、サブビューの既存の制約（otherView）を削除し、これらの4つの制約に置き換えて、幅と高さを固定し、純粋に中心で固定します。その後、私のスケール変換は機能します：
NSMutableArray* cons = [NSMutableArray array];
for (NSLayoutConstraint* con in self.view.constraints)
if (con.firstItem == self.otherView || con.secondItem == self.otherView)
[cons addObject:con];
[self.view removeConstraints:cons];
[self.otherView removeConstraints:self.otherView.constraints];
[self.view addConstraint:
[NSLayoutConstraint constraintWithItem:self.otherView attribute:NSLayoutAttributeCenterX relatedBy:0 toItem:self.view attribute:NSLayoutAttributeLeft multiplier:1 constant:self.otherView.center.x]];
[self.view addConstraint:
[NSLayoutConstraint constraintWithItem:self.otherView attribute:NSLayoutAttributeCenterY relatedBy:0 toItem:self.view attribute:NSLayoutAttributeTop multiplier:1 constant:self.otherView.center.y]];
[self.otherView addConstraint:
[NSLayoutConstraint constraintWithItem:self.otherView attribute:NSLayoutAttributeWidth relatedBy:0 toItem:nil attribute:0 multiplier:1 constant:self.otherView.bounds.size.width]];
[self.otherView addConstraint:
[NSLayoutConstraint constraintWithItem:self.otherView attribute:NSLayoutAttributeHeight relatedBy:0 toItem:nil attribute:0 multiplier:1 constant:self.otherView.bounds.size.height]];
結果は、ビューのフレームに影響する制約がない場合、自動レイアウトはビューのフレームに触れないということです。これは、トランスフォームが関係するときに必要なことです。
解決策3：サブビューを使用する
上記の両方のソリューションの問題は、ビューを配置するための制約の利点を失うことです。そこで、これを解決するソリューションがあります。ジョブがホストとしてのみ機能する非表示のビューから開始し、制約を使用して配置します。その中に、実際のビューをサブビューとして配置します。制約を使用して、ホストビュー内にサブビューを配置しますが、変換を適用するときに反発しない制約に制限します。
以下に例を示します。
白いビューはホストビューです。あなたはそれが透明であり、それゆえ目に見えないふりをすることになっています。赤いビューはそのサブビューであり、その中心をホストビューの中心に固定して配置されます。これで、問題なく中央を中心に赤いビューを拡大縮小および回転できるようになりました。実際に、図はそれを行ったことを示しています。
self.otherView.transform = CGAffineTransformScale(self.otherView.transform, 0.5, 0.5);
self.otherView.transform = CGAffineTransformRotate(self.otherView.transform, M_PI/8.0);
一方、ホストビューの制約は、デバイスを回転するときに適切な場所に保持します。
解決策4：代わりにレイヤー変換を使用する
ビュー変換の代わりに、レイヤー変換を使用します。これは、レイアウトをトリガーせず、制約とすぐに競合することはありません。
たとえば、この単純な「ドキドキ」ビューアニメーションは、自動レイアウトの下で壊れる可能性があります。
[UIView animateWithDuration:0.3 delay:0
options:UIViewAnimationOptionAutoreverse
animations:^{
v.transform = CGAffineTransformMakeScale(1.1, 1.1);
} completion:^(BOOL finished) {
v.transform = CGAffineTransformIdentity;
}];
最終的にはビューのサイズに変化はありませんでしたが、そのtransformを設定するだけでレイアウトが発生し、制約によってビューが飛び回ることがあります。 （これはバグのように感じますか？）しかし、Core Animationで同じこと（CABasicAnimationを使用してアニメーションをビューのレイヤーに適用する）を行うと、レイアウトは発生せず、正常に機能します。
CABasicAnimation* ba = [CABasicAnimation animationWithKeyPath:@"transform"];
ba.autoreverses = YES;
ba.duration = 0.3;
ba.toValue = [NSValue valueWithCATransform3D:CATransform3DMakeScale(1.1, 1.1, 1)];
[v.layer addAnimation:ba forKey:nil];
私は同様のIsuueを持っていて、AppleのAutolayout TeamからBackを聞いたばかりです。彼らは、マットが提案するコンテナビューアプローチを使用することを提案しますが、layoutSubviewsを上書きし、そこにカスタムレイアウトコードを適用するためにUIViewのサブクラスを作成します-それは魅力のように動作します
ヘッダーファイルはそのように見えるため、Interface Builderから選択したサブビューを直接リンクできます。
#import <UIKit/UIKit.h>
@interface BugFixContainerView : UIView
@property(nonatomic,strong) IBOutlet UIImageView *knobImageView;
@end
そしてmファイルはそのような特別なコードを適用します：
#import "BugFixContainerView.h"
@implementation BugFixContainerView
- (void)layoutSubviews
{
static CGPoint fixCenter = {0};
[super layoutSubviews];
if (CGPointEqualToPoint(fixCenter, CGPointZero)) {
fixCenter = [self.knobImageView center];
} else {
self.knobImageView.center = fixCenter;
}
}
@end
ご覧のとおり、最初に呼び出されたときにビューの中心点を取得し、それに応じてビューを配置するために、以降の呼び出しでその位置を再利用します。これは、[スーパーレイアウトサブビュー]の後に行われるという意味で、自動レイアウトコードを上書きします。自動レイアウトコードが含まれています。
このように、自動レイアウトを回避する必要はなくなりましたが、デフォルトの動作が適切でなくなったときに独自の自動レイアウトを作成できます。もちろん、その例にあるものよりもはるかに複雑なものを適用することができますが、私のアプリはポートレートモードしか使用できないため、これが必要でした。
簡単な方法を見つけました。また、iOS 8およびiOS 9で動作します。
フレームベースのレイアウトを使用するときにanchorPointを調整するように：
let oldFrame = layerView.frame
layerView.layer.anchorPoint = newAnchorPoint
layerView.frame = oldFrame
自動レイアウトでビューのアンカーを調整する場合、同じ方法を使用しますが、制約があります。 anchorPointが（0.5、0.5）から（1、0.5）に変わると、layerViewはビュー幅の長さの半分の距離だけ左に移動するため、これを補正する必要があります。
私は質問の制約を理解していませんので、定数を使用してsuperView centerXに相対的なcenterX制約を追加すると仮定します：layerView.centerX = superView.centerX + constant
layerView.layer.anchorPoint = CGPoint(1, 0.5)
let centerXConstraint = .....
centerXConstraint.constant = centerXConstraint.constant + layerView.bounds.size.width/2
自動レイアウトを使用している場合、手動レイアウトの位置が長期的にどのように役立つかはわかりません。最終的に自動レイアウトは、独自のレイアウトを計算するときに設定した位置値を上書きするためです。
むしろ、必要なのは、アンカーポイントを設定することによって生じる変更を補正するためにレイアウト制約自体を変更することです。次の関数は、変換されていないビューに対してそれを行います。
/**
Set the anchorPoint of view without changing is perceived position.
@param view view whose anchorPoint we will mutate
@param anchorPoint new anchorPoint of the view in unit coords (e.g., {0.5,1.0})
@param xConstraint an NSLayoutConstraint whose constant property adjust's view x.center
@param yConstraint an NSLayoutConstraint whose constant property adjust's view y.center
As multiple constraints can contribute to determining a view's center, the user of this
function must specify which constraint they want modified in order to compensate for the
modification in anchorPoint
*/
void SetViewAnchorPointMotionlesslyUpdatingConstraints(UIView * view,CGPoint anchorPoint,
NSLayoutConstraint * xConstraint,
NSLayoutConstraint * yConstraint)
{
// assert: old and new anchorPoint are in view's unit coords
CGPoint const oldAnchorPoint = view.layer.anchorPoint;
CGPoint const newAnchorPoint = anchorPoint;
// Calculate anchorPoints in view's absolute coords
CGPoint const oldPoint = CGPointMake(view.bounds.size.width * oldAnchorPoint.x,
view.bounds.size.height * oldAnchorPoint.y);
CGPoint const newPoint = CGPointMake(view.bounds.size.width * newAnchorPoint.x,
view.bounds.size.height * newAnchorPoint.y);
// Calculate the delta between the anchorPoints
CGPoint const delta = CGPointMake(newPoint.x-oldPoint.x, newPoint.y-oldPoint.y);
// get the x & y constraints constants which were contributing to the current
// view's position, and whose constant properties we will Tweak to adjust its position
CGFloat const oldXConstraintConstant = xConstraint.constant;
CGFloat const oldYConstraintConstant = yConstraint.constant;
// calculate new values for the x & y constraints, from the delta in anchorPoint
// when autolayout recalculates the layout from the modified constraints,
// it will set a new view.center that compensates for the affect of the anchorPoint
CGFloat const newXConstraintConstant = oldXConstraintConstant + delta.x;
CGFloat const newYConstraintConstant = oldYConstraintConstant + delta.y;
view.layer.anchorPoint = newAnchorPoint;
xConstraint.constant = newXConstraintConstant;
yConstraint.constant = newYConstraintConstant;
[view setNeedsLayout];
}
通常、anchorPointを変更する唯一の理由は変換を設定することであるため、これはおそらくあなたが望んでいたすべてではないことを認めます。それには、変換プロパティ自体によって引き起こされる可能性のあるフレームの変更をall反映するためにレイアウト制約を更新するより複雑な関数が必要になります。変換はフレームに対して多くのことができるため、これは注意が必要です。スケーリングまたは回転変換はフレームを大きくするので、幅や高さの制約などを更新する必要があります。
一時的なアニメーションにトランスフォームのみを使用している場合は、自動レイアウトによって飛行中のアニメーションが制約の純粋に一時的な違反を表す画像を表示できないとは思わないため、上記で十分です。
tl：dr：制約の1つにアウトレットを作成して、削除して再度追加できるようにすることができます。
新しいプロジェクトを作成し、中央に固定サイズのビューを追加しました。制約は下の画像に示されています。
次に、回転しようとするビューと、中心のx位置合わせ制約用のアウトレットを追加しました。
@property (weak, nonatomic) IBOutlet UIView *rotatingView;
@property (weak, nonatomic) IBOutlet NSLayoutConstraint *xAlignmentContstraint;
後でviewDidAppearで新しいアンカーポイントを計算します
UIView *view = self.rotatingView;
CGPoint rotationPoint = // The point I'm rotating around... (only X differs)
CGPoint anchorPoint = CGPointMake((rotationPoint.x-CGRectGetMinX(view.frame))/CGRectGetWidth(view.frame),
(rotationPoint.y-CGRectGetMinY(view.frame))/CGRectGetHeight(view.bounds));
CGFloat xCenterDifference = rotationPoint.x-CGRectGetMidX(view.frame);
view.layer.anchorPoint = anchorPoint;
次に、アウトレットがある制約を削除し、オフセットされた新しい制約を作成して、再度追加します。その後、変更された制約を持つビューに、制約を更新する必要があることを伝えます。
[self.view removeConstraint:self.xAlignmentContstraint];
self.xAlignmentContstraint = [NSLayoutConstraint constraintWithItem:self.rotatingView
attribute:NSLayoutAttributeCenterX
relatedBy:NSLayoutRelationEqual
toItem:self.view
attribute:NSLayoutAttributeCenterX
multiplier:1.0
constant:xDiff];
[self.view addConstraint:self.xAlignmentContstraint];
[self.view needsUpdateConstraints];
最後に、回転アニメーションを回転ビューに追加します。
CABasicAnimation *rotate = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];
rotate.toValue = @(-M_PI_2);
rotate.autoreverses = YES;
rotate.repeatCount = INFINITY;
rotate.duration = 1.0;
rotate.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
[view.layer addAnimation:rotate forKey:@"myRotationAnimation"];
回転レイヤーは、デバイスを回転させたり、制約を更新したりする場合でも、中心にとどまるように見えます（そうする必要があります）。新しい制約と変更されたアンカーポイントは、視覚的に互いに相殺します。
マットの答えに触発され、私は別のアプローチを試すことにしました。制約が適切に適用されたコンテナビューを使用できます。アンカーポイントが変更されたビューは、コンテナビュー内に配置できます。これは、古き悪しき時代のように、自動サイズ変更マスクと明示的なフレーム設定を使用します。
とにかく私の状況では、それは治療になります。ビューは、viewDidLoadでここに設定されます。
- (void)viewDidLoad
{
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
UIView *redView = [UIView new];
redView.translatesAutoresizingMaskIntoConstraints = NO;
redView.backgroundColor = [UIColor redColor];
[self.view addSubview:redView];
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"|-[redView]-|" options:0 metrics:nil views:NSDictionaryOfVariableBindings(redView)]];
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-[redView]-|" options:0 metrics:nil views:NSDictionaryOfVariableBindings(redView)]];
self.redView = redView;
UIView *greenView = [UIView new];
greenView.autoresizingMask = UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleWidth;
greenView.layer.anchorPoint = CGPointMake(1.0, 0.5);
greenView.frame = redView.bounds;
greenView.backgroundColor = [UIColor greenColor];
[redView addSubview:greenView];
self.greenView = greenView;
CATransform3D perspective = CATransform3DIdentity;
perspective.m34 = 0.005;
self.redView.layer.sublayerTransform = perspective;
}
緑のビューの自動サイズ変更マスクにより、この時点で赤のビューのフレームがゼロであっても問題ありません。
アクションメソッドに回転変換を追加した結果、次のようになりました。
デバイスの回転中にそれ自体を失うように見えたので、これをviewDidLayoutSubviewsメソッドに追加しました。
-(void)viewDidLayoutSubviews
{
[super viewDidLayoutSubviews];
[CATransaction begin];
[CATransaction setDisableActions:YES];
CATransform3D transform = self.greenView.layer.transform;
self.greenView.layer.transform = CATransform3DIdentity;
self.greenView.frame = self.redView.bounds;
self.greenView.layer.transform = transform;
[CATransaction commit];
}
私の現在の解決策は、viewDidLayoutSubviewsでレイヤーの位置を手動で調整することです。このコードは、ビューサブクラスのlayoutSubviewsでも使用できますが、私の場合、ビューはView Controller内のトップレベルビューであるため、UIViewサブクラスを作成する必要はありませんでした。
あまりにも多くの努力のように思えるので、他の答えは大歓迎です。
-(void)viewDidLayoutSubviews
{
for (UIView *view in self.view.subviews)
{
CGPoint anchorPoint = view.layer.anchorPoint;
// We're only interested in views with a non-standard anchor point
if (!CGPointEqualToPoint(CGPointMake(0.5, 0.5),anchorPoint))
{
CGFloat xDifference = anchorPoint.x - 0.5;
CGFloat yDifference = anchorPoint.y - 0.5;
CGPoint currentPosition = view.layer.position;
// Use transforms if we can, otherwise manually calculate the frame change
// Assuming a transform is in use since we are changing the anchor point.
if (CATransform3DIsAffine(view.layer.transform))
{
CGAffineTransform current = CATransform3DGetAffineTransform(view.layer.transform);
CGAffineTransform invert = CGAffineTransformInvert(current);
currentPosition = CGPointApplyAffineTransform(currentPosition, invert);
currentPosition.x += (view.bounds.size.width * xDifference);
currentPosition.y += (view.bounds.size.height * yDifference);
currentPosition = CGPointApplyAffineTransform(currentPosition, current);
}
else
{
CGFloat transformXRatio = view.bounds.size.width / view.frame.size.width;
if (xDifference < 0)
transformXRatio = 1.0/transformXRatio;
CGFloat transformYRatio = view.bounds.size.height / view.frame.size.height;
if (yDifference < 0)
transformYRatio = 1.0/transformYRatio;
currentPosition.x += (view.bounds.size.width * xDifference) * transformXRatio;
currentPosition.y += (view.bounds.size.height * yDifference) * transformYRatio;
}
view.layer.position = currentPosition;
}
}
}
その方法で自動レイアウトの目的を無効にしていると思います。幅と右端はスーパービューに依存しているとおっしゃいましたが、その考え方に沿って制約を追加するだけではどうですか？
AnchorPoint/transformパラダイムを失い、試してください：
[self.view addConstraint:
[NSLayoutConstraint constraintWithItem:layerView
attribute:NSLayoutAttributeRight
relatedBy:NSLayoutRelationEqual
toItem:self.view
attribute:NSLayoutAttributeWidth
multiplier:1.0f
constant:-somePadding]];
[self.view addConstraint:
[NSLayoutConstraint constraintWithItem:layerView
attribute:NSLayoutAttributeWidth
relatedBy:NSLayoutRelationEqual
toItem:someViewWeDependTheWidthOn
attribute:NSLayoutAttributeWidth
multiplier:0.5f // because you want it to be half of someViewWeDependTheWidthOn
constant:-20.0f]]; // your 20pt offset from the left
NSLayoutAttributeRight制約はanchorPoint = CGPointMake(1.0, 0.5)とまったく同じ意味であり、NSLayoutAttributeWidth制約は以前のコードのNSLayoutAttributeLeftとほぼ同等です。
これは大きなトピックであり、すべてのコメントを読んだわけではありませんが、同じ問題に直面していました。
自動レイアウトを使用してXIBからビューを取得しました。そして、その変換プロパティを更新したかった。ビューをコンテナビューに埋め込んでも、自動レイアウトがコンテナビューで奇妙に動作していたため、私の問題は解決しません。そのため、2番目のコンテナービューを追加して、自分のビューを含むコンテナービューを格納し、それに変換を適用しました。
この質問と回答は、スクロールビューでの自動レイアウトとスケーリングの問題を解決するきっかけになりました。 githubでソリューションの例を作成しました。
https://github.com/hansdesmedt/AutoLayout-scrollview-scale
これは、AutoLayoutで完全に作成されたカスタムページングを使用したUIScrollViewの例であり、長押ししてタップしてズームすることでスケーラブル（CATransform3DMakeScale）です。 iOS 6および7互換。
tl; drアンカーポイントを（0、0）に変更したとしましょう。アンカーポイントが左上になりました。自動レイアウトでWord centerが表示される場合は、左上と考える必要があります。
AnchorPointを調整するときは、AutoLayoutのセマンティクスを変更するだけです。自動レイアウトは、anchorPointに干渉したり、その逆を行うことはありません。これを理解していない場合、あなたは悪い時間を過ごすことになります。
例：
図A. アンカーポイントの変更なし
#Before changing anchor point to top-left
view.size == superview.size
view.center == superview.center
図B. アンカーポイントを左上に変更
view.layer.anchorPoint = CGPointMake(0, 0)
view.size == superview.size
view.center == superview.topLeft <----- L0-0K, center is now top-left
図Aと図Bはまったく同じに見えます。何も変わっていません。 centerが参照するものの定義が変更されました。