Significance and usage of duilib layout, relative layout and absolute Layout

Most of the friends who are new to duilib rely heavily on duilib's built-in designer. They can drag controls and visualize their desired interfaces. However, after a period of time, you will find that the original designer has many bugs, which may crash from time to time. The number of controls supported is limited, the number of attributes is limited, and the exported code is redundant. I asked a few experts at the time. We recommend that you do not use the designer but write the XML code by yourself. At first, handwriting is very troublesome, but a few days later you will find that handwriting is much better than using the designer: You can better understand duilib and be familiar with the attributes of each control, control controls are also more convenient. If you want to write XML files out of the designer, it is very necessary to understand the usage and layout skills of each layout. You can use handwritten XML to create a program interface. I believe this is also true for a duilib user.

 

Here, I would like to remind you that there is an attribute list in the duilib root directory. the XML file contains the introduction of the vast majority of attributes of the majority of controls. If you have any attributes that you don't understand, remember to read them frequently. At the same time, you have to say that the attributes contained in this file are indeed incomplete, for the most comprehensive property information, you can view the source code of each control and the most comprehensive property information in the setattribute function!

 

If you want to write XML by hand, you must have a writing tool. In principle, you only need a tool that can write text. You can select a suitable tool based on your habits, I am currently using the sublime tool. It is very convenient to write XML and the interface is good.

 

The role of the six major la s:

 

The layout directory of duilib stores Layout-related container controls. These six la s are: container, verticallayout, horizaontallayout, tilelayout, tablayout, and childlayout. Containers can be nested with each other. I will explain their usage separately.

 

First of all, I would like to explain that, in the next section, I think that the float attribute of each control is false by default, that is, no absolute positioning is used. This attribute will break the role of each layout.

 

Container:

 

The container layout is a base class for all other la S and controls that contain container features (such as clist and clistcontainerelement). In fact, this layout is rarely used during development, it is used only for other base classes with more advanced la S. Because all the controls in the container layout are automatically filled with the entire layout, and all the controls are stacked together. If you need to overwrite the child controls, in addition, the container is the best choice for adaptive filling as the container changes. In addition to this effect, we generally do not use it.

 

Verticallayout and horizaontallayout:

 

Verticallayout and horizaontallayout are undoubtedly the two most commonly used layout s in duilib. They can be cleverly used to meet most layout requirements. Verticallayout is a vertical layout, and horizaontallayout is a horizontal layout. The two are directly inherited from the container layout.

 

The verticallayout layout will enable all the elements contained by him to be vertically arranged. The horizaontallayout layout will allow all the elements contained by him to be horizontally arranged:

 

 

I intentionally didn't let the control fill the entire container. To demonstrate that the two la s won't force the sum of sub-elements to fill the container, the vertical layout will route them from top to bottom based on the height of each control, the horizontal layout is arranged from left to right according to the width of each control. In addition, we can see that the vertical layout only cares about the height of the child element, and does not force the width of the child element to be equal to the width of the container. This can be seen from the image, the horizontal layout only cares about the width of the child element. These two la s are often nested and used as follows:

 

 

I can see that the outermost layer uses a vertical layout, which contains three horizontal la S (red, green, and blue respectively), and each horizontal layout contains several buttons. This method is often used when writing interfaces! The XML code corresponding to the layout is as follows:

 

 

<? XML version = "1.0" encoding = "UTF-8" standalone = "yes"?> <Window size = "300,226"> <verticallayout width = "300" Height = "318" bkcolor = "# ffffffff"> 

	 



	Tilelayout:



	 



	The tilelayout layout is used for effects similar to the toolbox:



	 



	





	 



	In the previous article, I wrote "Implementation of the listctrl control in duilib" and "Development log of the cool dog music player 13-Improvement of functional blocks on the left", which were completed using this layout. This layout has two key attributes:



	 


<Attribute name = "columns" default = "1" type = "int" comment = "columns, such as (4) "/> <attribute name =" itemsize "default =" 128,128 "type =" size "comment =" fixed subitem size, such as () "/>

	 


	 


	Columns and itemsize attributes, which cannot be used together, should be one of them. You can use the columns attribute to set the number of columns contained in each row. It will automatically arrange the contained elements from left to right from top to bottom according to the columns attribute settings, he fixed the number of columns in each row. Itemsize has two fields. I read the source code and found that the second field is invalid. We only need to use the first field. It sets the region occupied by each element, for example, if the container width is 500 and the itemsize is set to 100x10, each row will contain five elements. When we stretch the form to make the container width 700, then each row will automatically accommodate 7 elements, which means that using this attribute will make the number of elements in each row automatically variable! This is a useful property in many cases. Note that itemsize does not directly set the size of the Child control, but only limits the maximum area of the Child control. For example, if the itemsize is 100x100 and the Child control is set to 50x50, the final size of the Child control is 50x50, and the position of the child control is calculated as X. I hope you can understand this effect by yourself!


	 


	Tablayout:


	 


	Tablayout layout is also commonly used. It is like the ctabctrl control of the MFC tab,


	 


	



	 


	However, in duilib, tablayout is only the following layout interface, but does not contain the top tab button. Therefore, the option control is often used with it, when using him, he will take the next level of elements contained in him as a page, so we usually put them in a horizontal and vertical layout as a page, plan the appearance of each page in the horizontal and vertical layout.


	 


	For details about how to use this control, refer to the demo provided by duilib. I will not go into details!


	 


	Childlayout:


	 


	The childlayout layout is rarely used, because its functions can be replaced by other layout S. Its function is to load the layout from an XML file and embed it into the place where the childlayout layout is located, to use this layout, you only need to specify the xmlfile attribute to set the XML file location. Its significance is that it can separate a large number of complicated XML code. For example, he combined tablayout layout to make the tablayout layout contain five childlayout layout S, and each childlayout layout loads its own layout files from five XML files, respectively, in this way, you can write the layout code in a segmented manner.


	 


	In fact, there is a better label than him, that is, the include label, include does not belong to the layout, but his role is very similar to childlayout in the layout, specify its source attribute to an XML file. Compared with childlayout, the advantage of include is that it can automatically recognize custom controls, but childlayout cannot!


	 


	Here, I would like to mention the custom controls of demo. The custom controls of this demo mislead many people and use the methods of custom controls, embedding an XML layout file into the interface is completely unnecessary. You can directly use the include tag, and an XML code can completely replace the custom control.


	 


	Here is an include usage:


	 

<Include source="Login\ScrollBar.xml" count="1" />

	 


	 


	The source attribute specifies the path of the XML file, and the count attribute specifies the number of resolutions.


	 


	Significance and usage of absolute layout:


	 


	After learning about the usage of the six la S, I learned about the general layout of the interface appearances of various styles, which is far from enough for us to write a beautiful layout appearance, the interface elements can be better controlled only when the relative layout and absolute layout are used together. It is worth mentioning that the relative layout and absolute layout I mentioned here are not a container or control. This is just a technique and a usage method used on the control contained in the container layout, it is often used in horizontal and vertical la S.


	 


	Let me first introduce absolute layout. In general, there is only one difference between absolute layout and relative layout, that is, the float attribute I mentioned earlier, if the float attribute of the control contained in the container is true, the layout is absolute, and if it is false, the layout is relative. Don't underestimate this attribute. The effect it brings can be quite different!


	 


	When the float attribute of the control is set to true, the absolute layout is used. Therefore, the absolute layout is to make the coordinates of the control absolute, in this way, this control is free from the constraints of its container and can set its own location at will! For example, if you set the float attribute for the child controls in the horizontal and vertical la S, the controls will not be automatically arranged horizontally and vertically. My advice is not to use absolute layout without absolute layout! There are three reasons:


	 


	1) The absolute layout destroys the characteristics of each container and is not bound by the container.


	2) The absolute layout makes the coordinates of the control fixed, making it difficult for the control to automatically adjust its position.


	3) The relative layout mentioned later can accomplish almost all the features of absolute layout.


	 


	So why do we need to use absolute layout, because one of its functions cannot be completed with relative layout, that is, to overlap or intersection controls or la s! Sometimes we have to combine the controls to achieve some results. I can make it clear that during the process of playing the cool dog-like player, the entire XML layout Code only uses two absolute la S, one is to compile the search bar, the development log of the imitation codoy music player 2-the compilation of the search bar, and the other is to compile the radio control.


	 


	



	 


	Another very classic example of using absolute layout is "using duilib to make a dynamic background simulator like qq2013" I wrote a few days ago. these examples use absolute layout only when the controls need to overlap and combine new controls. If you do not want the controls to overlap or have no special requirements, it is best not to use absolute layout.


	 


	Although it is not recommended, I also need to talk about the attributes and usage skills related to absolute layout.


	1) set the float attribute to true.


	2) set the POs attribute. This attribute is valid only when float is true. It contains four fields that indicate the position of the upper left and lower right coordinates of the control, however, we recommend that you only specify the first two fields to set the coordinates in the upper-left corner of the control. The width and height attributes of the control are used to control the coordinates in the lower-right corner! It will be clear when you modify it later!


	 


	Here is an example:

<Label name="MusicName" float="true" pos="100,100" width="26" height="22" textcolor="#FF505050" endellipsis="true" />

	

A label control is set here, which is placed on the coordinates of 100,100 in the upper left corner. The control height is 22 and the width is 26.


	I have to mention a very useful attribute, that is, the relativepos attribute. This attribute is not listed in the attribute list, which is summarized by myself.


	 

<Attribute name = "relativepos" default = "," Type = "rect" comment = "Sets Relative Movement. When float is true, it indicates horizontal and vertical displacement values respectively, horizontal and vertical scaling value. Recommended unit: 50 or 100 "/>

	 


	With this attribute, you can make the control have a certain feature of relative layout, that is, you can adjust the location and size according to the container size! I used this feature in "log 2 for the development of the imitation codoy music player-writing the search bar" to allow the search button to be moved by myself. The first two fields of this attribute represent the horizontal and vertical displacement values, and the last two fields represent the zoom value. You should practice the specific effect yourself! In addition, this property has a serious bug by default, that is, after the form is minimized and then restored, the control of this property will automatically shift irregularly. I fixed this bug, for details, see "test log 2 of the imitation codoy music player-writing the search bar".


	 


	This will introduce the absolute layout, and then the most important part of the entire article, relative layout!


	 


	Meanings and usage of relative layout:


	 


	I put the introduction of relative layout at the end, because it is very important!


	 


	When the control or container is used inside the container, setting the float attribute to flase (the default value of duilib is false) is relative layout. This is what I highly recommend. I also mentioned earlier that I used absolute layout for only two of the hundreds of controls in the whole layout of cool dog-like writing, the rest are relative la S. Its advantages are as follows:


	 


	1) The layout and controls can be automatically adjusted based on the size of the form, which is very important.


	2) computing the locations of various controls without the need for absolute Layout


	3) Adjust the position of the previous control in the container, and the subsequent controls will automatically adjust the coordinates.


	 


	In fact, using relative layout means to use the automatic arrangement feature of layout controls!


	 


	After the relative layout is used, you do not need to set the float and Pos attributes. Generally, you only need to set or even not set the width and height attributes. This is very important. If the size of your control or layout is fixed, set the width and height attributes, if you want the widget or layout to automatically adjust the size and position based on the size of the form, do not set these two attributes. If only one attribute is set, for example, width is set to 100, but height is not set, its height is automatically adjusted and Its width is fixed. The parent container automatically arranges its contained elements so that controls containing the width and height attributes occupy the corresponding size, allocate the remaining space to a container or control without setting the wieth and HEIGHT attributes. Let's look at the following example:


	 

<?xml version="1.0" encoding="utf-8" standalone="yes" ?><Window size="300,300">    <VerticalLayout name="Father">        <HorizontalLayout name="Sub1" height="50" >        </HorizontalLayout>        <VerticalLayout name="Sub2">        </VerticalLayout>        <HorizontalLayout name="Sub3" height="50" >        </HorizontalLayout>    </VerticalLayout></Window>

	 


	



	The size of the form is 300x300, while the outermost layer is a Vertical Container named fahter, which contains three sub-containers. Father does not specify the width and height, so when I change the size of the form, Father will automatically adjust its size to the same size as the form, the width attribute is specified for all the three sub-containers, so the width of the three sub-containers is the same as that of father, that is, their width is the same as the width of the form and will be automatically adjusted. The height of sub1 and sub3 is set to 50, so their height is fixed, and sbu2 is not specified, so it will automatically occupy all space except sub1 and sub2! In fact, the layout of this example is a very common example of interface layout. For example, cool dog, sub1 and sub3 respectively indicate the title bar and status bar, And sub2 is the main interface of the program:


	 


	



	 


	For more detailed layout analysis of codoy, refer to my previous blog "log on the development of the codoy music player-overall framework analysis", which is a part of almost every codoy development, I will analyze the layout.


	 


	By combining these knowledge, you can now write a general layout that automatically adjusts the size, but you cannot accurately control the location of each control.


	 


	Taking advantage of the automatic placeholder feature described above, I will write an example in the title bar:


	 

<Horizontallayout name = "background" Height = "30" bkimage = "file = 'ui \ bkimage \ 4.jpg 'source = '0, 30'"> <! -- Title bar --> <label text = "skin and window adjustment -- redrain player" textcolor = "# ffffffff" textpadding = "5, 0, 300 "font =" 1 "autocalcwidth =" false "width =" "/> <control/> <button name =" closebtn "width =" 23 "Height =" 18" padding = "0, 6, 0, 0 "normalimage =" UI \ title \ close_normal.png "hotimage =" UI \ title \ close_hover.png "pushedimage =" UI \ title \ close_down.png "/>

	 



	





	 



	This example is the title bar of the skin replacement form of my cool dog player. Its outer layer is a horizontal layout with a height of 30 and the width is adjusted with the form. Place the title text on the left and the close button on the rightmost side. If the text and close button automatically adjust the position after the form width is adjusted, the middle space must be filled. In this case, we need a placeholder control without setting the width and height attributes for it, so that it will automatically occupy the remaining space! It achieves the effect of Automatic Location adjustment for the relative layout. This method is very commonly used in relative la s! When there are no other requirements for this placeholder control, we recommend that you use the control as shown in my example, because it is the ancestor base class of all controls and containers, the code and attributes are relatively minimal, which helps improve program efficiency!



	 



	After fully understanding the placeholder technique, you can use some fine-tuning attributes to perfectly control various controls. These fine-tuning attributes areInset, padding, childpaddingThese attributes are described as follows:



	 


<Attribute name = "padding" default = "," Type = "rect" comment = "margin, such) "/> <attribute name =" Inset "default =", "Type =" rect "comment =" container internal margin, such) "/> <attribute name =" childpadding "default =" 0 "type =" DWORD "comment =" extra distance between child controls, such as (4) "/>

	

These attributes are valid only when float is false, that is, relative layout.


	 


	Inset attributes


	 


	This is for the container control. After it is used, all elements that use relative la s will be restricted within the set range, it is suitable for the overall coordinate control of the elements used in the container. For example, when we used the tilelayout container to store every tool in the toolkit, we first set the inset attribute to limit all tool items to a certain extent, example:


	 

<TileLayout name="listctrl" width="540" height="400" inset="20,20,0,20" childpadding="20" vscrollbar="true" columns="2" bkimage="CustomList\List_bk.png" itemhotimage="CustomList\ListItem_bk_hover.png" itemselectedimage="CustomList\ListItem_bk_hover.png"></TileLayout>

	 


	



	 


	By setting the inset attribute, all elements are limited to a certain range without the need to repeatedly set the attributes of each element.


	 


	Childpadding attributes:


	 


	The childpadding attribute sets the spacing between each element in the container, which is easy to understand. The childpadding attribute is also used in the preceding example. This attribute represents different meanings in different containers. In the horizontal layout, it represents the horizontal interval between child controls, and in the vertical layout, it represents the vertical interval between child controls, the interval between lines in the tilelayout container!


	 


	Padding attributes:


	 


	The padding attribute is the most common attribute in relative layout! It is used to set the position relative to the previous control. The key to fine-tuning the control position of this attribute is. Generally, only the first two fields are used to set the left margin and top margin. The last two fields are invalid, or there is a problem (why is there a problem? See the source code ). However, using these two fields is sufficient. This is the layout code of my cool dog-like player:


	 


	 

<Horizontallayout Height = "30" Inset = "77,0, 0,0" bkimage = "UI \ statusbar \ status_bk.png"> <! -- Status Bar --> <button width = "31" Height = "30" padding = "0, 0, 0,0 "normalimage =" UI \ statusbar \ add_normal.png "hotimage =" UI \ statusbar \ add_hover.png "pushedimage =" UI \ statusbar \ add_down.png "/> <button width =" 31 "Height = "30" padding = "40, 0, 0, 0 "normalimage =" UI \ statusbar \ locate_normal.png "hotimage =" UI \ statusbar \ callback "pushedimage =" UI \ statusbar \ locate_down.png "/> <button width =" 31 "Height = "30" padding = "40, 0, 0,0 "normalimage =" UI \ statusbar \ search_normal.png "hotimage =" UI \ statusbar \ search_hover.png "pushedimage =" UI \ statusbar \ search_down.png "/> <button width =" 31 "Height = "30" padding = "40, 0, 0, 0 "normalimage =" UI \ statusbar \ setting_normal.png "hotimage =" UI \ statusbar \ callback "pushedimage =" UI \ statusbar \ setting_down.png "/> <control/> <label text =" redrain imitation of the cool dog music box directui pai_^ "textpadding =, 0, 0 "width =" 30 "font =" 0 "/>

	 



	 



	





	 



	Use the padding attribute, which is the relative position of the four buttons at the bottom. If I want to shift the four controls to the right by 10 pixels, I just need to set the padding attribute of the first button to padding = ", 0, other la s do not need to be modified!



	 



	Conclusion



	 



	The layout knowledge is almost summarized here. For new duilib users, we suggest you look at the layout files of various demos. They cover almost all the knowledge points. Then I wrote several layout codes manually based on my summary. I believe that I will soon be able to write the interface layout. In addition, I often analyze the layout in my previous blog. You can also check the layout.



	 



	I haven't been using duilib for a long time. The level is limited. Please leave a message to me and I will correct it in time!



	 



	 



	Reprinted from: http://www.lxway.net/440482616.html

 

	Significance and usage of duilib layout, relative layout and absolute Layout