3

現在、写真を複数選択できるImagePicker機能を作っています。

そこで、取得した写真をUICollectionViewに表示するところまではできました。

次にやりたいことは以下の画像のように、

  1. 選択された写真に選択された順番に選択番号をつけ、もう一度タップされたら、選択番号が消える。
  2. 1、2、3と番号がついたとして、2の番号の選択が消されたら、3が2になる、という実装です。

画像の説明をここに入力

UICollectionViewDelegatedidSelectRowAtIndexPathを使用すればよいのかなと考えましたが、選択された写真に番号をつける実装方法がわかりませんでした。

どのようにすればよいのか、教えてください。

1 件の回答 1

2

自分ならこう実装するという指針を載せてみます。

まず以下のものを用意します。

  • UICollectionViewCellの選択番号を更新するメソッド
  • 選択されたindexPathを保持する配列

collectionView(_:didSelectItemAtIndexPath:)では、選択されたindexPathを配列に追加します。もし既に追加されている場合は削除します。このとき同時に、collectionView.visibleCells()に対して選択番号の更新処理を行います。

選択番号は「配列の何番目にいるか」で決めることができます。Swift1.2であればグローバル関数のfind()、Swift2.0であればCollectionTypeのプロトコル拡張であるindexOf()で求めることができます。


collectionView.reloadData()でも実現可能ですが、セル全体の再リロードが走るのは、恐らく意図した動作ではないと思います。collectionView.visibleCells()は現在可視状態にあるセルを取得できますので、それら全てに対して選択番号の更新を行うのが良いです。


追記: コード例(Swift2.0)

var selection: [NSIndexPath] = []

override func collectionView(collectionView: UICollectionView, didSelectItemAtIndexPath indexPath: NSIndexPath) {
    // もしselection配列に存在すれば追加、そうでなければ削除
    if let index = selection.indexOf(indexPath) {
        selection.removeAtIndex(index)
    } else {
        selection.append(indexPath)
    }

    // 可視状態のセルを全て更新する
    collectionView.visibleCells().map {updateCell($0)}

    collectionView.deselectItemAtIndexPath(indexPath, animated: true)
}

func updateCell(cell: UICollectionViewCell) {
    // indexPathをCellから逆引きする、なければreturn
    guard let indexPath = self.collectionView?.indexPathForCell(cell) else {
        return
    }
    // 選択番号用のUILabelをCellから取得
    let numLabel: UILabel = cell.viewWithTag(NUMBER_LABEL) as! UILabel
    // 配列内にindexPathがあれば選択番号と枠を表示、そうでなければ非表示
    if let index = selection.indexOf(indexPath) {
        cell.contentView.layer.borderColor = UIColor.blueColor().CGColor
        cell.contentView.layer.borderWidth = 4.0
        numLabel.hidden = false
        // 検索結果のインデックス + 1 が選択番号として使える
        numLabel.text = "\(index+1)"
    } else {
        cell.contentView.layer.borderColor = UIColor.clearColor().CGColor
        cell.contentView.layer.borderWidth = 0.0
        numLabel.hidden = true
    }
}

再追記 :Swift1.2の場合(やや忘れかけ)

var selection: [NSIndexPath] = []

override func collectionView(collectionView: UICollectionView, didSelectItemAtIndexPath indexPath: NSIndexPath) {
    if let index = find(selection, indexPath) {
        selection.removeAtIndex(index)
    } else {
        selection.append(indexPath)
    }

    // 可視状態のセルを全て更新する(普通にforループでも良いです!)
    collectionView.visibleCells().map({(cell: AnyObject) -> Void in
        self.updateCell(cell as! UICollectionViewCell)
    })
}

func updateCell(cell: UICollectionViewCell) {
    let numLabel: UILabel = cell.viewWithTag(NUMBER_LABEL) as! UILabel        
    if let indexPath = self.collectionView?.indexPathForCell(cell){

        if let index = find(selection, indexPath) {
            cell.contentView.layer.borderColor = UIColor.blueColor().CGColor
            cell.contentView.layer.borderWidth = 4.0
            numLabel.hidden = false
            numLabel.text = "\(index+1)"
        } else {
            cell.contentView.layer.borderColor = UIColor.clearColor().CGColor
            cell.contentView.layer.borderWidth = 0.0
            numLabel.hidden = true
        }
    }
}
8
  • 教えていただきありがとうございました。 collectionView(_:didSelectItemAtIndexPath:)で配列に選択されたindexPathを追加する処理は書きました。 ここでわからない箇所があるのですが、 UICollectionViewCellの選択番号を更新するメソッドを用意し、 collectionView.visibleCells()に対して選択番号の更新処理を行うというのは、どこに記述し、どのように呼び出せばよいのでしょうか。 初心者考えですが、collectionView(_cellForItemAtIndexPath:)内に条件分岐で記述した場合、セル全体の再リロードをかけなくてはいけないのではないかと思います。 Commented 2015年8月30日 13:02
  • 1
    @TakumiKuroda 使われているSwiftのバージョンが分からなかったので、Swift2.0で書きましたが、更新処理の処理と呼び出し方のコード例を追記してみました。
    – quesera2
    Commented 2015年8月30日 13:23
  • 1
    @TakumiKuroda UICollectionViewもビューの一種ですので、メインスレッドであれば再描画できます(collectionView(_cellForItemAtIndexPath:)でしか更新できないなどの制約はないです)。外部メソッドで再描画する場合、UICollectionViewCellNSIndexPathをどう紐付けるかですが、これはindexPathForCell()メソッドが利用できます。
    – quesera2
    Commented 2015年8月30日 13:32
  • コード例を書いていただき、ありがとうございます。ちなみに現在はswift1.2で書いています。 map {updateCell($0)}というメソッドが初見で調べてみたのですがよくわからない部分がありまして、func updateCell(cell: UICollectionViewCell)を呼び出しているという理解でよろしいでしょうか?$0はどういった意味でしょうか?何から何まですみません。 Commented 2015年8月30日 14:13
  • @TakumiKuroda はい、その理解で正しいです。いくつかのクロージャを書くときの省略記法を使っています。完全に書くと、map({ (cell: UICollectionViewCell) -> Void in updateCell(cell)})でしょうか。$0はクロージャの引数を型推論に任せて省略した場合に、引数に$0$1...と振られるもので、ここではvisibleCells()のそれぞれの要素が渡されます。
    – quesera2
    Commented 2015年8月30日 14:37

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。