前回、iOSアプリからフォトライブラリに触われるAssetsLibraryについて書きましたが、
Assets Library Frameworkはフォトライブラリに保存されている画像しか使えないため、
アプリ内のdocumentなどに保存してる画像を表示したり、CoreDataで保存してる情報と選択した画像を関連付けるようなことを
書くのが難しそうでした。

そこで、AQGridViewというグリッド表示をUITableViewControllerライクにできるライブラリを使って、
アプリ内に保存してある画像から複数選択できるような画面を作ってみました。

NewImage NewImage

ソースコードを見るとわかりますが、画像のサムネイルとその上にチェックマークを置いて、
選択状態によってチェックマークを表示/非表示するようなカスタムセルを作って利用しています。 
(下記はイメージ、実際はコードでカスタムセルを作成してる。

NewImage

チェックマークの状態保持はNSMutableIndexSet *selectedIndexSet_; という感じでNSMutableIndexSetを使うと、
数字のindexを管理できるNSSetが使えるので、1番目と3番目のセルがチェックされてるといった数字部分だけを重複せずに管理できて便利です。
NSIndexSetを使うとNSArrayからNSIndexSetに該当するAtIndexのものだけを取り出したNSArrayを取得みたいな処理も簡単に書けたりするので、
NSArrayを元にして、その中のどれを みたいな情報を管理するのに使い勝手がいいです。

後、AQGridViewで少し注意する所は、選択する度にdidSelectItemAtIndexを呼んでもらうためには、
didSelectItemAtIndex内で deselectItemAtIndex:indexしないと上手く行かないようです。

- (void)gridView:(AQGridView *)gridView didSelectItemAtIndex:(NSUInteger)index {
    if ([self.selectedIndexSet containsIndex:index]){
        [self.selectedIndexSet removeIndex:index];
    } else {
        [self.selectedIndexSet addIndex:index];
    }
    [self updateCell:[self.gridView cellForItemAtIndex:index] cellForItemAtIndex:index];
    // for toggle - doesn't call didSelectItemAtIndex unless GridView#deselectItemAtIndex
    [self.gridView deselectItemAtIndex:index animated:YES];
}

AQGridView使った事もあって結構コンパクトに掛けたので、
Assets Libraryの複数画像選択みたいなUIをアプリローカルの画像からやる場合は、こういう事をするといいのかもしれません。

ソースコードは以下にあります。

Post Navigation