1# 容器类组件开发指导 2 3 4容器类组件，指能包含其它UI组件的组件，容器类组件继承于UIViewGroup（带Add方法），基于实际组件的使用场景，将需要增加其他子组件的组件，放置到容器类继承结构下。如UIAnalogClock内，通常会Add需要的计步信息，时分秒图标等。 5 6 7 **图1** 普通容器类组件结构 8 9  10 11 12RootView、UIAbstractScroll、UIPicker组件从UIViewGroup继承，UIList、UIScrollView、UISwipeView组件从UIAbstractScroll继承。 13 14 15## UIViewGroup 16 17 18### 使用场景 19 20UIViewGroup是容器类组件基类，实现增加、删除、插入等操作，通过增加方法可以添加子组件。普通容器类组件子组件需要设置位置信息，位置信息为相对父组件的相对坐标。组件树结构如下图： 21 22 **图2** 组件树结构示意图 23 24  25 26往根节点rootView里添加ViewGroup1容器组件和View1组件，往ViewGroup1容器组件里再添加View2组件和ViewGroup2容器组件，在View1之后添加View3组件。 27 28- 关于渲染：容器类组件在渲染时会遍历所有子组件OnDraw方法，以达到刷新所有组件的目的。 29 30- 关于坐标：子组件位置信息为相对父组件的相对坐标，系统在渲染时计算绝对坐标并显示。 31 32- 关于树结构遍历：UIViewGroup提供如下方法实现遍历、查找、管理组件树。 33 34 35### 接口说明 36 37 **表1** ViewGroup接口说明 38 39| 方法 | 功能 | 40| -------- | -------- | 41| virtual void Add(UIView\* view) | 添加子组件 | 42| virtual void Insert(UIView\* prevView, UIView\* insertView) | 插入子组件 | 43| virtual void Remove(UIView\* view) | 删除子组件 | 44| virtual void RemoveAll() | 删除所有子组件 | 45| virtual void GetTargetView(const Point& point, UIView\*\* last) | 获取目标视图 | 46| virtual void MoveChildByOffset(int16_t x, int16_t y) | 偏移子组件 | 47| UIView\* GetChildrenHead() const | 获取视图头节点 | 48| UIView\* GetChildrenTail() const | 获取视图最后那个节点 | 49| virtual UIView\* GetChildById(const char\* id) const override | 通过id获取子视图 | 50 51 52### 开发步骤 53 541. 构造button实例并设置坐标信息。 55 56 ``` 57 UILabelButton* btn1 = new UILabelButton(); 58 btn1->SetPosition(0, 0, 100, 50); 59 btn1->SetText("btn1"); 60 61 UILabelButton* btn2 = new UILabelButton(); 62 btn2->SetPosition(50, 50, 100, 50); 63 btn2->SetText("btn2"); 64 65 UILabelButton* btn3 = new UILabelButton(); 66 btn3->SetPosition(100, 100, 100, 50); 67 btn3->SetText("btn3"); 68 ``` 69 702. 构造UIViewGroup实例，并设置坐标信息。 71 72 ``` 73 UIViewGroup* group = new UIViewGroup(); 74 group->SetPosition(0, 0, 300, 300); 75 ``` 76 773. 使用Add方法添加Button实例到UIViewGroup。 78 79 ``` 80 group->Add(btn1); 81 group->Add(btn2); 82 group->Add(btn3); 83 ``` 84 854. 检查ViewGroup效果如下图所示。 86 87 **图3** ViewGroup添加view实例效果图 88 89  90 91 92## UIScrollView 93 94 95### 使用场景 96 97UIScrollView提供可滑动的容器类组件，子组件可在触摸事件驱动下上下、左右滑动，并提供水平和垂直方向的游标显示功能。 98 99 100### 接口说明 101 102 **表2** ScrollView接口说明 103 104| 方法 | 功能 | 105| -------- | -------- | 106| void ScrollBy(int16_t xDistance, int16_t yDistance) | 移动视图 | 107| void SetScrollbarWidth(uint8_t width) | 设置滑动条宽度 | 108| void SetHorizontalScrollState(bool state) | 设置水平滑动状态 | 109| bool GetHorizontalScrollState() const | 获取水平是否可滑动状态 | 110| void SetVerticalScrollState(bool state) | 设置垂直滑动状态 | 111| bool GetVerticalScrollState() const | 获取垂直是否可滑动状态 | 112| void SetXScrollBarVisible(bool state) | 设置X轴滑动条是否可见 | 113| void SetYScrollBarVisible(bool state) | 设置Y轴滑动条是否可见 | 114| void RegisterScrollListener(OnScrollListener\* scrollListener) | 注册滑动事件回调类 | 115| void RefreshScrollBar() | 刷新滑动条 | 116| virtual void OnScrollStart() {} | 滚动开始回调函数 | 117| virtual void OnScrollEnd() {} | 滚动结束回调函数 | 118| uint8_t GetScrollState() const | 获取滚动状态 | 119| void SetScrollState(uint8_t state) | 设置滚动状态 | 120 121 122### 开发步骤 123 124添加两个button子组件，并显示水平、垂直方向游标。 125 126 127``` 128scrollView* scroll = new UIScrollView(); 129scroll->SetStyle(STYLE_BACKGROUND_COLOR, Color::Red().full); 130scroll->SetPosition(0,0, 200, 200); 131scroll->SetXScrollBarVisible(true); 132scroll->SetYScrollBarVisible(true); 133UILabelButton* button1 = new UILabelButton(); 134button1->SetText("button1"); 135button1->SetPosition(0, 0, 300, 300); 136UILabelButton* button2 = new UILabelButton(); 137button2->SetText("button2"); 138button2->SetPosition(0, 300, 300, 300); 139scroll->Add(button1); 140scroll->Add(button2); 141``` 142 143 **图4** 水平、垂直方向可滑动效果图 144 145  146
