読者です 読者をやめる 読者になる 読者になる

pixyzehn blog

iPhone App, Mac App, Programming, Web service, Tool, Evernote, etc

TableViewCellの編集時にセルと削除ボタンが重なってしまうときの対処方法

f:id:inagex:20140306120249p:plain


ios6以前では重ならないのですが、ios7においてこのように重なってしまうことの解消方法です。


iosではTableViewCellの編集についてけっこう自動でやってくれることが多くて、便利な反面このようなことに対処するときにいろいろはまってしまうことがあります。


この問題は、左にスワイプして削除するという仮定ではうまくいくのでセルの編集時にだけセルの位置をうまく調整しようとしたところ大変でしたので断念しました。


左スワイプして削除ボタンを表示するとこのようにうまくいく。


f:id:inagex:20140306120735p:plain


ではこのテーブルのセルの構造をstoryboardから見てみます。


f:id:inagex:20140306120846p:plain


ここのImageViewはセル全体を覆っているような感じになっています。


そこでstoryboardのAutosizingを使うとうまくこの問題が解決できました。


storyboardの左側にあるこれです。


f:id:inagex:20140306120950p:plain


Autosizingとは、あるUIコンポーネントについて、その親ビューがリサイズされた際にどのように自身の位置とサイズを変更するかというルールを指定しておくことで、自動的に座標を補正するというものです。


これを使います。具体的にはここではTableViewCellを覆っているImageViewのAutosizingがこのように左を起点にリサイズされるようになっていたところを、左を起点に制約されるようにします。


f:id:inagex:20140306121311p:plain


上記から以下のように変更します。


クリックすると赤い線が点線にかわり制約の可否が選択できます。


f:id:inagex:20140306121406p:plain


右のExampleをみるとイメージがかなりつきます。


そうすると編集時かつ左のマイナスアイコンをクリックしたときに出てくるボタンを押したあと出てくる削除ボタンが重ならず表示できます。


f:id:inagex:20140306121540p:plain


ios6ではこのような挙動になります。


f:id:inagex:20140306121648p:plain


きっとどうしたいかによってやり方は千差万別だと思いますが、ひとつの参考になればと思います。