[iPhone] UICollectionView セルの選択と画面遷移

UICollectionView は基本的にスクロールすることで小さい画面を有効に使えるようにできるUIです。マス目のセルを選択して画面遷移し、拡大表示する設定を試してみます。
 

Swift 5.1
Xcode 11.3.1

UICollectionView と Segue

 
UICollectionViewが出来上がったところから始めますので、簡単な UICollectionView を作成してください。
 

アルバムのような写真アプリによく使われますが、画像をマス目に配置するには UICollectionView を使います。基本的な設定をテスト...
 
セルの一つを選択タップして、画面遷移にて新しい画面でその画像を拡大表示というアプリを考えて見ます。
 

 

画面遷移先の View Controller を新しく作成


Main.storyboard を選択して、上段バーにあるライブラリーからView Controller を選んで追加していきます。これを遷移先のView Controllerとします。
 

 
この View Controller に対応するClass が必要なので新らしく作成します。
 
メニューの「File」「New」「File…」 


「iOS」-> 「Swift File」 を選択

名前を SubViewController.swift (例) としてプロジェクト内に「create」


 
swift ファイルはほとんど空の状態なので最低限のクラスとしての記述をしておきます。
 
SubViewController.swift

 
ストーリーボードで 新しく作った View Controller を選択してライブラリーエリアの Identity Inspector に入り「Custom Class」の「Class」から、候補が選択できます
 
SubViewControllerを選択
 

 
これで、StoryBoard の Sub View Controller Scene とSubViewController.swift が結び付けられました。

 

ストーリーボードでの Segue の設定

 
遷移先の画面はできましたが、遷移するためにSegueというものを使います。
segueとは「あるものから次のものへ,とぎれることなく滑らかに推移する」ことを意味しています。
UICollectionView が設定されている View Controller Scene と Sub View Controller Scene を segue で結びます。

  1. View Controller Scene の上部バーにあるアイコンを右クリック
  2. manual の+をつかんでSub View Controller Sceneに持っていく
  3. Sub View Controller Scene から選択肢が出るので「Present Modally」を選択(Modalは非推奨になりました)


 
成功すれば2つのViewがつながり矢印 Segue ができます
 

 
この Segue の上にできたアイコンをクリックして、ライブラリエリアにある Attributes Inspector を選択
 
スクリーンショット 2016-01-20 14.26.05
 
identifierに「toSubViewController」と記述。このキーワードは画面遷移で使われます

 

セルが選択されたときの挙動をコーディング

 
Sub View Controller Scene のView一杯に Image View を置きます
 

 
遷移先のコードを記述します。画像を表示するコードですが、
selectedImg
は遷移元から呼ばれるので合わせておく必要があります。
 
SubViewController.swift

 

セルが選択されSegue を使って遷移する部分です。背景、文字色も少し変えましたがそれはストーリーボードでの変更です。

Cellが選択されSegueから次のViewContorllerへ遷移する部分のコードです。
 

 
SubViewController を右クリックして New reference Outlet とSub View Controller Scene の imageView を結びます。
 
 
まとめると
ViewController.swift

 
ビルドして、iPhone X で実行、No.6のセルを選択するとアスペクト比を維持して画面いっぱいに画像が表示されます。
 

 
 
関連ページ:

Reference:
UICollectionView – UIKit | Apple Developer Documentation

一人でアプリ開発の限界を感じたら

アプリ開発を始めたけどわからないところがあり、誰かに聞きたいけど周りにはそんな人はいない…あるいは、会社で働いていて日中そんなに時間をとれないなど、オンライン・スクールがいいと思います。


TECH ACADEMY
自宅にいながら1時間でプログラミング基礎を習得

こういうものではアプリ作れないと言う意見もありますが、それは結局本人のやる気があるかないかです。やる気があっても独学では突破しにくいところは教えてもらうのが一番早い。


侍エンジニア塾
侍エンジニア塾 無料体験レッスン



とても簡単なことなのに本やネットの画像だけでは分かりにくいことはあります。実際に質問してピンポイントで教えてもらうと、なんだそんなこと、と言うのがけっこうあります。


CodeCamp
~約20,000名の受講生と300社以上の導入実績~
現役エンジニアのオンライン家庭教師CodeCamp




直接(ネットで)誰か分かる人に聞いた方が早く解決して、上達も早いと思います。


無料で転職まで
これはiOSアプリ限定ではありませんが無料です
その代わり就職することを前提にしたスクールでエンジニアになって職を得たいのであれば手っ取り早いかもしれません


誤字脱字、意味不明などのご意見は 謙: e-mail まで
ブックマークしておくと便利です このエントリーをはてなブックマークに追加
Twitter:


シェアする

  • このエントリーをはてなブックマークに追加

フォローする