2017年7月13日木曜日

CollectionViewのCellの中身を更新

CollectionViewのセルをタッチしたら画像を変更するとか、タッチしたセルだけ選択された印のチェックマークをつけたりする方法。

まず、CollectionViewはTableView同様、最初に読み込まれるときにdelegateメソッドで一気に書かれるのが基本。

セルがタッチされたときに呼ばれる以下のdelegateメソッドに記述することで、特定のセルだけを内容変更することができる。
ただし、この中で直接セルの中の部品をいじってもダメなので、ここでは後述するdelegateメソッドの中で変更するように変更内容を入れる配列(ここではcellIsChecked)などをいじるだけとなる。

//セルが選ばれた時に呼ばれるdelegate
func collectionView(_ collectionView: UICollectionView, shouldSelectItemAt indexPath: IndexPath) -> Bool {
    //選ばれたセルのcheckBtnのチェックを反転
    if cellIsChecked[indexPath.row] {
        cellIsChecked[indexPath.row] = false
    } else {
        cellIsChecked[indexPath.row] = true
    }
    
    //セルの中身を更新したら、Cellを更新しないと反映されない
    collectionView.reloadItems(at: [indexPath])
    
    return true

}

セルの中身の変更はあくまでdelegateメソッド内で

collectionView.reloadItems(at: [indexPath])を実行することで、以下のdelegateメソッドが順番に呼ばれる。
つまり、あくまでも変更は以下のメソッド中で行うということになる。
ただし、最初に読み込まれる時と違い、下のメソッドはreloadItemsで指定したindexの分だけが呼ばれる。

//セクションの数を指定
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int)

//セルの中身を指定
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath)
{
    //選ばれたセルをセル番号で取り出す
    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "Cell", for: indexPath) as! PhotoCollectionViewCell
    var title:String
    if cellIsChecked[indexPath.row] { title = "◉" } else { title = "◯" }
    cell.checkBtn.setTitle(title , for: .normal)
        
    return cell

}


collectionView.reloadItems(at: [indexPath])
のかわりに

collectionView.reloadData()
で全体を書き換えることもできるが、処理が重いのでオススメはできない。

2017年7月12日水曜日

Documentsフォルダ内の画像ファイル読み書き

アプリ内にあるDocumentsフォルダに対して、画像ファイルを読み書きする方法。

Swift3ではURL(Swift2.xまではたしかNSURL)型で保存先情報を持つのだが、そのURLをそのまま引数に書いてやってもうまくいかない。
myURLに入っているなら、myURL.pathというプロパティで指定してやる。
引数はString型のようなのでmyURL.descriptionとやってみたがダメだった。

実機で試した場合のpathとdescriptio

ファイルpath
 /var/mobile/Containers/Data/Application/47DCD124-F9A4-4953-9B81-696DA790CCED/Documents/20170711055328142.jpg

ファイルdescription
 file:///var/mobile/Containers/Data/Application/47DCD124-F9A4-4953-9B81-696DA790CCED/Documents/20170711055328142.jpg

頭のfile:///の有無だけのようだ。

書き込み

//Documentsディレクトリのpathを得る(返り値はArrayで、index0がそれ)
let docPath = NSSearchPathForDirectoriesInDomains(.documentDirectory, .userDomainMask, true)[0]
//StringにappendingPathComponentがないのでURLに変換
let fileURL = URL(fileURLWithPath: docPath).appendingPathComponent(fileName)
//JPGに変換
let imageData = UIImageJPEGRepresentation(savePhoto, 1.0)
//画像書き込み(URLのpathを引数に)
//write(to:)はエラーを投げる関数なので、do-catch文が必要
do {
   //do-catchを使ってるので書込みエラーが起きるとcatchに移ってくれる
     try imageData?.write(to: fileURL, options: .atomic)
   //書き込み成功時の処理
   (省略)
   } catch let error {
   //書き込み失敗時の処理
     print("画像保存失敗 \(error)")
   }

読み込み

エラー処理なんかはしてない。

//Documentsディレクトリのpathを得る
let filePath = NSSearchPathForDirectoriesInDomains(.documentDirectory, .userDomainMask, true)[0]
//その後にファイル名を追加
//(String型のfileWithPathのメソッドがSwiftにないので、一度URL型に変更)
let fileURL = URL(fileURLWithPath: filePath).appendingPathComponent("ファイル名")
//.pathプロパティを引数に画像読み込み
let uiImage = UIImage(contentsOfFile: fileURL.path)

2017年6月7日水曜日

画面キャプチャ方法

//余計なUIをキャプチャしないように隠す
hogeButton.isHidden = true
hogeLabel.isHidden = true
CATransaction.flush() //画面更新
        
//viewと同じサイズのコンテキスト(オフスクリーンバッファ)を作成
let rect = self.view.bounds
UIGraphicsBeginImageContextWithOptions(rect.size, false, 0.0)
//スクリーンをコンテキストに描画 = スクリーンキャプチャ
self.view.drawHierarchy(in: view.bounds, afterScreenUpdates: false)

//スクリーンがキャプチャされたコンテキストからUIImageを作成
let capturedImage : UIImage = UIGraphicsGetImageFromCurrentImageContext()!
//コンテキストの扱いを終了
UIGraphicsEndImageContext()
        
//隠したUIを表示させる
hogeButton.isHidden = false
hogeLabel.isHidden = false

アニメの途中が表示されない問題

Context(オフスクリーンバッファみたいなもん)を作ってそこに画像をdrawしたりrenderしたりしてたんだけど、UIViewアニメの途中をキャプろうとしても、なぜかアニメ中のオブジェクトが実際に表示されている位置でキャプチャされてくれない現象が。

詳しいことはわからんのだが、アニメのメソッドで指定してる最後の移動位置でキャプチャされちゃうみたい。
つまり、AからBの位置に5秒間で移動するアニメを実行中、3秒目でキャプチャしてもなぜかキャプチャ画像だけはBの位置に来てる。(画面上ではまだ途中を動いてるというのに)

renderやdrawじゃなくdrawHierarchy

それを回避するため、drawHierarchy()メソッドを使うのがいいようだ。
ただし、afterScreenUpdatesがtrueの場合は同じような問題が発生するので、falseにしなければいけない。

直前のhiddenが効かない新たな問題

でもfalseにすると、写したくないUI部品をキャプチャ動作の直前でhiddenしても、hiddenされなくて写り込んでしまう。
UI部品をhiddenした直後にsetNeedsDisplay()とかやってもダメ。これは画面更新の予約だけで、実際に更新されるのはOS次第なんだそうな。

よくわからんがflush()で解決

そこで調べたところ、部品をhiddenした直後に CATransaction.flush() をしたところうまくいった。
一瞬部品がhiddenされ、スクリーンキャプチャされた後にまた部品が表示される。
CATransactionはCALayerのアニメを使うためのクラスだそうで、flush()はRunLoop終わりで自動的に呼ばれるものを強制的に(?)実行させるものらしい。
flashじゃなくてflushな。顔を赤らめるとか、興奮、感情の芽生え、トイレの貯水槽とかの意味がある。なんだよそれ!?w
正直言ってUIViewのメソッドじゃないのにうまくいくのは納得いかないんだけど、結果オーライでいいや。

2017年5月18日木曜日

画像サイズ変更

画像サイズを縮小したり拡大したりする方法。とりあえず縮小で説明。

要は、UIGraphicsImageContext(オフスクリーンバッファだな)を縮小(拡大)したサイズで作り、そこに元の画像をdrawすればいい。

以下でimageには512*512の画像が入っているとする。それを256*256のContextにdrawすると、Contextの縦横に合わせて画像が縮小されるわけですな。


//オフスクリーンのコンテキスト作成
UIGraphicsBeginImageContextWithOptions(CGSize(width: 256, height: 256), false, 0.0) 
//コンテキストに画像を描画
image.draw(in: CGRect(x: 0, y: 0, width: 256, height: 256))
//コンテキストから画像を得る
myImageView.image = UIGraphicsGetImageFromCurrentImageContext()

UIGraphicsEndImageContext()


drawする際にCGRectの各値を変更すれば、描画位置を変えたり、縦横を縮小(拡大)して描画することができる。

単純な拡大も、例えば100*100の画像を256*256のコンテキストに描画すれば拡大されるっちゅうわけ。

画像のクロップ(切り抜き)

画像の一部をクロップする方法。(とりあえず矩形で)

たとえば1024*1024の画像があったとして、そのx:100, y:100, width:200, height:200 の部分をクロップしたい場合、
UIImageのcgImage.cropping(to:)でクロップしたい範囲を指定してやれば、クロップした画像がCGImageとして得られるので、それを再びUIImageに変換してやればいい。
か〜んた〜ん♪


func cropImage(image:UIImage, cropRect:CGRect) -> UIImage {
    let cropRef = image.cgImage!.cropping(to: cropRect) //クロップ
    //UIImageに戻す
    let cropImage = UIImage(cgImage: cropRef!, scale: image.scale, orientation: image.imageOrientation)
    
    return cropImage
}

クロップ範囲に画像より大きい範囲を指定した場合

クロップはおこなわれない。
余白がつくとかはないよ。

解像度の違いに注意

画像によって(たとえばスクリーンキャプチャしたもの)はiPadとiPhoneで解像度に違いがあるため、クロップ範囲をそれに合わせないといけない。

iPadの768*1024の画面をキャプチャしたものはそのまま768*1024の等倍サイズだが、iPhoneの場合、320*568の画面をキャプチャしたものは画像サイズこそ320*568だが、2倍の解像度になっているので、内部的には640*1136になっている。

その解像度の比率はUIImageのscaleプロパティで得られるので、クロップ範囲のwidthとheightにそれぞれかけてやればいい。
キャプチャした画像のscaleプロパティは、iPadは1.0、iPhoneなら2.0になってるはずだ。
キャプチャしたものじゃなくても当然解像度に違いがある画像ならこのプロパティを使って計算すればいいと思う。

let cropRect = CGRect(x: 0, y: 0, width: image.size.width * image.scale, height: image.size.height * image.scale)
image = self.cropImage(image: image, cropRect: cropRect)

スクリーンショット

スクリーンショットの撮りかた。
GraphicsContext(要はメモリ上に作る描画領域=オフスクリーンバッファだな)を作り、そこに画面に表示されてるviewのlayer(bitmapの画像がある…はず)をrenderしてやることでスクリーンショットが撮れるわけですな。

今回はviewの部分だけのキャプチャーなので、画面一番上に時計とかを表示してるステータスバーなんかはキャプチャーされない。
普通にスクリーンショットを撮った時みたいに、そこまで含めたい場合はまた今度調べる。


    func getScreenShot() -> UIImage {
        //viewと同じサイズのコンテキスト(オフスクリーンバッファ)を作成
        let rect = self.view.bounds
        UIGraphicsBeginImageContextWithOptions(rect.size, false, 0.0)
        //現在のviewの中身(スクリーン)をコンテキストに描画
        //viewの中身なのでステータスバーなどは含まれないようだ
        let context: CGContext = UIGraphicsGetCurrentContext()!
        self.view.layer.render(in: context)
        //スクリーンがキャプチャされたコンテキストからUIImageを作成
        let capturedImage : UIImage = UIGraphicsGetImageFromCurrentImageContext()!
        //コンテキストの扱いを終了
        UIGraphicsEndImageContext()
        
        return capturedImage

    }


上にボタンとかを重ねてて、それをキャプチャーしたくない場合は、直前でhiddenして直後にまた表示すればいい。

Retinaディスプレイの場合、たとえばiPadの768*1024のスクリーンショットでも、倍の1536*2048の画像ができるので、それをさらに加工したりするときは注意。


このUIGraphicsBeginImageContext() 〜 UIGraphicsEndImageContext()で囲んだ間でオフスクリーンを操作するやり方はいろいろ使い道がありそうだ。

参考サイト