iOSアプリを作ってみる (9) - Autolayoutに振り回される その2
前の記事で、レイアウトはほぼ完璧に調整されたはずだったのですが、事件はiOS6.1のシミュレーターでテストしているときに起こりました。一目瞭然なので、画面を見ていただきましょう。
これを見たとき、OH! NO!!!!と叫んでしまったのはここだけの話です。
何がいけない？
問題は3つめと4つめの選択肢の間のVertical spacesがつぶれて、2つのボタンがくっついて見えるところにあるのですが、よくよく画面を眺めていると、原因は別のところにありそうです。
これは、iOS7とiOS6で各要素の高さを比べてみたところです。右側のiOS6.1の画面は、各部品が明らかに全体的に下に配置されているのが分かると思います。画面右上のアイコン、画面上中央の単語、最初の選択肢のボタンなどが、iOS7の画面よりも下にあります。4つめの選択肢や画面右下のQuitボタンは同じ位置にあり、第3ボタンと第4ボタンの間の空白が割を食った格好になっています。
ちなみに、漢字の書かれている単語というラベルは、Top spacesで77ポイントが優先度1000(最優先)で設定されているので、この77ポイントという空白の大きさが変更されたとは考えにくいです。それよりも、むしろTop spacesをどこを基準にしているのかというのが、iOS7とiOS6.1で異なっているのが原因と考えるのが妥当なようです。
アイコンの上の部分に小さな正方形を書いてみましたが、iOS6.1では、時刻などの書いてあるステータスバーの下から空白を確保しているのに対して、iOS7では画面上端を基準にしているようです。
それでは、なぜ第3ボタンと第4ボタンの間が詰まってしまったのか。これは、恥ずかしながら設定ミスでした。実は試行錯誤の中で、Constraintsだけではなくて優先度もいじって実験していました。前回記事の方法を採る場合は、結果的に優先度はすべて1000でOKだったのですが、実験の時にそれよりも小さな数字、具体的には986という数字が入っており、それを1000に変更し直すのを忘れていたのです。その結果、第3ボタンと第4ボタンの間のConstraintsの値の優先度が低いと判断され、そこがつぶてしまったという訳です。ここは1000に戻しておきます。
仕様は仕様、ではどうするか？
とは言え、仕様は仕様ということで対策を考えないと行けません。前回と同じアプローチで考えると、
この3種類の画面に対応しないと行けないので設定が複雑になるところですが、ここはズルさせてもらいました。実は、単語が表示される下の部分にピンインを表示させるラベルが埋まっています。ただ、ボタン表示時はピンインは隠されているので、ここの部分を多少詰めても見た目には問題ありません。実際には、単語の入るラベルとピンインの入るラベルの間には、固定で8ポイントのvertical spaceが設定されていたのですが、この部分の優先度を999に下げてやりました。これによって、この部分の優先度が低いために、3.5inchのiOS6.1画面の場合は、この部分がつぶれる事になります。すでに書いたように、この部分はスペースが詰められても実害はあまりないはずです。
結果を見てみましょう。
問題なさそうです。
やっぱり実際に試してみないと分からない事が多いです。。。
