Swiftで画像アプリ（その６）〜セルサイズとサムネサイズを合わせる
前回はCollection Viewのセル上にImage Viewを配置して画像表示したが、サイズが合ってなかったのでこれを合わせる。
コードを下記のように変更。
// indexに応じたサムネイル画像を表示
let imageView = cell.contentView.viewWithTag(1) as! UIImageView
let viewSize:CGFloat = view.frame.size.width/3-2
imageView.frame = CGRect(x: 0, y: 0, width: viewSize, height: viewSize)
imageView.image = UIImage(named: photos[indexPath.row])
viewSizeをcellSizeと合わせた。
なおセル間隔のMin Spacingは2,2に小さくした。
MyPicApp-005
Swiftで画像アプリ（その５）〜セル間隔調整、サムネ画像表示
前回はセルサイズを指定したが、今回はセル間隔を指定して綺麗に並べる。
セル間隔の指定はmain.storyboardのプロパティ設定から。
Collection ViewのMin SpacingにおけるFor Cells(横のセルとの間隔)とFor Lines(縦の行の間隔)で設定。
さらにセルサイズを微調整。
// セルの大きさを指定
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
let cellSize: CGFloat = view.frame.size.width/3-2
return CGSize(width: cellSize, height: cellSize)
}
セルサイズをframe/3-2として一行につき-6の余白、For Cellsでセル間隔を3 にしてぴったり、かな？
For LinesはFor Cellsとの設定の違いを明確に確認するため大きめの50。
さらに各セルに画像表示もしてみる。
Assets.xcassetsに適当に画像を9枚 01〜09pic.jpgを格納。
Main.storyboardでCollection Viewのセル内にImage Viewを配置し、プロパティでタグ番号を1に設定。
タグ番号を使用した画像表示のコードを書く。
// 画像ファイル名を配列で登録
let photos = ["01", "02", "03", "04", "05", "06", "07", "08", "09"]
// データを返す
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath)-> UICollectionViewCell
{
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "testCell", for: indexPath) as UICollectionViewCell
cell.backgroundColor = UIColor.green // とりあえず緑にして動作確認
// indexに応じたサムネイル画像を表示
let imageView = cell.contentView.viewWithTag(1) as! UIImageView
imageView.image = UIImage(named: photos[indexPath.row])
return cell
}
セルサイズと画像サイズが合ってないけど、とりあえずサムネ表示の元ができた。
MyPicApp-004
SEPのせいでWindowsバージョンアップができない
Swift勉強中断。Windowsアップデートのエラー対処メモ。
職場でWindows10 Pro 64bitを使用しており、セキュリティソフトにSEP(Symantec Endpoint Protection)を入れている。
オフライン環境なのでSEPは少し古いv12.1.6のままで、そのためWin10もver1703で止めていたが、いい加減アップするかとSEPをアンインストールしてver1803のメディアからバージョンアップ実行。
しかし途中で「互換性が無いSEPをアンインストールしてください」と出て止まってしまう。アンインストールしたのになんでやねん！と調べてみる。
結果、インストールしているSEPではなく、デスクトップに残していたSEPのインストーラが妨害していたらしい。
Microsoftの下記回答を参考にログから妨害しているプログラムを探したら上記の通りだった。
「いくつかのアプリケーションをアンインストールする必要があります」のエラーが発生して、Window - マイクロソフト コミュニティ
つまり、インストールしているかどうかに関わらず、PC内にWin10 ver1803に対応していないexeファイルがあるとバージョンアップできないようなのだ。残っていたSEPのインストーラexeを削除したら問題なく進んだ。
なんてひどい仕様だ。Windows Updateの利便性は（これに限らず）なんとかしてほしい！
Swiftで画像アプリ（その４）〜セルサイズ変更
CollectionViewのセルサイズの変更方法を確認。
前回のMyPicApp-002のコードに下記を追加。
class ViewController: UIViewController, UICollectionViewDataSource, UICollectionViewDelegate, UICollectionViewDelegateFlowLayout {
@IBOutlet weak var collectionView: UICollectionView!
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view, typically from a nib.
collectionView.delegate = self
}
// セルの大きさを指定
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
let cellSize: CGFloat = view.frame.size.width/3
return CGSize(width: cellSize, height: cellSize)
}
//以下略
UICollectionViewDelegateやUICollectionViewDelegateFlowLayoutを追加し、下部のfunc内でCGSizeを指定。
やってて詰まったのは、collectionView.delegate=selfを書かないと反映されないところ。
ViewDelegate関係のクラスを追加したんだからself指定しないとダメということなんだろうけど、まだよくわからん！
セルサイズをframe.width/3にしたから、余白も含めて綺麗に３等分になってる、のかな。
MyPicApp-003
Swiftで画像アプリ（その３）〜プロジェクト複製
ビルド成功したバージョンごとにプロジェクトをコピーしてコーディングをしていこうと思ったら、プロジェクトの複製が意外と面倒だったのでメモ。
結果的には下記サイトのとおり進めればできた。
Swiftで画像アプリ（その２）〜サムネ一覧画面
続けてサムネ一覧画面をUICollectionViewで作る。
まずは簡単な動作確認。下記のサイトを参考。
【Swift】UICollectionViewの使い方。自作セルでカスタマイズする。 | はじはじアプリ体験記
class ViewController: UIViewController, UICollectionViewDataSource {
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view, typically from a nib.
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
// Dispose of any resources that can be recreated.
}
// データの個数を返す
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int)->Int{
return 9 // とりあえず9個。
}
// データを返す
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath)-> UICollectionViewCell
{
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "testCell", for: indexPath) as UICollectionViewCell
cell.backgroundColor = UIColor.green // とりあえず緑にして動作確認
return cell
}
}
動作のポイントは下記だった。
部品リストにあるコレクションビューをデバイス画面までドラッグ＆ドロップで運ぶ（下図赤矢印）。Ctrlキーを押しながら部品をデバイス画面上の黄色い丸までドラッグ＆ドロップで運ぶ（黄緑矢印）。
吹き出しで表示されたメニューから「dataSource」を選択する。これでコレクションビューに表示するデータをUIViewControllerクラスから貰う設定になった。
UIViewControllerクラス上にUICollectionViewクラスを乗っけたからこの設定が必要だったのかな？
MyPicApp-002
Swiftで画像アプリ（その１）〜画像表示
Swiftで画像アプリを作ってみたい！ということで始めてみる初心者。
最終的な目標はiPhone/iPadからPC上にたまった画像をリモートでスムーズに表示できるアプリにしたい。
下記のサイトにあるサンプルアプリ「Swift Flicker App」がFlickerから写真を引っ張ってきて表示するみたいだから、これを真似ればいいとこまでいけるかな？
【開発しながら学ぶ！】Swiftで作るサンプルアプリをまとめてみた | TechAcademyマガジン
制作環境は下記。
MacBook 12inch 2015モデル
Xcode 9.4.1
まずはシンプルに1枚の画像を表示するアプリをXcode上のシミュレータ(iPhone X)で動かしてみた。
コードは下記。
class ViewController: UIViewController {
@IBOutlet weak var mainImageView: UIImageView!
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view, typically from a nib.
setNeedsUpdateOfHomeIndicatorAutoHidden() // ホームインジケータON/OFF更新
self.view.backgroundColor = UIColor.black
mainImageView.contentMode = .scaleAspectFit
//self.view.addSubview(mainImageView)
mainImageView.center = self.view.center
mainImageView.image = UIImage(named: "pic01")
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
// Dispose of any resources that can be recreated.
}
override func prefersHomeIndicatorAutoHidden() -> Bool {
return true // ホームインジケータOFF
}
}
- UIImageViewにpic01をセット。pic01.jpgはAssets.xcassetsディレクトリに格納。
- scaleAspectFitとview.centerで中央に綺麗に表示。
- addSubViewは参考サイトに書いてあったけどコメントアウトしても動いた。コードからUIImageViewを表示させるには必要なのかな？まだよくわからん。
- ついでに自分がiPhone Xで使うことを見越してホームインジケータのOFF設定を試してみる。
MyPicApp-001
