Anchor Sides/ja: what changed

Revision 2 to 3. Removed lines have a minus sign; added lines have a plus sign.

Old	New		Line
1	1		コントロールのレイアウトを自動的に行うために、いくつかの新しいプロパティ、メソッドが存在します。コントロールの座標を、他のコントロールから一定の距離を保つように設定したり、他のコントロールを基準にして中央揃えにしたりすることができます。下記の例を参照してください。
2	2
3	3		Each of the four sides of a control (Left, Top, Right, Bottom) can now be anchored/bound to a side of another control. For example you can now anchor the left side of TEdit to the right side of a TLabel. Everytime the Label is moved or resized the Edit's left side will follow, which normally results in moving the Edit parallel to the Label.
4	4
5	5		# 例 1
6	6
7		-	~~`+--------+ +-------+`\~~
8		-	~~`\| Label1 \| \| Edit1 \|`\~~
9		-	~~`+--------+ \| \|`\~~
10		-	~~` +-------+`~~
	7	+	```
	8	+	+--------+ +-------+
	9	+	\| Label1 \| \| Edit1 \|
	10	+	+--------+ \| \|
	11	+	+-------+
	12	+	```
11	13
12	14		## コーディング内容
13	15
14	16		``` pascal
15	17		Edit1.AnchorSide[akLeft].Side := asrRight;
16	18		Edit1.AnchorSide[akLeft].Control := Label1;
17	19		Edit1.Anchors := Edit1.Anchors + [akLeft];
18	20		```
19	21
20	22		BorderSpacing プロパティで距離を指定できます。
21	23
22	24		``` pascal
23	25		Edit1.BorderSpacing.Left := 10;
24	26		```
25	27
26	28		メソッドを使うことでもできます。
27	29
28	30		``` pascal
29	31		Edit1.AnchorToNeighbour(akLeft, 10, Label1);
30	32		```
31	33
32	34		## Notes
33	35
34	36		The Edit1.Left will follow Label1.Left+Label1.Width, not the other way around. That means, moving Label1 will move Edit1. But moving Edit1 will be undone by the LCL. If you also anchor the right side of Label1 to the left side of Edit1, you created a circle, and this can result together with some other autosize properties in a loop. This is ignored by the LCL or automagically repaired when the Parent.AutoSize is true.
35	37
36	38		## Via the Anchor Editor
37	39
38	40		The anchor editor is a floating window that is available via the menu View / Anchor Editor or via the button on the Anchors property in the object inspector.
39	41
40	42		![](/wiki-images/6/6d/Anchoreditor.png)
41	43
42	44		# 例 2
43	45
44	46		You can anchor the Edit's top side to follow the Label's top side:
45	47
46	48		+--------+ +-------+
47	49		\| Label1 \| \| Edit1 \|
48	50		+--------+ \| \|
49	51		+-------+
50	52
51	53		``` pascal
52	54		Edit1.AnchorSide[akTop].Side := asrTop;
53	55		Edit1.AnchorSide[akTop].Control := Label1;
54	56		Edit1.Anchors := Edit1.Anchors + [akTop];
55	57		```
56	58
57	59		メソッドを使うことでもできます。
58	60
59	61		``` pascal
60	62		Edit1.AnchorParallel(akTop,0,Label1);
61	63		```
62	64
63	65		# 例 3
64	66
65	67		Centering a Label vertically to an Edit:
66	68
67	69		+-------+
68	70		+--------+ \| \|
69	71		\| Label1 \| \| Edit1 \|
70	72		+--------+ \| \|
71	73		+-------+
72	74
73	75		``` pascal
74	76		Edit1.AnchorSide[akTop].Side := asrCenter;
75	77		Edit1.AnchorSide[akTop].Control := Label1;
76	78		Edit1.Anchors := Edit1.Anchors + [akTop] - [akBottom];
77	79		```
78	80
79	81		メソッドを使うことでもできます。
80	82
81	83		``` pascal
82	84		Edit1.AnchorVerticalCenterTo(Label1);
83	85		```
84	86
85	87		Obviously anchoring the bottom side of Edit1 does not make sense when centering.
86	88
87	89		# 新しいプロパティ
88	90
89	91		``` pascal
90	92		property AnchorSide[Kind: TAnchorKind]: TAnchorSide read GetAnchorSide;
91	93		```
92	94
93	95		This is not published in the [[IDE Window: Object Inspector\|object inspector]]. You can edit it in the designer via the [[IDE Window: Anchor Editor\|anchor editor]] (Menu: View -\> View anchor editor, or click on button of 'Anchors' property).
94	96
95	97		# New methods to easily configure common layouts
96	98
97	99		``` pascal
98	100		procedure AnchorToNeighbour(Side: TAnchorKind; Space: integer;
99	101		Sibling: TControl);
100	102		procedure AnchorParallel(Side: TAnchorKind; Space: integer;
101	103		Sibling: TControl);
102	104		procedure AnchorHorizontalCenterTo(Sibling: TControl);
103	105		procedure AnchorVerticalCenterTo(Sibling: TControl);
104	106		procedure AnchorAsAlign(TheAlign: TAlign; Space: Integer);
105	107		```
106	108
107	109		AnchorVerticalCenterTo works with Parent too. Then it will center on the client area, that means the center of the control is at ClientHeight div 2.
108	110
109	111		Center anchoring is not yet fully supported when computing the size of the parent. For example when you put a label center anchored into a Groupbox1 and set Groupbox1.AutoSize to true then Groupbox1 height will shrink leaving no space for the label. The solution is to center to a control that is not centered. For example center a Label1 to a ComboBox and use for the ComboBox the default anchors (Anchors=\[akLeft,akTop\]).
110	112
111	113		# Anchoring to invisible controls
112	114
113	115		Since 0.9.25 rev 12800 anchoring to invisible controls has changed to work more intuitively. For example: The below controls A, B, C are anchored (C.Left to B.Right and B.Left to A.Right):
114	116
115		-	~~` +---+ +---+ +---+`\~~
116		-	~~` \| A \| \| B \| \| C \|`\~~
117		-	~~` +---+ +---+ +---+`~~
	117	+	```
	118	+	+---+ +---+ +---+
	119	+	\| A \| \| B \| \| C \|
	120	+	+---+ +---+ +---+
	121	+	```
118	122
119	123		If B is hidden (Visible:=false) then C.Left will skip B and use the right of A, resulting in
120	124
121		-	~~` +---+ +---+`\~~
122		-	~~` \| A \| \| C \|`\~~
123		-	~~` +---+ +---+`~~
	125	+	```
	126	+	+---+ +---+
	127	+	\| A \| \| C \|
	128	+	+---+ +---+
	129	+	```
124	130
125	131		# Circular references
126	132
127	133		You can build circular references by anchoring two sides to each other, which creates an impossible anchoring. The LCL notices that, but will not raise an exception, because it can be a temporary circle. For example: A row of buttons. Button1 is left of Button2, Button2 is left of Button3. Now the order is changed to: Button3, Button1, Button2. If the reanchoring is started with Button3, a circle is created temporarily and is fixed when the reordering is completed. The LCL detects circles and will not move the Button. Circles are not the only anomaly.
128	134
129	135		There is one exception to this rule. If the Parent.AutoSize is true, then the LCL will automatically break circles on autosize and writes a warning via debugln (windows: --debug-log.txt, linux, et al: stdout). Which anchor is broken depends on the order of controls and the sides. So, temporary circles are still allowed with AutoSize=true if you enclose the change in
130	136
131	137		``` pascal
132	138		Parent.DisableAutosizing;
133	139		try
134	140		// change anchors, aligns, bounds...
135	141		finally
136	142		Parent.EnableAutosizing;
137	143		end;
138	144		```
139	145
140	146		The AutoSize algorithm does not only break circles, but fixes Align/AnchorSide inconsistencies too.
141	147
142	148		Eventually it would be good to add some hints in the designer or a tool to list the circles and inconsistencies.
143	149
144	150		# 関連情報
145	151
146	152		- [[Autosize / Layout]]
147	153		- [[Example: Anchors. How to reliably align dynamically created controls under changing visibility]]
148	154
149	155		---
150	156		From the Free Pascal wiki, page "Anchor Sides/ja", as it stood on 2020-02-09 after a change by GAN, out of the wiki's dump of 2024-05-26. Copyright stays with the author who wrote it, according to the old wiki's [[Licensing]] page. If you have concerns about this material, [message the admin](/wiki-contact).

Back to history