【Swift】進捗バーを簡単に表示するには？ |棒グラフイメージ

Question

こんばんわ
左側の画像のように、進捗により増減する進捗バーを作成したいのですが、
やり方がわからず、、右側のようにViewを重ねることで作成できないかと思っております。

この方法で問題がないかどうか、
もっとスマートな方法はないか
もしご存知でしたら何かしらアドバイスをいただけないでしょうか。

よろしくおねがいします。

Comments

[fuzzball]

左側の画像には、進捗バーが2種類あるように見えるのですが、奥の方の進捗バーについての質問でしょうか？

[HNSZ]

fuzzball様　分かりづらくすいません。左側最下部の進捗バー(7.26倍表記)をイメージしております。

[fuzzball]

すみません、分かりません。左側の画像では、両端が丸いバー（薄い青色が進捗？）と、四角いバー（バーそのものが進捗）の2つあるように見えるのですが、どちらのバーについての質問なのでしょうか？と聞いています。

[HNSZ]

fuzzball様　度々申し訳ございません！　両端が丸いバー（薄い青色が進捗となります！）でございます。　丸くする等、細部が困難な場合には一旦飛ばし、とりあえず表記できることを優先で進めたいと思っています。

Answer 1

ぱっと思いつく方法は

1. ビューを重ねる(2つのビューを同じ親に置く)
2. サブビューを追加する(背景のビューに値のビューを子として入れる)
3. ビューにサブレイヤーを追加する(2のレイヤーバージョン)
4. drawRectで自前で描画する

くらいでしょうか。
用途が合えばどれでもいいと思いますが、1はクラス化しにくいので良くないと思います。

Comments

[fuzzball]

両側を丸くしたいようなので2番が良さそうですね。

>>HNSZさん
背景Viewを角丸にして clipsToBounds = true にしておけば、上に乗せたViewの両端も丸く切り取られます。

[HNSZ]

fuzzball様
toki_td様

ご丁寧にありがとうございます！とても参考になりました。
「背景Viewを角丸にして clipsToBounds = true 」の方法にて進めたいと思います！

Answer 2

私なら同じ方法をとります
複数箇所で使う場合はCustomViewにします

その場合、UIProgressViewを参考にprogressというパラメータを作り
progressを設定したら進捗が変わるようにします
少し引っかかりそうなのは、枠は内枠にできないってくらいです（枠線と中の色が異なる場合）

Comments

[HNSZ]

kosanai様
ご丁寧にありがとうございます！
ご指摘の色の部分まで気が回っていませんでした。。
調整しながら進めていきたいと思います。

ProgressViewの存在を知らなかったので助かりました。
利用いたします。

[kosanai]

UIProgressViewは高さが変えられないので、他の方も結局カスタムViewつかってるみたいですね。UIProgressViewは分かりやすいところだと、WebViewの読み込みでよく見ます。NavigationBarの下によく配置されています。

[HNSZ]

kosanai様
>WebViewの読み込みでよく見ます。NavigationBarの下によく配置されています。
普段気にすることなく見逃してましたが、いろいろ便利に使われてるんですね。
一旦(通常の？)UIViewで実装できました。
色々とありがとうございました。