improve icon at and add docs

design/default/ui/check_button.xml

@@ -1,53 +1,29 @@
 <window anim_hint="htranslate" move_focus_prev_key="up" move_focus_next_key="down" text="Basic Controls">
-  <view x="0" y="10" w="100%" h="100%" children_layout="default(r=5,c=2,m=10)">
-    <column children_layout="default(r=2,c=1,ym=2,s=10)" >
-      <check_button name="r1" text="icon at left1" focusable="true"/>
-      <check_button name="r2" text="icon at left2" focusable="true" indeterminate="true" />
-    </column>
-
+  <view x="0" y="10" w="100%" h="100%" children_layout="default(r=3,c=2,m=10,s=10)">
     <column children_layout="default(r=2,c=1,ym=2,s=10)" >
+      <check_button name="r1" text="icon at left1" focusable="true" style="left"/>
       <check_button name="r1" text="icon at right1" focusable="true" style="right" />
-      <check_button name="r2" text="icon at right2" focusable="true" indeterminate="true" style="right" />
     </column>
 
     <column children_layout="default(r=2,c=1,ym=2,s=10)" >
-      <check_button name="r1" text="icon at top1" focusable="true" style="top" />
-      <check_button name="r2" text="icon at top2" focusable="true" indeterminate="true" style="top" />
+      <check_button name="r1" text="icon at top" focusable="true" style="top" />
+      <check_button name="r1" text="icon at bottom" focusable="true" style="bottom" />
     </column>
 
     <column children_layout="default(r=2,c=1,ym=2,s=10)" >
-      <check_button name="r1" text="icon at bottom1" focusable="true" style="bottom" />
-      <check_button name="r2" text="icon at bottom2" focusable="true" indeterminate="true" style="bottom" />
+      <check_button name="r1" text="icon at left_top" focusable="true" style="left_top" />
+      <check_button name="r1" text="icon at right_top" focusable="true" style="right_top" />
     </column>
 
     <column children_layout="default(r=2,c=1,ym=2,s=10)" >
-      <check_button name="r1" text="icon at center1" focusable="true" style="center" />
-      <check_button name="r2" text="icon at center2" focusable="true" indeterminate="true" style="center" />
+      <check_button name="r1" text="icon at left_bottom" focusable="true" style="left_bottom" />
+      <check_button name="r1" text="icon at right_bottom" focusable="true" style="right_bottom" />
     </column>
 
     <column children_layout="default(r=2,c=1,ym=2,s=10)" >
-      <check_button name="r1" text="icon at center1" focusable="true" style="center" />
-      <check_button name="r2" text="icon at center2" focusable="true" indeterminate="true" style="center" />
+      <check_button name="r1" focusable="true" style="center" />
+      <check_button name="r1" focusable="true" style="center" />
     </column>
 
-    <column children_layout="default(r=2,c=1,ym=2,s=10)" >
-      <check_button name="r1" text="icon at left_top1" focusable="true" style="left_top" />
-      <check_button name="r2" text="icon at left_top2" focusable="true" indeterminate="true" style="left_top" />
-    </column>
-
-    <column children_layout="default(r=2,c=1,ym=2,s=10)" >
-      <check_button name="r1" text="icon at right_top1" focusable="true" style="right_top" />
-      <check_button name="r2" text="icon at right_top2" focusable="true" indeterminate="true" style="right_top" />
-    </column>
-
-    <column children_layout="default(r=2,c=1,ym=2,s=10)" >
-      <check_button name="r1" text="icon at left_bottom1" focusable="true" style="left_bottom" />
-      <check_button name="r2" text="icon at left_bottom2" focusable="true" indeterminate="true" style="left_bottom" />
-    </column>
-
-    <column children_layout="default(r=2,c=1,ym=2,s=10)" >
-      <check_button name="r1" text="icon at right_bottom1" focusable="true" style="right_bottom" />
-      <check_button name="r2" text="icon at right_bottom2" focusable="true" indeterminate="true" style="right_bottom" />
-    </column>
   </view>
 </window>

docs/README.md

@@ -104,7 +104,8 @@
 * [如何为不同语言加载不同的字体文件](how_to_load_font_for_specific_language.md)
 * [如何为指定的键设置长按时间](how_to_set_key_long_press_time.md)
 * [如何使用 CMake 构建 AWTK 应用](how_to_use_cmake_to_build_awtk_app.md)
-
+* [如何控制图标的位置](how_to_use_icon_at_to_set_icon_position.md)  
+
 ### 3. 内部原理
 * [AWTK 脚本绑定原理](script_binding.md)
 * [AWTK 内存分配器](mem_alloactor.md)

docs/changes.md

@@ -1,5 +1,8 @@
 # 最新动态
 
+2024/06/30
+  * 完善 icon at并增加文档 [如何控制图标的位置](how_to_use_icon_at_to_set_icon_position.md)
+
 2024/06/27
   * 修复overlay导致对话框高亮消失的问题和overlay的焦点切换问题(感谢智明提供补丁)
   * 修复了在agge模式下，当line_join为miter时出现的绘制错误(感谢泽武提供补丁)

docs/how_to_use_icon_at_to_set_icon_position.md

@@ -0,0 +1,141 @@
+# 用 icon_at 属性设置图标位置
+
+## 1. style
+
+在 style 文件中通过 icon_at 属性设置图标位置。
+
+```xml
+  <style name="right_bottom" icon_at="right_bottom">
+    <normal  icon="unchecked_right_bottom" />
+    <pressed icon="unchecked_right_bottom" />
+    <over    icon="unchecked_right_bottom" text_color="green"/>
+    <focused icon="unchecked_right_bottom" text_color="green"/>
+    <normal_of_checked icon="checked_right_bottom" text_color="blue"/>
+    <pressed_of_checked icon="checked_right_bottom" text_color="blue"/>
+    <over_of_checked icon="checked_right_bottom" text_color="green"/>
+    <focused_of_checked icon="checked_right_bottom" text_color="green"/>
+    <normal_of_indeterminate icon="indeterminate" text_color="blue"/>
+    <pressed_of_indeterminate icon="indeterminate" text_color="blue"/>
+    <over_of_indeterminate icon="indeterminate" text_color="green"/>
+    <focused_of_indeterminate icon="indeterminate" text_color="green"/>
+  </style>
+```
+
+## 2. 示例（多选按钮）
+
+### 2.1. left 图标在左边中间
+
+* 代码
+
+```xml
+ <check_button text="icon at left1" focusable="true" style="left"/>
+``` 
+
+* 效果
+
+![icon at left1](images/icon_at_left.png)
+
+### 2.2. right 图标在右边中间
+
+* 代码
+
+```xml
+<check_button text="icon at right1" focusable="true" style="right" />
+```
+
+* 效果
+
+![icon at right1](images/icon_at_right.png)
+
+### 2.3. top 图标在上边中间
+
+* 代码
+
+```xml
+<check_button text="icon at top" focusable="true" style="top" />
+```
+
+* 效果
+
+![icon at top](images/icon_at_top.png)
+
+### 2.4. bottom 图标在下边中间
+
+* 代码
+
+```xml
+<check_button text="icon at bottom" focusable="true" style="bottom" />
+```
+
+* 效果
+
+![icon at bottom](images/icon_at_bottom.png)
+
+### 2.5. left_top 图标在左上角
+
+* 代码
+
+```xml
+<check_button text="icon at left_top" focusable="true" style="left_top" />
+```
+
+* 效果
+
+![icon at left_top](images/icon_at_left_top.png)
+
+### 2.6. right_top 图标在右上角
+
+* 代码
+
+```xml
+<check_button text="icon at right_top" focusable="true" style="right_top" />
+```
+
+* 效果
+
+![icon at right_top](images/icon_at_right_top.png)
+
+
+### 2.7. left_bottom 图标在左下角
+
+* 代码
+
+```xml
+      <check_button text="icon at left_bottom" focusable="true" style="left_bottom" />
+```
+
+* 效果
+
+![icon at left_bottom](images/icon_at_left_bottom.png)
+
+### 2.8. right_bottom 图标在右下角
+
+* 代码
+
+```xml
+<check_button text="icon at right_bottom"
+       focusable="true" style="right_bottom" />
+```
+
+* 效果
+
+![icon at right_bottom](images/icon_at_right_bottom.png)
+
+### 2.9. center 图标在中间
+
+> 注意：center 属性不要 text 属性，否则退化为 left 属性。
+
+* 代码
+
+```xml
+ <check_button focusable="true" style="center" />
+```      
+
+* 效果
+
+![icon at center](images/icon_at_center.png)
+
+
+
+
+