【超初心者向け】SwiftのStoryboardで単純に画像を表示させるプログラム解説

どうも、はるかす(@mametyralove)です。

現在、Swiftを本気で勉強している最中でございます。

どんな感じで勉強が進んでいるかはこちらの記事で更新しているのでよければ見てください。

【毎日更新】中卒が本気でプログラミング言語「Swift」を学ぶ話

2018.10.04

今回は、単純に画像を画面に表示させるプログラムを解説していこうと思います。

なぜこんな記事を書いているかというと、どのサイトも単純に画像を画面に表示させるプログラムについて解説している記事がなかったからです。

クリックしたら画像を表示するプログラムや画像が変わるプログラムばかりで、画像を表示するプログラムだけを知りたい人(昨日の俺)に対しての記事がなかったんですよね。

プログラミング言語を独学で勉強している人にこのような記事は必須だと思ったので、頑張って調べたことを紹介していきますね!

一応、SwiftやXcodeの使い方をある程度理解している方でないと流石にわからないと思うのですが、その辺は他のサイトでなんとかなるので調べてみてください。

事前準備

事前準備で何をするかというと、表示させたい画像を用意してローカルファイルにぶち込むことです。

正確な言い方はしていませんが許してください。

ここで言うローカルファイルとは、Xcodeに元々用意されている画像を置いておくためのフォルダのことです。

そのフォルダ名は「Assets.xcassets」です。

少し探せば簡単に見つかると思いますが、ここに表示したい画像をドラッグ&ドロップします。

そこで、画像の名前がわかりにくい場合はわかりやすい名前に変更しておきましょう(ここではblogという名前にしています)。

これで事前準備は完了です。これから画像を表示させていきましょう。

 

Storyboardの設定

まずは「Main.storyboard」を開き、右上の二重丸的な所をクリックしてください。

すると、挿入するオブジェクトを検索できるので「Image View」を検索し、Storyboardに貼り付けます。

大きさ、場所はお好きなように決めてください。

僕は画面全体に設定しました。

こんな感じでStoryboardの設定は完了。

次はコードを書いていきます。

プログラムを書く

次に「ViewController.swift」にコードを書いていくのですが、Storyboardの画面を開いたままの方が大変やりやすいのでその方法からご紹介します。

Storyboardの画面の右上の丸が二つ重なっているボタンを押すと右「ViewController.swift」が表示されて編集できるようになります。

まずは、Storyboardのオブジェクトを色々していくためにViewController.swiftとオブジェクトを紐付けます。

深く考えずに必須作業だと思ってやってください。

オブジェクトを選択した上でコントロールキーと同時押しでドラッグ&ドロップしてコードに貼り付けます。

ドロップした時にオブジェクトの設定を入力しますが、nameの所だけわかりやすい名前にするだけでOKです。Connectを押します。

現段階でこんな感じに待っていれば正解です。

これで紐付けることができました。

次は画像を表示するコードを入力していきます。

簡単な説明有りで書くとこうなります。

設定したオブジェクト名=Storyboardのオブジェクト名
定数名=ここで適当に決めてください。
画像の名前=ローカルファイルにぶち込んだ画像の名前

ちなみに僕の場合は、

設定したオブジェクト名=blogimg
定数名=image
画像の名前=blog

だったので、その場合は以下のようになります。
参考にしてみてください。

最低限これを記述するだけで画像を画面に表示することができます。

実際に実行してみるとこんな感じになりました。

完璧ですね。

 

さいごに

もう一度言いますが、正確な言葉を使ってはいません。

初心者にわかりやすいような言葉で説明しているので正確には違う点は多々ございますがご了承ください。

あと、オブジェクトを紐付けるコードをコピペすると上手くいかないのできちんと自分でドラッグ&ドロップからやりましょう。

この記事を見てもわからないことがあれば是非コメントをください。

それでは。

コメントを残す

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