ウィジェットをきっちり真ん中に置く方法

妹「ウィジェットを真ん中に置くのってどうしたらいいのかな。今のところ目分量で、だいたい真ん中のあたりに置いてるんだけど」

「ど真ん中ならそこにアンカーを置けるのでは？」

妹「ど真ん中ではなくて、上下にはずれてるんだけど。それにアンカーだけ置いても見た目変わらないし」

「真ん中におくだけならわりとかんたんだよ。例えばButtonの場合だとこんな感じの手順になる」

「まずアンカーを左上とか真ん中とか１点に集めて、アンカーが花みたいな形の状態にする。花びらがくっついた状態だと引き伸ばしたり縮めたりしない、ただピン留めするだけになる。その状態で真ん中の丸をドラッグすると位置が調節出来る。真ん中なら左右の50%がずれないようにドラッグすればいい。どうしてもずれるなら右側パネルで数字指定する。0.5が丁度真ん中で、それより小さいと左上方向に、大きいと右下方向に寄っていく。画面の縦横の長さが違うと同じ0.1でも実際の長さが変わるのに注意」

「アンカーをボタンがあるべき場所の中心に置いたら、Positionのとこを設定して位置を合わせる。まずサイズXとサイズYでボタン自体の大きさを決める。だいたいの大きさはマウスドラッグして決めて、それに近いキリの良い数字を入力欄に書く。PositionXとPositionYにはそれぞれサイズの半分の数字をマイナスで入れると、その分左上方向にずれて丁度よくなる」

妹「サイズX……？　ここってアンカーから距離を書くところだったのでは？　なんかパラメータの名前も違ってる気がする」

「アンカーが閉じてる状態だとこういう風になるんだよ。開いてる時はアンカーからの距離になる。その方が扱いやすいんだと思う」

妹「数字を入れたり計算したりするのめんどくさそうだなあ」

「じゃあこっちの方法の方法がいいかも。PostionXとYは0のままにして、AlignmentのXとYを0.5にする。ここで言う0.5は画面の話じゃなく、ボタン内部での0.5。ボタンの中心にアンカーを合わせるという意味。初期状態だと0と0だから、ボタンの左上のアンカーが合わさってた。だからPostionでずらす必要があったけど、今度は基準そのものを変えたから0の位置が丁度真ん中にくる」

妹「これだと計算しなくていい？」

「0.5を入れるだけだから、2で割り切れる数字とか考えずに済む。方法としてもPostionで無理に合わせるより、Alignmentを設定する方が推奨されるやり方のような気がする」

妹「この状態だと画面サイズを変えると、ピンでとめてるだけだから、大きさは変わらないってこと？」

「変わらない……はず。ただサンプルを色々見てると、画像はその状態でも大きさかわったりするみたいで、まだ細かいとこはよくわかってないんだけど」

妹「じゃあこのボタンの4隅の位置にアンカーを置いて、拡大縮小も出来るようにしようと思ったらどうすればいいの？」

「そのへんはまだ研究途中なんだけど、とりあえずアンカーを左右同じ位置にする。この例で言えば、Xのminimumが0.3で、Maxinumが0.7。1-0.7は0.3だから、左右端からの距離は0.3で同じになる。今のところそういう感じで調整する以外に方法が見つかってない」

妹「やっぱり計算しないと駄目なのか」

「昔ばがらの方法だと方眼紙にレイアウトを書いてその数字を書き映すってのもあるけど、真ん中を0.5と考えるような仕組みだとそれもかえってむずかしいからね。なるべく桁数の少ない小数で暗算するのが楽なんじゃないかと」

妹「真ん中にボタンを置くところまではいいんだから、そのボタンの四隅に自動でアンカー置いてくれたらいいのに」

「自動でっていうのは無理だけど、Ctrlボタンを押しながらアンカーをドラッグすると、そこに対象物がひっついて動かせることはわかった。まずアンカーを動かして、そのOffsetを0にしてというのをしてたのが、アンカーをマウスで操作するだけで済むようになるから、多少レイアウト作業の効率がよくなる」