1# 布局容器类组件开发指导 2 3 4布局类容器组件由视图基础类组成，通过直接设置视图位置，可以达到嵌套和重叠布局的目的；通过设置布局类型和边距达到规格化布局子组件的目的；通过调用相关接口可实现根据父组件及兄弟节点布局视图的目的。 5 6 7## UISwipeView 8 9 10### 使用场景 11 12UISwipeView继承UIViewGroup，除提供容器类组件Add、Remove、Insert等方法外还提供按页面滑动功能，滑动结束后当前页面居中对齐显示。该组件分为水平方向和垂直方向，通过Add方法添加的子组件会根据Add的顺序和UISwipeView方向自动水平对齐或者垂直对齐。 13 14 15### 接口说明 16 17 **表1** SwipeView接口说明 18 19| 方法 | 功能 | 20| -------- | -------- | 21| void SetCurrentPage(uint16_t index); | 设置当前页 | 22| uint16_t GetCurrentPage() | 获取当前页 | 23| UIView\* GetCurrentView() const | 获取当前页组件 | 24| void SetOnSwipeListener(OnSwipeListener& onSwipeListener) | 设置滑动回调类 | 25| void SetAnimatorTime(uint16_t time); | 设置动画事件 | 26| void SetLoopState(bool loop) | 设置是否循环 | 27| UIView\* GetViewByIndex(uint16_t index); | 通过index获取view | 28 29 30### 开发步骤（水平滑动，不可循环） 31 321. 创建一个水平滑动的UISwipeView。 33 34 ``` 35 UISwipeView* swipe = new UISwipeView(UISwipeView::HORIZONTAL); 36 ``` 37 382. 向UISwipeView中添加子组件。 39 40 ``` 41 UILabelButton* button1 = new UILabelButton(); 42 button1->SetPosition(0, 0, g_ButtonW, g_ButtonH); 43 button1->SetText("button1"); 44 swipe->Add(button1); 45 UILabelButton* button2 = new UILabelButton(); 46 button2->SetPosition(0, 0, g_ButtonW, g_ButtonH); 47 button2->SetText("button2"); 48 swipe->Add(button2); 49 UILabelButton* button3 = new UILabelButton(); 50 button3->SetPosition(0, 0, g_ButtonW, g_ButtonH); 51 button3->SetText("button3"); 52 swipe->Add(button3); 53 ``` 54 553. 检查实现效果，水平滑动，不可循环。 56 57 **图1** UISwipeView水平滑动效果图 58 59  60 61 62### 开发步骤（水平滑动，可循环） 63 641. 创建一个水平滑动的UISwipeView并添加子组件。 65 66 ``` 67 UISwipeView* swipe = new UISwipeView(UISwipeView::HORIZONTAL); 68 UILabelButton* button1 = new UILabelButton(); 69 button1->SetPosition(0, 0, g_ButtonW, g_ButtonH); 70 button1->SetText("button1"); 71 swipe->Add(button1); 72 UILabelButton* button2 = new UILabelButton(); 73 button2->SetPosition(0, 0, g_ButtonW, g_ButtonH); 74 button2->SetText("button2"); 75 swipe->Add(button2); 76 UILabelButton* button3 = new UILabelButton(); 77 button3->SetPosition(0, 0, g_ButtonW, g_ButtonH); 78 button3->SetText("button3"); 79 swipe->Add(button3); 80 ``` 81 822. 设置UISwipeView循环滑动。 83 84 ``` 85 swipe->SetLoopState(true); 86 ``` 87 883. 检查实现效果，水平循环滑动。 89 90 **图2** UISwipeView水平滑动循环效果图 91 92  93 94 95## GridLayout 96 97 98### 使用场景 99 100提供基础布局能力，可设置网格行数和列数，通过Add方法添加的子组件在调用LayoutChildren()方法后自动进行排列布局。 101 102 103### 接口说明 104 105 **表2** GridLayout接口说明 106 107| 方法 | 功能 | 108| -------- | -------- | 109| void SetRows(const uint16_t& rows) | 设置行数 | 110| void SetCols(const uint16_t& cols) | 设置列数 | 111| void LayoutChildren(bool needInvalidate = false) | 布局子组件 | 112 113 114### 开发步骤 115 1161. 构造GridLayout并设置位置、大小信息。 117 118 ``` 119 GridLayout* layout_ = new GridLayout(); 120 layout_->SetPosition(0, g_y, HROIZONTAL_RESOLUTION, 200); 121 layout_->SetLayoutDirection(LAYOUT_HOR); 122 layout_->SetRows(2); 123 layout_->SetCols(2); 124 ``` 125 1262. 构造子组件button。 127 128 ``` 129 UILabelButton* bt1 = new UILabelButton(); 130 bt1->SetPosition(0,0,100,50); 131 bt1->SetText("bt1"); 132 UILabelButton* bt2 = new UILabelButton(); 133 bt2->SetPosition(0, 0, 100, 50); 134 bt2->SetText("bt2"); 135 UILabelButton* bt3 = new UILabelButton(); 136 bt3->SetPosition(0, 0, 100, 50); 137 bt3->SetText("bt3"); 138 UILabelButton* bt4 = new UILabelButton(); 139 bt4->SetPosition(0, 0, 100, 50); 140 bt4->SetText("bt4"); 141 ``` 142 1433. 添加子组件并调用LayoutChildren()。 144 145 ``` 146 layout_->Add(bt1); 147 layout_->Add(bt2); 148 layout_->Add(bt3); 149 layout_->Add(bt4); 150 layout_->LayoutChildren(); 151 ``` 152 1534. 检查button组件布局效果如下图所示。 154 155 **图3** 设置2\*2网格并添加4个button组件进行布局 156 157  158
