Applist样式：弧形列表优化UI显示

diff --git a/code/sdk/application/wearable/fd230app/nativeui/applist/src/AppItemView.cpp b/code/sdk/application/wearable/fd230app/nativeui/applist/src/AppItemView.cpp
index 6aafaa2..a8c5056 100644 (file)
--- a/code/sdk/application/wearable/fd230app/nativeui/applist/src/AppItemView.cpp
+++ b/code/sdk/application/wearable/fd230app/nativeui/applist/src/AppItemView.cpp
@@ -139,15 +139,17 @@ namespace OHOS {
 
 
     #define ARC_SCALE_LIST_ITEM_WIDTH (400)
-    #define ARC_SCALE_LIST_ITEM_HEIGHT (100) 
+    #define ARC_SCALE_LIST_ITEM_HEIGHT (110) 
+    
     #define ARC_SCALE_LIST_IMAGE_X (0)
-    #define ARC_SCALE_LIST_IMAGE_Y (0)
-    #define ARC_SCALE_LIST_IMAGE_WIDTH (90)
-    #define ARC_SCALE_LIST_IMAGE_HEIGHT (90)
-    #define ARC_SCALE_LIST_TEXT_X (108)
-    #define ARC_SCALE_LIST_TEXT_WIDTH (180)
-    #define ARC_SCALE_LIST_TEXT_HEIGHT (42)
-    #define ARC_SCALE_LIST_TEXT_Y (ARC_SCALE_LIST_ITEM_HEIGHT - ARC_SCALE_LIST_TEXT_HEIGHT) / 2
+    #define ARC_SCALE_LIST_IMAGE_WIDTH  (ARC_SCALE_LIST_ITEM_HEIGHT - 10)
+    #define ARC_SCALE_LIST_IMAGE_HEIGHT (ARC_SCALE_LIST_ITEM_HEIGHT - 10)
+    #define ARC_SCALE_LIST_IMAGE_Y ((ARC_SCALE_LIST_ITEM_HEIGHT - ARC_SCALE_LIST_IMAGE_HEIGHT) / 2)
+
+    #define ARC_SCALE_LIST_TEXT_X (ARC_SCALE_LIST_IMAGE_X + ARC_SCALE_LIST_IMAGE_WIDTH + 20)
+    #define ARC_SCALE_LIST_TEXT_WIDTH (ARC_SCALE_LIST_ITEM_WIDTH - ARC_SCALE_LIST_TEXT_X)
+    #define ARC_SCALE_LIST_TEXT_HEIGHT (44)
+    #define ARC_SCALE_LIST_TEXT_Y ((ARC_SCALE_LIST_ITEM_HEIGHT - ARC_SCALE_LIST_TEXT_HEIGHT) / 2)
 
     ArcScaleListItemView::ArcScaleListItemView()
     {
@@ -186,6 +188,8 @@ namespace OHOS {
             }
         }
         image_->SetPosition(ARC_SCALE_LIST_IMAGE_X, ARC_SCALE_LIST_IMAGE_Y, ARC_SCALE_LIST_IMAGE_WIDTH, ARC_SCALE_LIST_IMAGE_HEIGHT);
+        image_->SetAutoEnable(false);
+        image_->SetResizeMode(UIImageView::FILL);
         Add(image_);
         /* -------------------------------------------------------------------------- */
         if (label_ == nullptr) {
@@ -196,12 +200,12 @@ namespace OHOS {
                 return ;
             }
         }
-        label_->SetPosition(ARC_SCALE_LIST_TEXT_X, 25, ARC_SCALE_LIST_TEXT_WIDTH, ARC_SCALE_LIST_TEXT_HEIGHT);
-        label_->SetStyle(STYLE_LINE_HEIGHT,42);
-        label_->SetStyle(STYLE_TEXT_FONT,36);
-        label_->SetFont(DEFAULT_VECTOR_FONT_FILENAME, 36);  
+        label_->SetPosition(ARC_SCALE_LIST_TEXT_X, ARC_SCALE_LIST_TEXT_Y, ARC_SCALE_LIST_TEXT_WIDTH, ARC_SCALE_LIST_TEXT_HEIGHT);
+        label_->SetStyle(STYLE_LINE_HEIGHT,44);
+        label_->SetStyle(STYLE_TEXT_FONT,38);
+        label_->SetFont(DEFAULT_VECTOR_FONT_FILENAME, 38);  
         label_->SetLineBreakMode(UILabel::LINE_BREAK_OSCILLATION);
-        label_->SetAlign(TEXT_ALIGNMENT_LEFT, TEXT_ALIGNMENT_CENTER);
+        label_->SetAlign(TEXT_ALIGNMENT_LEFT, TEXT_ALIGNMENT_TOP);
         Add(label_);
     }
 

diff --git a/code/sdk/application/wearable/fd230app/nativeui/applist/src/ApplistView.cpp b/code/sdk/application/wearable/fd230app/nativeui/applist/src/ApplistView.cpp
index 4e92699..1a97b71 100644 (file)
--- a/code/sdk/application/wearable/fd230app/nativeui/applist/src/ApplistView.cpp
+++ b/code/sdk/application/wearable/fd230app/nativeui/applist/src/ApplistView.cpp
@@ -19,7 +19,7 @@ static constexpr int16 MAX_SCROLL_DIS = 1000;
 static constexpr int16 ROTATE_FACTOR_2 = 2.0;
 
 #define ARC_SCALE_LIST_SCALE_FACTOR (400)//(400)
-#define ARC_SCALE_LIST_X (50)
+#define ARC_SCALE_LIST_X (25)
 #define ARC_SCALE_LIST_Y (0)
 #define ARC_SCALE_LIST_WIDTH (Screen::GetInstance().GetWidth() - ARC_SCALE_LIST_X)
 #define ARC_SCALE_LIST_HEIGHT (Screen::GetInstance().GetHeight())
@@ -205,31 +205,54 @@ void ApplistView::ListStyleOnStart()
     WEARABLE_LOGD(WEARABLE_LOG_MODULE_APP, "ApplistView::ListStyleOnStart end...");
 }
 
+/**
+ * @brief 根据位置变换列表项的基础函数
+ * 
+ * 这个函数根据列表项在垂直列表中的位置来调整其缩放比例。它使用一个缓动函数来计算缩放比例，使得列表项在接近列表中心时逐渐放大，远离列表中心时逐渐缩小。
+ * 
+ * @param list 指向 UITransformList 类型的指针，代表要操作的列表。
+ * @param item 指向 UIView 类型的指针，代表要变换的列表项。
+ * @return 如果变换成功，返回 true；否则返回 false。
+ */
 static bool TransformItemBaseOnPosition(UITransformList* list, UIView* item)
 {
+    // 检查传入的参数是否有效
     if (list == nullptr || item == nullptr) {
         return false;
     }
+    // 检查列表项的类型是否为 UI_TRANSFORM_GROUP
     if (item->GetViewType() != UI_TRANSFORM_GROUP) {
         return false;
     }
+    // 将列表项转换为 UITransformGroup 类型
     UITransformGroup* group = dynamic_cast<UITransformGroup*>(item);
+    // 如果转换失败，返回 false
     if (group == nullptr) {
         return false;
     }
+    // 获取列表项的宽度和高度
     int16_t w = group->GetWidth();
     int16_t h = group->GetHeight();
+    // 如果列表的方向是垂直的
     if (list->GetDirection() == UIList::VERTICAL) {
+        // 计算列表的垂直中心位置
         int16_t midY = list->GetY() + (list->GetHeight() >> 1);
+        // 获取列表项的垂直位置
         int16_t y = group->GetY();
+        // 计算列表项到列表中心的垂直偏移量
         int offset = (y + (h >> 1) - midY);
+        // 使用 SineEaseIn 缓动函数计算缩放比例
         int temp = EasingEquation::SineEaseIn(0, ARC_SCALE_LIST_SCALE_FACTOR, abs(offset), ARC_SCALE_LIST_SCALE_FACTOR);
+        // 计算最终的缩放比例
         float scale = 1.0 - (static_cast<float>(temp) / ARC_SCALE_LIST_SCALE_FACTOR);
-        group->Scale(Vector2<float>(scale, scale), Vector2<float>(w >> 1,  h >> 1));
+        // 应用缩放比例到列表项
+        group->Scale(Vector2<float>(scale, scale), Vector2<float>(w * 0.75,  h >> 1));
+        // 如果列表项在列表的中心区域，返回 true
         if ((y <= midY) && (y + group->GetHeight() >= midY)) {
             return true;
         }
     }
+    // 如果列表项不在列表的中心区域，返回 false
     return false;
 }
 
@@ -273,13 +296,13 @@ void ApplistView::ArcScaleListStyleOnStart(void)
         ArcScaleList_->SetDraggable(true);
         ArcScaleList_->SetThrowDrag(true);
         ArcScaleList_->SetStyle(STYLE_BACKGROUND_OPA, OPA_TRANSPARENT);
-        ArcScaleList_->SetScrollBlankSize(40);//(50);
+        ArcScaleList_->SetScrollBlankSize(10);//(50);
         ArcScaleList_->SetMaxScrollDistance(MAX_SCROLL_DIS);
         ArcScaleList_->SetYScrollBarVisible(true);
         // ArcScaleList_->SetScrollStateListener(presenter_);
-        ArcScaleList_->SetReboundSize(35);
+        ArcScaleList_->SetReboundSize(5);
         ArcScaleList_->EnableAutoAlign(true);
-        ArcScaleList_->SetItemSpace(10);
+        ArcScaleList_->SetItemSpace(0);
         ArcScaleList_->SetSelectPosition(ARC_SCALE_LIST_HEIGHT / 2);
         ArcScaleList_->SetRotateFactor(ROTATE_FACTOR_2);
         ArcScaleList_->RequestFocus();