イメージビューにURLを指定して画像を表示する【Swift低空飛行ガイド】

f_f_business_31_s128_f_business_31_2bg

スポンサーリンク

はじめに

 

iPhone用のアプリで表示される画像データは、ロゴのようにいつも同じものを使う場合であれば先にアプリ内に登録しておけばすぐに取り出して使うことができます。しかし、ニュースの記事に使われる画像のようにコロコロを変わるものであれば予め登録できないので、インターネット上にあるデータを取ってきて画面に表示するようにしなければなりません。

その時のやり方をいつも忘れてしまうので、今回は自分用のメモ的な意味合いも込めてurlで指定した画像をアプリ内で表示するための方法をご紹介します。

 

学べること

  • 指定したURLにある画像を、アプリの中で表示する

 

はじめましょう!

プロジェクトの新規作成

まずはプロジェクトを新規作成します。名前は「UrlImageSample」としておきましょう。テンプレートは「Single View Application」を選択してください。Core Dataのチェックも不要です。手順の詳細は以下をご参照ください。

「基礎手順:プロジェクトの新規作成」

 

オブジェクトの作成

イメージビューの配置

post-727_01最初にイメージビューを作成します。Imege Viewをドラッグしてストーリーボード上に配置します。あとは位置とサイズを下記のように調整しておきましょう。幅と高さは今回使用するロゴの大きさに合わせているだけです。

X=16
Y=20
Width=213
Height=55

 

イメージビューのアウトレット接続

次に、今作成したイメージビューをプログラムで制御できるようにアウトレット接続しておきます。アウトレット名は「imgLogo」としておきましょう。

アウトレット接続作成の詳細は以下をご参照ください。

「基礎手順:アウトレット接続」

 

最後にコーディング

最後に少しだけコーディングします。追加するのはviewDidLoadの中、下記のハイライト部分になります。

urlという変数の宣言部分で、取得する画像のurlを指定しています。インターネット経由で画像を取得しようとすると時間がかかってしまうかもしれないので、sendAsynchronousRequestを使って非同期処理にして動作が固まってしまわないようにしています。

 

実行してみましょう!

スクリーンショット 2015-07-21 19.53.52これで準備ができましたので、実行してみましょう。今回はヤフーのロゴを直接していして表示するようにしてみました(もしかしたらすぐurlが変わってしまうかもしれませんね)。

今回のサンプルはこちらです。

 

 

 

おわりに

大したことではないんですけど、いつもあれ、どうだっけ?ってなります。この辺もストーリーボードから操れるようにしてくれませんかね?なったらなったで扱いが面倒そうですけどね。

結構前に調べた内容なので参考元がわからなくなってしまいました。検索すると他の方法がたくさん出てきますが、このやり方だと非同期で画像を表示できるのでテーブルリストでの画像表示などで使えると思います。

 

スポンサーリンク