カスタムした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はレイアウト周りいろいろあってやりづらいですね…。

Mon, 19 Jan 2015 10:06:04 +0000   |   Category:iOS

関連記事

About Me

kimihiro-n

Androidアプリを中心にいろいろアプリ作ってます。
T N G

Products

放課後アプリ部
放課後アプリ部
個人アプリ開発者のための集客プラットフォーム作りました。 AndroidやiOSアプリのダウンロード数増加を無料で手伝います!

最速のJSON可視化・解析ツール
JSONを使った開発をスムーズにするためのツールです。 特定の値までのパスを簡単に取れます。
過去に作ったiOSアプリ
明日から本気出すタスク管理 for iOS
過去に作ったAndroidアプリ
明日から本気出すタスク管理 for Android Nagareboshi taplight
Others..

Search Articles