タイトルがちょっと長いですがタイトルの通りです。

そして前回からかなーーーり時間が空いてしまいました。

ダウンロードの進捗を表したりするときにiOSではProgressViewを使いますが、このProgressViewをそのまま使おうとするとあまりに細すぎるため、よく高さを変更したいという要望を受けます。高さを変更する方法をググったりすると、だいたいCGAffinTransformScaleなんかを使って、高さのスケールを変更して対応するのをよく見かけます。

しかし、この方法ですとStoryboard上では細いままで、実機やシュミレータで動作させるまでデザインがわからない上に、拡大率をしていしなければならないため、直感的に値を指定しづらいです。

そこで、今回はStoryboard上で、ProgressViewの高さを変更する方法を書いていきます。

Autolayoutの制約

まずとりあえずViewの中心にProgressViewを置いてみました。これだけだと横幅が決まっていないのでエラーがでています。

　次に、横幅のピクセルサイズと高さのピクセルサイズのアスペクト比を設定します。今回は横幅240px高さ12pxにしようと思うので、240:12を指定します。

これでアスペクト比は設定できましたが、高さが強制的に2に指定されているため、横幅が40になってしまいました。

そこで、横幅を指定する制約をつけてあげれば、横幅と高さを思ったサイズにすることが出来ます。ちなみに、画面サイズに依存しないようにするには、普通にwidthの制約をつけ、画面サイズに応じて拡縮させたい場合は、親のViewに対してEqual Widthの制約をつけ、Multiplierに240:375等設定すれば、画面サイズに応じて拡縮してくれます。

これで高さを増やすことができましたが、ProgressViewの見た目はかわっておらず、実機で起動したときに初めてちゃんとした見た目になります。

Storyboard上で完璧に見た目を表示するためには、カスタムクラスを作成する必要があります。

ProgressViewのカスタムクラス

コードはこのようになります。要@IBDesignableをつけて、drawを呼び出せばいいだけです。

するとStoryboardの見た目がこのようになり、ProgressViewが真っ白になります。これはProgressViewのProgress TintとTrack TintがDefaultなためで、Progress Tintだけでも指定すれば色がちゃんと表示されます。

おわりに

今回はProgressViewを、Storyboard上で変化させる方法を書いてみました。割りと裏技てきな感じで設定できたような感じです。ProgressViewのカスタムクラスは角を丸くしたりするときにも使うので、合わせてそちらも一緒に書いちゃえばそれも見た目が反映されます。

ちなみにこれを作ったのは2016年の11月くらいだったのですが、同じプロジェクトの人にこれどーやったんねんって言われてさっぱり思い出せなかったので、今回備忘録てきにも書いてみました。

最近はMetalを触ってぐりぐり動かしたりLiquidFunをoFに移植したりと色々変なことをやってるので、落ち着いてきたらそこら辺も記事にしようかなと思います。

では、また。