• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# Development of Layout Container Components<a name="EN-US_TOPIC_0000001052661991"></a>
2
3Layout container components consist of basic view classes. You can set the view positions to achieve nested and overlapped layouts, set the layout type and margin to standardize the child components in the layout, and call certain functions to implement layout views based on parent and sibling components.
4
5## UISwipeView<a name="section13631719181717"></a>
6
7## When to Use<a name="section11299120102617"></a>
8
9**UISwipeView**  inherits from  **UIViewGroup**. In addition to the  **Add**,  **Remove**, and  **Insert**  functions,  **UISwipeView**  provides the functions to swipe contents by page and center the current page after swiping. This component can be horizontally or vertically centered. Child components added via the  **Add**  function are automatically horizontally or vertically centered, adaptive to the  **UISwipeView**  direction, in the sequence they were added.
10
11## Available APIs<a name="section767434119261"></a>
12
13**Table  1** Available functions  in SwipeView
14
15<a name="table143378205264"></a>
16<table><thead align="left"><tr id="row8336122032615"><th class="cellrowborder" valign="top" width="50%" id="mcps1.2.3.1.1"><p id="p13361520162611"><a name="p13361520162611"></a><a name="p13361520162611"></a>Function</p>
17</th>
18<th class="cellrowborder" valign="top" width="50%" id="mcps1.2.3.1.2"><p id="p153361920112617"><a name="p153361920112617"></a><a name="p153361920112617"></a>Description</p>
19</th>
20</tr>
21</thead>
22<tbody><tr id="row9336720172616"><td class="cellrowborder" valign="top" width="50%" headers="mcps1.2.3.1.1 "><p id="p83365206267"><a name="p83365206267"></a><a name="p83365206267"></a>void SetCurrentPage(uint16_t index);</p>
23</td>
24<td class="cellrowborder" valign="top" width="50%" headers="mcps1.2.3.1.2 "><p id="p1833612017261"><a name="p1833612017261"></a><a name="p1833612017261"></a>Sets the current page.</p>
25</td>
26</tr>
27<tr id="row15336172002613"><td class="cellrowborder" valign="top" width="50%" headers="mcps1.2.3.1.1 "><p id="p0336162072613"><a name="p0336162072613"></a><a name="p0336162072613"></a>uint16_t GetCurrentPage()</p>
28</td>
29<td class="cellrowborder" valign="top" width="50%" headers="mcps1.2.3.1.2 "><p id="p433615207262"><a name="p433615207262"></a><a name="p433615207262"></a>Obtains the current page.</p>
30</td>
31</tr>
32<tr id="row9336920102614"><td class="cellrowborder" valign="top" width="50%" headers="mcps1.2.3.1.1 "><p id="p6336520102619"><a name="p6336520102619"></a><a name="p6336520102619"></a>UIView* GetCurrentView() const</p>
33</td>
34<td class="cellrowborder" valign="top" width="50%" headers="mcps1.2.3.1.2 "><p id="p16336112062612"><a name="p16336112062612"></a><a name="p16336112062612"></a>Obtains the current view.</p>
35</td>
36</tr>
37<tr id="row03371820162616"><td class="cellrowborder" valign="top" width="50%" headers="mcps1.2.3.1.1 "><p id="p7336172082611"><a name="p7336172082611"></a><a name="p7336172082611"></a>void SetOnSwipeListener(OnSwipeListener&amp; onSwipeListener)</p>
38</td>
39<td class="cellrowborder" valign="top" width="50%" headers="mcps1.2.3.1.2 "><p id="p15336172012269"><a name="p15336172012269"></a><a name="p15336172012269"></a>Sets the swiping callback class.</p>
40</td>
41</tr>
42<tr id="row23371520172613"><td class="cellrowborder" valign="top" width="50%" headers="mcps1.2.3.1.1 "><p id="p733792017267"><a name="p733792017267"></a><a name="p733792017267"></a>void SetAnimatorTime(uint16_t time);</p>
43</td>
44<td class="cellrowborder" valign="top" width="50%" headers="mcps1.2.3.1.2 "><p id="p16337112012613"><a name="p16337112012613"></a><a name="p16337112012613"></a>Sets the animator event.</p>
45</td>
46</tr>
47<tr id="row12337152011269"><td class="cellrowborder" valign="top" width="50%" headers="mcps1.2.3.1.1 "><p id="p9337220152610"><a name="p9337220152610"></a><a name="p9337220152610"></a>void SetLoopState(bool loop)</p>
48</td>
49<td class="cellrowborder" valign="top" width="50%" headers="mcps1.2.3.1.2 "><p id="p12337172032612"><a name="p12337172032612"></a><a name="p12337172032612"></a>Sets whether to enable the cyclic state.</p>
50</td>
51</tr>
52<tr id="row1033713201266"><td class="cellrowborder" valign="top" width="50%" headers="mcps1.2.3.1.1 "><p id="p1933792092610"><a name="p1933792092610"></a><a name="p1933792092610"></a>UIView* GetViewByIndex(uint16_t index);</p>
53</td>
54<td class="cellrowborder" valign="top" width="50%" headers="mcps1.2.3.1.2 "><p id="p033714208263"><a name="p033714208263"></a><a name="p033714208263"></a>Obtains a view based on its index.</p>
55</td>
56</tr>
57</tbody>
58</table>
59
60##   Development Procedure \(Non-Cyclic Horizontal Swiping\)<a name="section111911175287"></a>
61
621.  Create a horizontal swiping  **UISwipeView**.
63
64    ```
65    UISwipeView* swipe = new UISwipeView(UISwipeView::HORIZONTAL);
66    ```
67
682.  Add child components to  **UISwipeView**.
69
70    ```
71    UILabelButton* button1 = new UILabelButton();
72    button1->SetPosition(0, 0, g_ButtonW, g_ButtonH);
73    button1->SetText("button1");
74    swipe->Add(button1);
75    UILabelButton* button2 = new UILabelButton();
76    button2->SetPosition(0, 0, g_ButtonW, g_ButtonH);
77    button2->SetText("button2");
78    swipe->Add(button2);
79    UILabelButton* button3 = new UILabelButton();
80    button3->SetPosition(0, 0, g_ButtonW, g_ButtonH);
81    button3->SetText("button3");
82    swipe->Add(button3);
83    ```
84
853.  Verify that the components are swiping horizontally but not cyclically.
86
87    **Figure  1**  Horizontal swiping effect of  **UISwipeView**<a name="fig933862020262"></a>
88
89
90    ![](figures/en-us_image_0000001053247975.gif)
91
92
93##   Development Procedure \(Cyclic Horizontal Swiping\)<a name="section1976914915282"></a>
94
951.  Create a horizontal swiping  **UISwipeView**  and add its child components.
96
97    ```
98    UISwipeView* swipe = new UISwipeView(UISwipeView::HORIZONTAL);
99    UILabelButton* button1 = new UILabelButton();
100    button1->SetPosition(0, 0, g_ButtonW, g_ButtonH);
101    button1->SetText("button1");
102    swipe->Add(button1);
103    UILabelButton* button2 = new UILabelButton();
104    button2->SetPosition(0, 0, g_ButtonW, g_ButtonH);
105    button2->SetText("button2");
106    swipe->Add(button2);
107    UILabelButton* button3 = new UILabelButton();
108    button3->SetPosition(0, 0, g_ButtonW, g_ButtonH);
109    button3->SetText("button3");
110    swipe->Add(button3);
111    ```
112
1132.  Enable cyclic swiping for the  **UISwipeView**.
114
115    ```
116    swipe->SetLoopState(true);
117    ```
118
1193.  Verify that the components are swiping horizontally and cyclically.
120
121    **Figure  2**  Cyclic horizontal swiping effect of  **UISwipeView**<a name="fig1533902042618"></a>
122
123
124    ![](figures/en-us_image_0000001053207924.gif)
125
126
127## GridLayout<a name="section46819199173"></a>
128
129## When to Use<a name="section831618247294"></a>
130
131**GridLayout**  provides the basic layout capability to set the number of grid rows and columns. Child components added via the  **Add**  function are automatically arranged after the  **LayoutChildren\(\)**  function is called.
132
133## Available APIs<a name="section597214622912"></a>
134
135**Table  2** Available functions  in GridLayout
136
137<a name="table109971146192913"></a>
138<table><thead align="left"><tr id="row9997104632911"><th class="cellrowborder" valign="top" width="50%" id="mcps1.2.3.1.1"><p id="p119971146192917"><a name="p119971146192917"></a><a name="p119971146192917"></a>Function</p>
139</th>
140<th class="cellrowborder" valign="top" width="50%" id="mcps1.2.3.1.2"><p id="p7997204615291"><a name="p7997204615291"></a><a name="p7997204615291"></a>Description</p>
141</th>
142</tr>
143</thead>
144<tbody><tr id="row149976467292"><td class="cellrowborder" valign="top" width="50%" headers="mcps1.2.3.1.1 "><p id="p159971046102912"><a name="p159971046102912"></a><a name="p159971046102912"></a>void SetRows(const uint16_t&amp; rows)</p>
145</td>
146<td class="cellrowborder" valign="top" width="50%" headers="mcps1.2.3.1.2 "><p id="p14997846132913"><a name="p14997846132913"></a><a name="p14997846132913"></a>Sets the number of grid rows.</p>
147</td>
148</tr>
149<tr id="row299774652915"><td class="cellrowborder" valign="top" width="50%" headers="mcps1.2.3.1.1 "><p id="p099744615296"><a name="p099744615296"></a><a name="p099744615296"></a>void SetCols(const uint16_t&amp; cols)</p>
150</td>
151<td class="cellrowborder" valign="top" width="50%" headers="mcps1.2.3.1.2 "><p id="p19971646142910"><a name="p19971646142910"></a><a name="p19971646142910"></a>Sets the number of grid columns.</p>
152</td>
153</tr>
154<tr id="row1199724616291"><td class="cellrowborder" valign="top" width="50%" headers="mcps1.2.3.1.1 "><p id="p18997846202912"><a name="p18997846202912"></a><a name="p18997846202912"></a>void LayoutChildren(bool needInvalidate = false)</p>
155</td>
156<td class="cellrowborder" valign="top" width="50%" headers="mcps1.2.3.1.2 "><p id="p1997174618291"><a name="p1997174618291"></a><a name="p1997174618291"></a>Lays out child components.</p>
157</td>
158</tr>
159</tbody>
160</table>
161
162## How to Develop<a name="section1418253410306"></a>
163
1641.  Create a  **GridLayout**  instance and set its position and size.
165
166    ```
167    GridLayout* layout_ = new GridLayout();
168    layout_->SetPosition(0, g_y, HROIZONTAL_RESOLUTION, 200);
169    layout_->SetLayoutDirection(LAYOUT_HOR);
170    layout_->SetRows(2);
171    layout_->SetCols(2);
172    ```
173
1742.  Create  **UILabelButton**  instances.
175
176    ```
177    UILabelButton* bt1 = new UILabelButton();
178    bt1->SetPosition(0,0,100,50);
179    bt1->SetText("bt1");
180    UILabelButton* bt2 = new UILabelButton();
181    bt2->SetPosition(0, 0, 100, 50);
182    bt2->SetText("bt2");
183    UILabelButton* bt3 = new UILabelButton();
184    bt3->SetPosition(0, 0, 100, 50);
185    bt3->SetText("bt3");
186    UILabelButton* bt4 = new UILabelButton();
187    bt4->SetPosition(0, 0, 100, 50);
188    bt4->SetText("bt4");
189    ```
190
1913.  Add child components and call the  **LayoutChildren\(\)**  function.
192
193    ```
194    layout_->Add(bt1);
195    layout_->Add(bt2);
196    layout_->Add(bt3);
197    layout_->Add(bt4);
198    layout_->LayoutChildren();
199    ```
200
2014.  Verify the layout of buttons, as shown in the following figure.
202
203    **Figure  3**  Setting a 2x2 grid and adding four buttons in a layout<a name="fig898719135314"></a>
204    ![](figures/setting-a-2x2-grid-and-adding-four-buttons-in-a-layout.png "setting-a-2x2-grid-and-adding-four-buttons-in-a-layout")
205
206
207