web-dev-qa-db-ja.com

iOS：新しい自動レイアウト制約（高さ）をアニメーション化する方法

以前にautolayout制約を扱ったことはありません。作業中の小さな新しいアプリがありますが、NIBのビューはデフォルトで自動レイアウトになっています。だから、私は機会を使ってwithを使い、これでAppleがどこに行くのかを理解しようと考えました。

最初の課題：

MKMapViewのサイズを変更する必要があり、それを新しい位置にアニメーション化したいと思います。私が慣れている方法でこれを行うと：

[UIView animateWithDuration:1.2f
     animations:^{
         CGRect theFrame = worldView.frame;
         CGRect newFrame = CGRectMake(theFrame.Origin.x, theFrame.Origin.y, theFrame.size.width, theFrame.size.height - 170);
         worldView.frame = newFrame;
}];

...次に、兄弟ビューが更新されると、MKMapViewは元の高さに「スナップ」します（私の場合、UISegmentedControlのタイトルは[myUISegmentedControl setTitle:newTitle forSegmentAtIndex:0]に更新されます）。

だから、私がしたいことはthinkMKMapViewの制約を親ビューの高さに等しくすることから上部の相対に変更することですUISegmentedControlwasが対象：V:[MKMapView]-(16)-[UISegmentedControl]

私が望んでいるのは、MKMapViewの高さを短くして、マップビューの下のいくつかのコントロールが表示されるようにすることです。これを行うには、think固定のフルサイズビューから、下部がUISegmentedControlの上部に制約されるビューに制約を変更する必要があります。そして、ビューが新しいサイズに縮小するときにアニメーション化したいと思います。

これについてはどうすればいいですか？

編集-このアニメーションはnotアニメーションですビューの下部はすぐに170上がりますが：

    [UIView animateWithDuration:1.2f
         animations:^{
             self.nibMapViewConstraint.constant = -170;

    }];

nibMapViewConstraintは、IBで下部の垂直スペース制約に接続されます。

iosuiviewautolayoutnslayoutconstraint
121
Meltemi

制約の更新後：

[UIView animateWithDuration:0.5 animations:^{[self.view layoutIfNeeded];}];

self.viewを、含まれるビューへの参照に置き換えます。

175
Ed McManus

これは私のために機能します（iOS7とiOS8 +の両方）。調整する自動レイアウト制約をクリックします（インターフェイスビルダーで、たとえば、上部の制約）。次に、これをIBOutletにします。

@property (strong, nonatomic) IBOutlet NSLayoutConstraint *topConstraint;

上方向にアニメーション化します。

    self.topConstraint.constant = -100;    
    [self.viewToAnimate setNeedsUpdateConstraints]; 
    [UIView animateWithDuration:1.5 animations:^{
        [self.viewToAnimate layoutIfNeeded]; 
    }];

元の場所に戻るアニメーション

    self.topConstraint.constant = 0;    
    [self.viewToAnimate setNeedsUpdateConstraints];  
    [UIView animateWithDuration:1.5 animations:^{
        [self.viewToAnimate layoutIfNeeded];
    }];
86
DevC

自動レイアウトでアニメーションを使用する方法を説明するApple自体から非常に優れたチュートリアルがあります。これに従ってください リンク そして、「例による自動レイアウト」という名前のビデオを見つけてください。自動レイアウトに関する興味深いものを提供し、最後の部分はアニメーションの使用方法についてです。

11
Glenn

利用可能なこの小さなデモ を作成しました。非常に簡単な例で、自動レイアウト制約をどのように変更してアニメーション化できるかを示しています。 DemoViewController.m を見てください。

3
Jens Schwarzer

ほとんどの人は、自動レイアウトを使用してビューにアイテムをレイアウトし、レイアウト制約を変更してアニメーションを作成します。

多くのコードなしでこれを行う簡単な方法は、ストーリーボードでアニメーション化するUIViewを作成し、UIViewを終了する非表示のUIViewを作成することです。 xcodeのプレビューを使用して、両方のUIViewが目的の場所にあることを確認できます。その後、終了UIViewを非表示にし、レイアウト制約を交換します。

自分で書きたくない場合は、SBPと呼ばれるレイアウト制約を交換するためのポッドファイルがあります。

チュートリアルはこちら 。

1
Arjay Waran

これの代わりにこれ以上の制約のIBOutlet referenceを使用する必要はありません。直接accessまたはupdateが適用済みの制約をProgrammaticallyによって、または KVConstraintExtensionsMaster ライブラリを使用するビューのInterface Builderから適用できます。このライブラリは、CumulativeのNSLayoutConstraint動作も管理しています。

ContainerViewにHeight Constraintを追加するには

 CGFloat height = 200;
 [self.containerView applyHeightConstrain:height];

ContainerViewのHeight Constraintをアニメーションで更新するには

[self.containerView accessAppliedConstraintByAttribute:NSLayoutAttributeHeight completion:^(NSLayoutConstraint *expectedConstraint){
        if (expectedConstraint) {
            expectedConstraint.constant = 100;

            /* for the animation */ 
            [self.containerView  updateModifyConstraintsWithAnimation:NULL];
      }
    }];
0
keshav vishwkarma