【iOS7】UIProgressViewの高さが変更されて起きたレイアウト崩れを直したよ

　９月にはリリースされるのでは噂で持ちきりのiOS7。すでに、大きく変わったUI系のデザインは公表されていて、なんだかドキドキワクワクしてしまいます。

　開発者としては当然、iOS7に乗り換えて行くわけですが、プログレスバーがフラットデザインに仕様変更され、レイアウトが崩れてしまいました。マニュアルを読んでもなにが変わったのかわからず、あたふたしたのでメモしておきます。

　実は、試したら単純明快だったのですが….

　UIProgessViewの高さを変える時に

progressView.transform = CGAffineTransformMakeScale( 1.0f, 1.4f );

1	progressView.transform = CGAffineTransformMakeScale( 1.0f, 1.4f );

　と「CGAffineTransformMakeScale」で高さの倍率を変更されている人も多いかと思います。

　もちろん、私もその一人。ところが、iOS7では極端に細くなり、下に隠れていたものが見えてダサい感じになってしまいました。

　調べた結果、単純に iOS6 までは heightプロパティのデフォルトが「9」だったのに対して、iOS7では「2」に変わっているだけの話でした。私の場合は1.4倍にしていたので、「2」が「2.8」となります。実際に表示する際にはiOS側で「2」に丸められていて「CGAffineTransformMakeScale」が機能していないと早とちりしてしまっていました。

　修正は方法は、iOS7ではiOS6までの高さをさらに4.5倍拡大してやる必要があります。

　~~まだ、最終のコードを試せてないのですが（あとで試します）~~修正方法は二通りでしょうか。高さを12px(ぐらい)にしたい場合に関しての実装例を書いておきましょう。
　

１．iOS7 以降だったらさらに4.5倍する
２．UIProgressView.frame.size.height の数値から倍率を出す。

　では、１．の実装例 (UIProgressViewの実体をprogressViewとします)

// iOS6までの倍率を設定
float xHeight = 1.4f;
// iOSのバージョンを取得
float iOSVersion = [[[UIDevice currentDevice] systemVersion] floatValue];
if(iOSVersion >= 7.0) {
	// 7以降ならさらに4.5倍
	xHeight *= 4.5f;
}
progressView.transform = CGAffineTransformMakeScale( 1.0f, xHeight );

// iOS6までの倍率を設定

float xHeight = 1.4f;

// iOSのバージョンを取得

float iOSVersion = [[[UIDevice currentDevice] systemVersion] floatValue];

if(iOSVersion >= 7.0) {

// 7以降ならさらに4.5倍

xHeight *= 4.5f;

}

progressView.transform = CGAffineTransformMakeScale( 1.0f, xHeight );

　そして、２．の実装例 (UIProgressViewの実体をprogressViewとします)

float h = 12.0f;
progressView.transform = CGAffineTransformMakeScale( 1.0f, h / progressView.frame.size.height );

1 2	float h = 12.0f; progressView.transform = CGAffineTransformMakeScale( 1.0f, h / progressView.frame.size.height );

　断然、２．ですかね。if文は少ないにこしたことありませんから。あと。１．はきちんと計算しないと誤差の影響が出るかもしれません。

追記 2013.9.2

　実のところ、center.yプロパティの数値も変わっていて少しややこしい感じです。VIewの高さが変わっているので当然なのかもしれません。高さが、7 減少したので、center.yはその半分、3.5 ずれます。

　最終的にはこんなソースになりました。ちょっと無理矢理っぽい。

float rev_y = (9 - self.frame.size.height) / 2;
self.center = CGPointMake(self.center.x, self.center.y + rev_y);
float xh =4.0f;
self.transform = CGAffineTransformMakeScale( 1.0f, xh / self.frame.size.height );