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

Pocket

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

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

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

 UIProgessViewの高さを変える時に

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

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

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

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

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

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

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

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

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

追記 2013.9.2

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

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

 なんにしても、iOS7では角丸がないので、別のフレームワークに乗り換えるかも含めて検討です。角丸をだす方法があるのかなぁ…

 12月15日追記
 自前のプログレスバーライブラリを作成いたしました。よろしければご利用ください。

 おわり

Pocket

One Responseso far.

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

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


*