• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# Development Guidelines on Layout Container Components<a name="EN-US_TOPIC_0000001052661991"></a>
2
3-   [UISwipeView](#section13631719181717)
4-   [When to Use](#section11299120102617)
5-   [Available APIs](#section767434119261)
6-   [Development Procedure \(Non-Cyclic Horizontal Swiping\)](#section111911175287)
7-   [Development Procedure \(Cyclic Horizontal Swiping\)](#section1976914915282)
8-   [GridLayout](#section46819199173)
9-   [When to Use](#section831618247294)
10-   [Available APIs](#section597214622912)
11-   [How to Develop](#section1418253410306)
12
13Layout 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.
14
15## UISwipeView<a name="section13631719181717"></a>
16
17## When to Use<a name="section11299120102617"></a>
18
19**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.
20
21## Available APIs<a name="section767434119261"></a>
22
23**Table  1** Available functions  in SwipeView
24
25<a name="table143378205264"></a>
26<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>
27</th>
28<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>
29</th>
30</tr>
31</thead>
32<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>
33</td>
34<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>
35</td>
36</tr>
37<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>
38</td>
39<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>
40</td>
41</tr>
42<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>
43</td>
44<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>
45</td>
46</tr>
47<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>
48</td>
49<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>
50</td>
51</tr>
52<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>
53</td>
54<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>
55</td>
56</tr>
57<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>
58</td>
59<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>
60</td>
61</tr>
62<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>
63</td>
64<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>
65</td>
66</tr>
67</tbody>
68</table>
69
70##   Development Procedure \(Non-Cyclic Horizontal Swiping\)<a name="section111911175287"></a>
71
721.  Create a horizontal swiping  **UISwipeView**.
73
74    ```
75    UISwipeView* swipe = new UISwipeView(UISwipeView::HORIZONTAL);
76    ```
77
782.  Add child components to  **UISwipeView**.
79
80    ```
81    UILabelButton* button1 = new UILabelButton();
82    button1->SetPosition(0, 0, g_ButtonW, g_ButtonH);
83    button1->SetText("button1");
84    swipe->Add(button1);
85    UILabelButton* button2 = new UILabelButton();
86    button2->SetPosition(0, 0, g_ButtonW, g_ButtonH);
87    button2->SetText("button2");
88    swipe->Add(button2);
89    UILabelButton* button3 = new UILabelButton();
90    button3->SetPosition(0, 0, g_ButtonW, g_ButtonH);
91    button3->SetText("button3");
92    swipe->Add(button3);
93    ```
94
953.  Verify that the components are swiping horizontally but not cyclically.
96
97    **Figure  1**  Horizontal swiping effect of  **UISwipeView**<a name="fig933862020262"></a>
98
99
100    ![](figure/en-us_image_0000001053247975.gif)
101
102
103##   Development Procedure \(Cyclic Horizontal Swiping\)<a name="section1976914915282"></a>
104
1051.  Create a horizontal swiping  **UISwipeView**  and add its child components.
106
107    ```
108    UISwipeView* swipe = new UISwipeView(UISwipeView::HORIZONTAL);
109    UILabelButton* button1 = new UILabelButton();
110    button1->SetPosition(0, 0, g_ButtonW, g_ButtonH);
111    button1->SetText("button1");
112    swipe->Add(button1);
113    UILabelButton* button2 = new UILabelButton();
114    button2->SetPosition(0, 0, g_ButtonW, g_ButtonH);
115    button2->SetText("button2");
116    swipe->Add(button2);
117    UILabelButton* button3 = new UILabelButton();
118    button3->SetPosition(0, 0, g_ButtonW, g_ButtonH);
119    button3->SetText("button3");
120    swipe->Add(button3);
121    ```
122
1232.  Enable cyclic swiping for the  **UISwipeView**.
124
125    ```
126    swipe->SetLoopState(true);
127    ```
128
1293.  Verify that the components are swiping horizontally and cyclically.
130
131    **Figure  2**  Cyclic horizontal swiping effect of  **UISwipeView**<a name="fig1533902042618"></a>
132
133
134    ![](figure/en-us_image_0000001053207924.gif)
135
136
137## GridLayout<a name="section46819199173"></a>
138
139## When to Use<a name="section831618247294"></a>
140
141**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.
142
143## Available APIs<a name="section597214622912"></a>
144
145**Table  2** Available functions  in GridLayout
146
147<a name="table109971146192913"></a>
148<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>
149</th>
150<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>
151</th>
152</tr>
153</thead>
154<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>
155</td>
156<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>
157</td>
158</tr>
159<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>
160</td>
161<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>
162</td>
163</tr>
164<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>
165</td>
166<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>
167</td>
168</tr>
169</tbody>
170</table>
171
172## How to Develop<a name="section1418253410306"></a>
173
1741.  Create a  **GridLayout**  instance and set its position and size.
175
176    ```
177    GridLayout* layout_ = new GridLayout();
178    layout_->SetPosition(0, g_y, HROIZONTAL_RESOLUTION, 200);
179    layout_->SetLayoutDirection(LAYOUT_HOR);
180    layout_->SetRows(2);
181    layout_->SetCols(2);
182    ```
183
1842.  Create  **UILabelButton**  instances.
185
186    ```
187    UILabelButton* bt1 = new UILabelButton();
188    bt1->SetPosition(0,0,100,50);
189    bt1->SetText("bt1");
190    UILabelButton* bt2 = new UILabelButton();
191    bt2->SetPosition(0, 0, 100, 50);
192    bt2->SetText("bt2");
193    UILabelButton* bt3 = new UILabelButton();
194    bt3->SetPosition(0, 0, 100, 50);
195    bt3->SetText("bt3");
196    UILabelButton* bt4 = new UILabelButton();
197    bt4->SetPosition(0, 0, 100, 50);
198    bt4->SetText("bt4");
199    ```
200
2013.  Add child components and call the  **LayoutChildren\(\)**  function.
202
203    ```
204    layout_->Add(bt1);
205    layout_->Add(bt2);
206    layout_->Add(bt3);
207    layout_->Add(bt4);
208    layout_->LayoutChildren();
209    ```
210
2114.  Verify the layout of buttons, as shown in the following figure.
212
213    **Figure  3**  Setting a 2x2 grid and adding four buttons in a layout<a name="fig898719135314"></a>
214    ![](figure/setting-a-2x2-grid-and-adding-four-buttons-in-a-layout.png "setting-a-2x2-grid-and-adding-four-buttons-in-a-layout")
215
216
217