![見出し画像](https://assets.st-note.com/production/uploads/images/96355163/rectangle_large_type_2_79e2c63909eb9954a33032832b06546b.png?width=1200)
【徒然iOS】気ままにUIKit30〜Image VIewの使い方。画面に画像を表示〜
概要
このマガジンは四十を過ぎたおっさんが、
を参考にStoryboardでiOSアプリを完全に趣味で楽しんでいるだけな記事を気ままに上げてます。
今回
をやる〜〜〜!
前準備
前回で、すでに作ってるから
念の為、バックアップ
だけいつも通りやってから本題へ💃
![](https://assets.st-note.com/img/1674530484914-dbFCJrPznj.png?width=1200)
Image View(以下、イメージビュー)
画面に画像を表示させるための入れ物
さて、
本題
⒈デバイス画面にイメージビューを配置
![](https://assets.st-note.com/img/1674530620554-tgnzN0rpev.png?width=1200)
![](https://assets.st-note.com/img/1674530659324-1IBj8c2mKg.png?width=1200)
⒉アトリビュートインスペクタボタンを押して設定画面を開き、imageを選択
![](https://assets.st-note.com/img/1674530742926-ZW8SrALkYO.png?width=1200)
![](https://assets.st-note.com/img/1674530776252-ltZedFx3M2.png?width=1200)
⒊シミュレーターで実行
![](https://assets.st-note.com/img/1674530905460-8QM54n7B4x.png?width=1200)
理由:
Create folder referencesでファイルを追加した場合は、ナビゲーションエリアにフォルダの参照が追加されるが、フォルダの中のファイルパスは管理されないから
⒋ソースコードからイメージビューに画像を設定する
Connection:Outlet
Name:myImageView
で設定。
![](https://assets.st-note.com/img/1674532739618-mNWJIhzvK3.png?width=1200)
![](https://assets.st-note.com/img/1674532763382-ZwxTqH9mKz.png?width=1200)
⒌コード組み込み
![](https://assets.st-note.com/img/1674533053538-Oj02xoM32P.png?width=1200)
拡張子はないがいけるかな?
⒍シミュレータを再実行
![](https://assets.st-note.com/img/1674533123626-wDd7XYOiDb.png?width=1200)
一旦、追加したimagesフォルダを削除して、拡張子付きで再取り込みしてみようかと思ったが、前回、今回でやってる画像ファイルの取り込み自体が普段やらない結構特殊なやつなので、、、
普段は、こうするって方法を試す
*何を持って、一般的とか普通というかは知らないが、
多分こっちの方が簡単で早い方法
![](https://assets.st-note.com/img/1674533493719-MyCi57p9UJ.png?width=1200)
⒈ナビゲーションエリアでAssetsクリックしてAssetsを開く
![](https://assets.st-note.com/img/1674533540747-V6X65qCHUd.png?width=1200)
⒉前回作ったImagesフォルダを白い項目列にドラッグして、追加
![](https://assets.st-note.com/img/1674533685864-EDEbRBK3o3.png?width=1200)
![](https://assets.st-note.com/img/1674533733092-PWNEw5Wg6L.png?width=1200)
拡張子はなしのままで〜〜〜
⒊MainStoryboardに戻って、部品ライブラリを開く
![](https://assets.st-note.com/img/1674533835956-oDr6dpRDnL.png?width=1200)
⒋左から二番目のshow the Image Libraryをクリック
![](https://assets.st-note.com/img/1674533922117-JQDE9amw9h.png)
![](https://assets.st-note.com/img/1674533953018-3RNpCeVGk2.png?width=1200)
追加したいイメージファイルを選択
⒌今回のビューにいつも通りドラッグして追加
![](https://assets.st-note.com/img/1674533998139-7s8WNuGhFI.png?width=1200)
⒍シミュレータを実行
![](https://assets.st-note.com/img/1674534070255-kWHNmQpfEQ.png?width=1200)
例えば、
後々出てくるCollectionViewなんかもあるけど、
これまでに使ったVstackやHStack、AutoLayoutなんかを使って〜〜〜
![](https://assets.st-note.com/img/1674534626318-7VbdlsSUIY.png?width=1200)
みたいなことも簡単にできるから試してみてね〜〜〜
他にも、
ボタンにイメージを表示したいときは、
![](https://assets.st-note.com/img/1674534781913-sQkgwKxxGp.png?width=1200)
![](https://assets.st-note.com/img/1674534801246-GIKnllGdiw.png?width=1200)
![](https://assets.st-note.com/img/1674534848247-idmernSq2L.png?width=1200)
![](https://assets.st-note.com/img/1674534885896-4FhlcdRrRM.png?width=1200)
![](https://assets.st-note.com/img/1674534914752-3Zn3TYBYhI.png?width=1200)
ここで次いでに
を使う例も示しとくね〜〜〜🕺
![](https://assets.st-note.com/img/1674535113029-XOqYWmsqFU.png?width=1200)
![](https://assets.st-note.com/img/1674535167124-GUuFIK0n9p.png?width=1200)
![](https://assets.st-note.com/img/1674535215327-e9NvpekvFt.png?width=1200)
![](https://assets.st-note.com/img/1674535252725-gZ4gKPG0Bi.png?width=1200)
SFSymbolsができる以前は、
アイコンマークを無料のサイトなんかから落としてきてたんだけど、
できてからは、
から簡単にダウンロードできて、
![](https://assets.st-note.com/img/1674535365367-zt3rFgipfF.png?width=1200)
みたいな専用アプリで、アイコン名とイメージ図も一覧で確認もできるようになったから、使ってみてね〜〜〜
*すでにダウンロード済みの環境でやってるから、ダウンロードしてない場合に、Imageの選択肢に表示できるかどうかは知らないけど。
👉わざわざ、Assetsにアイコン画像をセットしなくても使える
プロジェクトファイルが肥大化しなくて済む
ので、SwiftUIで開発する時にも重宝してる🕺
![](https://assets.st-note.com/img/1674535670300-5r0VyMPuPW.png?width=1200)
![](https://assets.st-note.com/img/1674535700296-bjISTBgK0v.png?width=1200)
さてと、ブラッシュアップ
![](https://assets.st-note.com/img/1674535870033-CvI9t5ZM3x.png?width=1200)
気に入らないから、、、
![](https://assets.st-note.com/img/1674536501647-2jkSYM1FJL.png?width=1200)
まとめ
今回は、記事のとおりだと、操作がややこしくなりすぎるので、普段やってる方法に切り替えて説明〜〜〜💃
簡単な操作方法ばかりだし、すでに知ってるとかやってる人も多いだろうけど、ImageViewは、Assetsを使った方が
フォルダ毎、余計なオプション設定もなく組み込めて簡単
なので、SFSymbols含めて一気に紹介した〜〜〜🕺
すでに、大抵のアイコンは、SFSymbolsさえあればもはやイメージファイルさえ必要ないってことを認識してもらえたら、ここの記事では満足🌟
プログラミング・開発ってゆーと
未だに、
コード
と思ってる人もいるかもしれないけど、現在では、IDE(統合開発環境)のGUIをふんだんに使いながら、必要なコードだけを書くのがアジャイルで主流になりつつある。
コードを書かない記事が続くけど、
その知識も必要
ってことで。
いくら簡単な操作でも、その機能とかやり方を知らないと、かえって面倒なことをやる羽目になるからね〜〜〜
Apple公式
今回は、SFSymbolsで紹介したからなし。
さて、次回は
をやる〜〜〜!
前回、間違って今日書いた記事を飛ばして先走っちゃってたね💦
いよいよ、Imageも佳境だね🕺