2016年05月29日

[Swift] Storyboardを使わず UICollectionView に UISearchBar を追加する

Storyboard を使わず UICollectionView に UISearchBar を追加したメモ

なぜこんなことをしたかと言うと、UIListView と切り替えて使いたかったから。
Storyboard を使い UICollectionView と UIListView の切り替えをやろうとしても
結局はプログラムを書く必要が出てくるので、Storyboard は使わない方向で作成した。

一番ハマッタのは、CollectionView の初期位置。
こいつが、ナビゲーションバーに潜り込んだり離れすぎたりと、
結構手間取った。


ソース

ソースはいろいろ省略している。成功は一番下。
■失敗その1
    /* cellサイズ */
let layout = UICollectionViewFlowLayout()
layout.itemSize = CGSizeMake(50, 50)
layout.sectionInset = UIEdgeInsetsMake(16, 16, 32, 16)

/* CollectionViewを生成 */
self.collectionView = UICollectionView(frame: CGRectMake(0, 0, self.view.frame.width, 300), collectionViewLayout: layout)
self.collectionView.registerClass(CustomUICollectionViewCell.self, forCellWithReuseIdentifier: "MyCell")
self.collectionView.backgroundColor = UIColor.blueColor()
self.collectionView.delegate = self
self.collectionView.dataSource = self
self.view.addSubview(self.collectionView)

/* 検索バー */
self.searchBar = UISearchBar(frame: CGRectMake(0, 0, self.view.frame.width, 44))
self.searchBar!.searchBarStyle = UISearchBarStyle.Default
self.searchBar!.delegate = self;
self.searchBar!.placeholder = "検索します。";
self.collectionView.addSubview(searchBar)

20160502901.jpg
単純に Storyboard のノリで作成。
初回表示は問題なかったが画面遷移して戻ってくると、
ナビゲーションバーに潜り込んだ状態になった。

そうなった原因は、画面遷移のときに UIActivityIndicatorView で
インジケータを追加削除していたが、それが問題だったらしい。

もう少し探ってみると、 UIActivityIndicatorView を addSubview したことで
self.view のインデックスの数が増える。
そうすると、1番目に追加したView(このソースでは UICollectionView) の
表示位置がズレるようだ。。

■失敗その2
その1の問題を逆手にとって、ダミーのViewを1番最初に追加した。
    /* ダミーViewを1番初めに追加 */
let dummy = UIView(frame: CGRectZero)
self.view.addSubview(dummy)

20160502902.jpg
view追加2つめからは、やっぱりずれるようなので、
collectionViewがずれた位置で表示された。
今度はもう少し下にずらして表示するようにしたらイケるはず。

■失敗その3
UICollectionView を下にずらして配置した。
    self.collectionView = UICollectionView(frame: CGRectMake(0, 0, self.view.frame.width, 300), collectionViewLayout: layout)
self.collectionView.registerClass(CustomUICollectionViewCell.self, forCellWithReuseIdentifier: "MyCell")
self.collectionView.backgroundColor = UIColor.blueColor()
self.collectionView.delegate = self
self.collectionView.dataSource = self
self.collectionView.contentInset = UIEdgeInsetsMake(64, 0, 0, 0) /* ← 追加 */
self.view.addSubview(self.collectionView)

20160502903.jpg
失敗その1に戻ってきたような気がする。
何度か searchbar の高さ分を広げようとしてもうまくいかず。

■失敗その4
collectionView だけではなく searchbar もずらした。
    self.collectionView = UICollectionView(frame: CGRectMake(0, 0, self.view.frame.width, 300), collectionViewLayout: layout)
self.collectionView.registerClass(CustomUICollectionViewCell.self, forCellWithReuseIdentifier: "MyCell")
self.collectionView.backgroundColor = UIColor.blueColor()
self.collectionView.delegate = self
self.collectionView.dataSource = self
self.collectionView.contentInset = UIEdgeInsetsMake(108, 0, 0, 0) /* ← 追加 */
self.view.addSubview(self.collectionView)

/* 検索バー */
self.searchBar = UISearchBar(frame: CGRectMake(0, -44, self.view.frame.width, 44)) /* ← 変更 */
self.searchBar!.searchBarStyle = UISearchBarStyle.Default
self.searchBar!.delegate = self;
self.searchBar!.placeholder = "検索します。";

20160502904.jpg
最初はうまく表示できて成功かと思ったが、
searchbar にフォーカスを当てるとなぜ下にずれる。
わけわからん。

■成功
セクションのヘッダーの設定を付けたら問題解決した。
失敗その1と失敗その2を結合したものにヘッダーの設定を追加した。
    /* ダミーView */
let dummy = UIView(frame: CGRectZero)
self.view.addSubview(dummy)

/* cellサイズ */
let layout = UICollectionViewFlowLayout()
layout.itemSize = CGSizeMake(50, 50)
layout.sectionInset = UIEdgeInsetsMake(16, 16, 32, 16)
/* セクション毎のヘッダーサイズ */
layout.headerReferenceSize = CGSizeMake(100,30) /* ← 追加 */

/* CollectionViewを生成 */
self.collectionView = UICollectionView(frame: CGRectMake(0, 0, self.view.frame.width, 300), collectionViewLayout: layout)
self.collectionView.registerClass(CustomUICollectionViewCell.self, forCellWithReuseIdentifier: "MyCell")
self.collectionView.backgroundColor = UIColor.blueColor()
self.collectionView.delegate = self
self.collectionView.dataSource = self
self.collectionView.contentInset = UIEdgeInsetsMake(64, 0, 0, 0) /* ← 追加 */
self.view.addSubview(self.collectionView)

/* 検索バー */
self.searchBar = UISearchBar(frame: CGRectMake(0, 0, self.view.frame.width, 44))
self.searchBar!.searchBarStyle = UISearchBarStyle.Default
self.searchBar!.delegate = self;
self.searchBar!.placeholder = "ファイル・フォルダ名で検索します。";
self.collectionView.addSubview(searchBar)

20160502905.jpg
これで、出てた問題はすべて解決した。
tableview と切り替えの処理を合わせるとまたなんか出てきそうだけど、
そのとき考える。

ちなみにセクションのヘッダーサイズは layout.sectionInset でなくとも、
func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAtIndex section: Int) -> UIEdgeInsets を
使うとサイズを変更できる。


以上


posted by ケイチョー at 10:49 | Comment(0) | Swift | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

×

この広告は180日以上新しい記事の投稿がないブログに表示されております。