2015.01.19   |   iOS

カスタムしたCellView内のUIImageViewがずれる問題

iOSでTableViewを使っていて遭遇した問題。

UITableViewのセルをカスタムして画像を入れられるようにしようとしたところ、UIImageViewがAutoLayoutのConstraintを無視して実行時にずれるという変な現象に遭遇しました。

CellViewの左端にピッタリ正方形の画像を設置、その右隣にTextLabelを置く、といったシンプルなレイアウトを作ろうとしていました。

  • マージン抜きの左端とUIImageView
  • UIImageViewとLabel
  • Labelとセルの右端

といった感じで左右のConstraintを設定してみたのですが、実際に実行してみたところ、画像の位置と左端に隙間が開いてしまい、そのずれた隙間分だけLabelに画像がかかってしまうという不思議な現象が起きました。左右の余白はともかく成約を設けているImageとLabelが重なってしまうというのは不可解でした。

レイアウトのタイミングを疑ってTableViewのdatasourceを呼ぶ順番を変えてみたり、実行環境のOSや実機等で色々試してみたのですが、全然解決しませんでした。

結局、困ったときのStackOverflowと言う事で、英語でキーワードを入れて調べてみたらあっさりと答えが見つかりました。

解決方法

Positioning the imageView of a UITableViewCell - StackOverflow

- (void) layoutSubviews
{   
    [super layoutSubviews];

    self.imageView.frame = CGRectMake( 10, 10, 50, 50 ); // UIImageViewの位置
}

カスタムしたCellView内でlayoutSubviewsを呼び出し、そこでimageViewの正しい位置を入れてあげればいいそうです。どうもConstrainで確保した位置と実際に表示する画像の位置が紐付いていない(?)みたいで、それを手動でセットしてあげる必要があるみたいです。

あまり納得できてませんがとりあえず試してみたら正常に表示されました。
iOSはレイアウト周りいろいろあってやりづらいですね…。