icon
icon

XcodeでUIProgressViewを追加する方法【初心者向け】

XcodeのUIパーツの1つである【UIProgressView】を追加する方法を初心者向けに解説した記事です。UIProgressViewを使うと、iPhoneアプリなどに処理の進捗状態をバーで表示させることができます。

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元:GMOリサーチ株式会社 調査期間:2021年8月12日~8月16日  調査対象:2020年8月以降にプログラミングスクールを受講した18~80歳の男女1,000名  調査手法:インターネット調査

iPhoneアプリ開発では、アプリの画面を作るのに便利なUIパーツが多数用意されています。

今回は、XcodeUIProgressView(プログレスビュー)を追加する方法を初心者向けに解説します。

 

なお本記事は、TechAcademyのiPhoneアプリ開発オンラインブートキャンプの内容をもとに紹介しています。

 

UIProgressViewとは

UIProgressViewは処理の進捗状態を表示するバーを管理するクラスで、主としてダウンロードの進捗状況等の表示に用いられます。ユーザーから見ると、処理がどのくらい進んでいるのかわかるので便利です。
XcodeScreenSnapz001

 

 

 

UIProgressViewの生成から非表示まで

他のUIパーツのように、ストーリーボードを使ってドラッグ&ドロップで簡単に作成することができます。

UIProgressView

XcodeScreenSnapz002

 

ただし、その使用目的が処理の進捗状態の表示にあるため、処理が100%になったら消えるといった処理が必要になります。

そのため、UIProgressViewを表示したい場所で以下のようにコードを書く必要があります。

.hファイル

@interface ViewController : UIViewController
{
UIProgressView *progressView;
}

 

.mファイル

progressView = [[UIProgressView alloc] initWithProgressViewStyle:UIProgressViewStyleDefault];
CGSize progressViewSize = progressView.frame.size;
CGSize viewSize = self.view.frame.size;
progressView.frame = CGRectMake((viewSize.width – progressViewSize.width) / 2, (viewSize.height – progressViewSize.height) / 2, progressViewSize.width, progressViewSize.height);
progressView.progress = 0.0;
[self.view addSubview:progressView];

 

このコードを追加することで、処理中はその進捗に応じてprogressView.progressの値を変化させます。このprogressView.progressに設定できる値は0.0f〜1.0fです。

そして処理が完了したら、その通知を受け取った場所で

[progressView removeFromSuperview];

として画面から削除します。

 

また、initWithProgressViewStyleに設定できる値は以下の2つがあります。

1.UIProgressViewStyleDefault
XcodeScreenSnapz001

 

2.UIProgressViewStyleBar
XcodeScreenSnapz002

 

 

[PR] iPhoneアプリの開発で挫折しない学習方法を動画で公開中

UIProgressViewの色の変更

最後にちょっとしたカスタマイズ方法についても紹介します。

進捗を示すバーの色(Tint)やまだ埋まってない部分の色(Track)を変更することができます。変更するには下記のようなコードを追加するだけです。

progressView.progressTintColor = [UIColor redColor];
progressView.trackTintColor = [UIColor blackColor];

 

今回はバーの色(Tint)を赤に、まだ埋まってない部分の色(Track)を黒にしたので、このように表示されます。アプリ全体のデザインに合わせて変更してみてください。

XcodeScreenSnapz003

 

今回の記事は以上です。

ぜひ参考にしてみてください。

 

他のUIパーツを使ってみたい場合は、XcodeでUITextFieldを追加する方法も合わせてご覧ください。

[お知らせ]TechAcademyでは初心者でも8週間でオリジナルアプリが作れるiPhoneアプリ開発オンラインブートキャンプを開催しています。

初心者・未経験でもできる。まずはテックアカデミーに相談しよう

プログラミングを独学で学習していて、このように感じた経験はないでしょうか?

  • ・調べてもほしい情報が見つからない
  • ・独学のスキルが実際の業務で通用するのか不安
  • ・目標への学習プランがわからず、迷子になりそう

テックアカデミーでは、このような 学習に不安を抱えている方へ、マンツーマンで相談できる機会を無料で提供 しています。
30分間、オンラインでどんなことでも質問し放題です。

「受けてよかった」と感じていただけるよう カウンセラーやエンジニア・デザイナー があなたの相談に真摯に向き合います。

「自分に合っているか診断してほしい」
「漠然としているが話を聞いてみたい」

こんなささいな悩みでも大丈夫です。

無理な勧誘は一切ありません ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。(1週間限定)

今なら参加者限定の割引特典付き! 無料相談を予約する