こんにちは、あんこ先生です。
コントロールの追従ってご存じですか？
コントロールＡを移動すると、コントロールＢもついてくる機能です。
フォームや空じゃないギャラリーを作ると最初から設定されているので存在自体は見たことがあると思います。
正直うっとうしいなぁと思いつつ、数式を書き換えてる方が多いのではないでしょうか？
実はこの追従、ニッチな機能ですが狙って使うととても便利なんです。
でも、どうやって計算してるかわからないし、難しい数式なんて組み立てられない。
そんな方のために、今回はコントロールの追従について図解とコード付きで紹介します。
コントロールの追従とは
追従の仕組み
コントロールは座標（XとY）を基準に、WidthとHeightの大きさで設置されます。
追従は、基準となるコントロールの座標、幅や高さを使って被コントロールの座標を算出させる機能です。
そのため、基準となるコントロールが動くたびに、被コントロールの座標が再計算されます。
なお、座標を同じにするとコントロール同士が重なります。
実際にコントロールを追従させる
以下、歯車アイコンを基準に、顔アイコンを追従させていきます。
両アイコンのサイズは幅100、高さ100です。
右側に追従
歯車アイコンの右側に顔アイコンをぴったり追従させます。
右側に付けるため、歯車アイコンの座標から歯車アイコンの幅だけ右にずれた座標を求めます。
具体的には次の式で顔アイコンのX座標を算出します。
歯車アイコンのX座標 ＋ 歯車アイコンの幅
//顔.X
歯車.X+歯車.Widthこれで歯車アイコンを移動すると顔アイコンもついてきます。
左側に追従
今度は歯車アイコンの左側に顔アイコンをぴったり追従させます。
左側に付けるため、歯車アイコンの座標から顔アイコンの幅だけ左にずれた座標を求めます。
具体的には次の式で顔アイコンのX座標を算出します。
歯車アイコンのX座標 - 顔アイコンの幅
//顔.X
歯車.X-顔.Width各アイコンの幅が異なっても大丈夫なように、座標から引く幅を顔アイコンにしているところがポイントです。
下側に追従
次に歯車アイコンの下側に顔アイコンをぴったり追従させます。
下側に付けるため、歯車アイコンの座標から歯車アイコンの高さだけ下にずれた座標を求めます。
具体的には次の式で顔アイコンのY座標を算出します。
歯車アイコンのY座標 + 歯車アイコンの高さ
//顔.Y
歯車.Y+歯車.Height
上側に追従
最後は歯車アイコンの上側に顔アイコンをぴったり追従させます。
上側に付けるため、歯車アイコンの座標から顔アイコンの高さだけ上にずれた座標を求めます。
具体的には次の式で顔アイコンのY座標を算出します。
歯車アイコンのY座標 - 顔アイコンの高さ
//顔.Y
歯車.Y-顔.Height各アイコンの高さが異なっても大丈夫なように、座標から引く高さを顔アイコンにしているところがポイントです。
その他の追従
少し間を開けて追従させたい。
歯車アイコンのX座標 + 歯車アイコンの幅 + 開けたい間
//顔.X
歯車.X+歯車.Width+10半分だけずらせて追従させたい。
歯車アイコンのX座標 + 歯車アイコンの幅 / 2
//顔.X
歯車.X+歯車.Width/2コントロールを追従させる方法のまとめ
今回は、コントロールを追従させる方法を紹介しました。
設定は結構かんたんでしたが、使いどころを見出せないかもしれません。
たとえば、変数を使って基準コントロールの座標を変えると、他コントロールも追従してくるのでメンテナンスがとても楽になります。
範囲指定でコントロールを動かすと、微調整が難しいですからね。
実際に試して、その違いを体験してみてください。
ご支援よろしくおねがいします
この記事を気に入ってくださった方、寄付してあげてもいいよという方がいらっしゃっいましたら、ご支援いただけると助かります。
下記リンクからAmazonギフト券で、金額は15円からお気持ちを入力してください。
受取人のメールアドレスは amazon@anko7793.com までお願いします。
メッセージもいただけるとたいへん喜びます。
よろしくお願いします。
コントロールを直接動かすと座標の数式がクリアされるので注意しよう！