Developer's Blog

UIView を簡単に拡大・縮小・回転させる transform プロパティ

UIView には、transform というプロパティがあります。このプロパティを使うと簡単に UIView を拡大・縮小・回転させることができます。transform プロバティの型は CGAffineTransform です。transform の中身は 3×3 の行列で、 z 軸の回転行列として扱うことができます。初期値は、単位行列になっています。

拡大・縮小について

まずは拡大・縮小から説明します。

sampleView.transform = CGAffineTransformMakeScale(2, 2);

このように書くと元のサイズの2倍と大きさになります。
また、以下のように書くと現在設定しているサイズの2倍になります。

sampleView.transform = CGAffineTransformScale(sampleView.transform, 2, 2);

この2つを連続して書くと元の大きさの4倍の大きさになります。

この拡大縮小させるメソッドを利用して、上下の反転と左右の反転をさせることもできます。
View を上下反転させる場合は

sampleView.transform = CGAffineTransformScale(sampleView.transform, 1, -1);

と書き、左右反転させる場合は

sampleView.transform = CGAffineTransformScale(sampleView.transform, -1, 1);

と書きます。

回転について

次に回転について説明します。

sampleView.transform = CGAffineTransformMakeRotation(M_PI/2);

このように書くと元の角度から時計回りに90度回転します。
また、以下のように書くと現在設定している角度から時計回りに90度回転します。

sampleView.transform = CGAffineTransformRotate(sampleView.transform, M_PI/2);

CGAffineTransformInvert メソッドについて

また、 CGAffineTransform には CGAffineTransformInvert というメソッドがあります。これは、以下のように書くと sampleView.transform の逆行列を返します。

sampleView.transform = CGAffineTransformInvert(sampleView.transform);

transform が初期値の場合は特に何もおきませんが、拡大した後に使用すると拡大した倍率で縮小されます。(例えば2倍した後に使用するとサイズは0.5倍になる。)回転の場合は θ 回転させた後に使用すると -θ 回転させたことと同じになります。

例えば以下のように書くとこのメソッドが呼ばれたときに元のサイズだと2倍のサイズになり、2倍のサイズだと元のサイズになります。

- (void) scaleChange {
    sampleView.transform = CGTransformScale(sampleView.transfom, 0.5, 0.5);
    sampleView.transform = CGTransformInvert(sampleView.transform);
}

初期値に戻す

拡大・縮小・回転をさせた後に元に戻したいときは、

sampleView.transform = CGTransformIsIdentity;

とすると元に戻ります。

transform プロパティを使用するときの注意事項

transform プロパティを使用する際には、 transform プロバティが初期値以外のときに frame プロパティが正常な値になっていないので、注意が必要です。 transform プロバティを使用している View の位置を知りたいときは、 center プロバティを使用しましょう。

Copyright © 2019 Fenrir Inc. All rights reserved.