From: luozheng <1732036298@qq.com> Date: Mon, 13 Oct 2025 09:25:52 +0000 (+0800) Subject: 230和272弧形列表优化 X-Git-Tag: V1.0.9_20251128_194606_LN~250^2~5^2 X-Git-Url: http://git.snicker.com.cn/?a=commitdiff_plain;h=refs%2Fchanges%2F2495%2F2;p=mirrors%2FFD230.git 230和272弧形列表优化 --- diff --git a/code/sdk/application/wearable/fd230/nativeapp/nativeui/applist/src/AppItemView.cpp b/code/sdk/application/wearable/fd230/nativeapp/nativeui/applist/src/AppItemView.cpp index fbe5b16be..4b6fa81e7 100644 --- a/code/sdk/application/wearable/fd230/nativeapp/nativeui/applist/src/AppItemView.cpp +++ b/code/sdk/application/wearable/fd230/nativeapp/nativeui/applist/src/AppItemView.cpp @@ -135,10 +135,10 @@ namespace OHOS { return itemInfo_.uid; } /* ---------------------------------- 弧形列表 ---------------------------------- */ - #define ARC_SCALE_LIST_ITEM_WIDTH (400) - #define ARC_SCALE_LIST_ITEM_HEIGHT (110) + #define ARC_SCALE_LIST_ITEM_WIDTH (440) + #define ARC_SCALE_LIST_ITEM_HEIGHT (120) - #define ARC_SCALE_LIST_IMAGE_X (0) + #define ARC_SCALE_LIST_IMAGE_X (20) #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) @@ -151,7 +151,9 @@ namespace OHOS { ArcScaleListItemView::ArcScaleListItemView() { Resize(ARC_SCALE_LIST_ITEM_WIDTH, ARC_SCALE_LIST_ITEM_HEIGHT); - SetStyle(STYLE_BACKGROUND_OPA, OPA_TRANSPARENT); + SetStyle(STYLE_BACKGROUND_OPA, OPA_OPAQUE); + SetStyle(STYLE_BACKGROUND_COLOR, 0xff191919); + SetStyle(STYLE_BORDER_RADIUS, 100); // 胶囊形状 SetTouchable(true); SetUpChild(); } diff --git a/code/sdk/application/wearable/fd230/nativeapp/nativeui/applist/src/ApplistView.cpp b/code/sdk/application/wearable/fd230/nativeapp/nativeui/applist/src/ApplistView.cpp index ee597d965..244234855 100644 --- a/code/sdk/application/wearable/fd230/nativeapp/nativeui/applist/src/ApplistView.cpp +++ b/code/sdk/application/wearable/fd230/nativeapp/nativeui/applist/src/ApplistView.cpp @@ -204,12 +204,13 @@ void ApplistView::WaterfallStyleOnStart() } /* -------------------------------------------------------------------------- */ /* ---------------------------------- 弧形列表 ---------------------------------- */ -#define ARC_SCALE_LIST_SCALE_FACTOR (400) -#define ARC_SCALE_LIST_X (25) +#define ARC_SCALE_LIST_SCALE_FACTOR (440) +#define ARC_SCALE_LIST_X (13) #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()) +#if 1 /** * @brief 根据位置变换列表项的基础函数 * @@ -260,6 +261,57 @@ static bool TransformItemBaseOnPosition(UITransformList* list, UIView* item) // 如果列表项不在列表的中心区域,返回 false return false; } +#else +static bool TransformItemBaseOnPosition(UITransformList* list, UIView* item) +{ + if (list == nullptr || item == nullptr) return false; + if (item->GetViewType() != UI_TRANSFORM_GROUP) return false; + + UITransformGroup* group = dynamic_cast(item); + if (group == nullptr) return false; + + const int16_t w = group->GetWidth(); + const int16_t h = group->GetHeight(); + if (list->GetDirection() != UIList::VERTICAL) return false; + + const int16_t midY = list->GetY() + (list->GetHeight() >> 1); + const int16_t y = group->GetY(); + const int offset = (y + (h >> 1) - midY); // 距中心偏移(+向下) + + // 1) 缩放(中心最大,远离越小) + // 基于现有 SineEaseIn,收敛更柔和;scale ∈ [minScale, 1.0] + static constexpr float kMinScale = 0.90f; // 两侧最小缩放 + static constexpr int kScaleMax = ARC_SCALE_LIST_SCALE_FACTOR; // 400 + const int eased = EasingEquation::SineEaseIn(0, kScaleMax, MATH_ABS(offset), kScaleMax); + float scale = 1.0f - (static_cast(eased) / kScaleMax); + if (scale < kMinScale) scale = kMinScale; + + // 2) 弧形位移(根据距中心的距离决定向右偏移,模拟圆弧) + // 简化:xShift 与 (1 - scale) 成正比;可根据视觉微调 kMaxXShift + static constexpr int16_t kMaxXShift = 40; // 两端最大右移像素 + const int16_t xShift = static_cast(kMaxXShift * (1.0f - scale)); + + // 3) 应用变换:先重置再设置,避免累计误差;以靠右的枢轴点缩放(让左侧圆图标更稳) + group->Scale(Vector2(scale, scale), Vector2(w * 0.75f, h * 0.5f)); + + // 4) UITransformGroup 支持平移变换(不改布局,仅视觉位移) + group->Translate(Vector2(xShift, 0)); + + // 5) 居中项高亮(胶囊背景 + 文字白色,非中心透明 + 灰字) + const bool isCenter = (y <= midY) && ((y + h) >= midY); + + // 访问子控件,改样式 + ArcScaleListItemView* arcItem = dynamic_cast(group); + if (arcItem != nullptr) { + UILabelExt* label = arcItem->GetLabel(); + if (label) { + label->SetTextColor(isCenter ? Color::White() : Color::Gray()); + } + } + + return isCenter; +} +#endif void ApplistView::ArcScaleListStyleOnStart(void) { @@ -295,13 +347,15 @@ void ApplistView::ArcScaleListStyleOnStart(void) ArcScaleList_->SetDraggable(true); ArcScaleList_->SetThrowDrag(true); ArcScaleList_->SetStyle(STYLE_BACKGROUND_OPA, OPA_TRANSPARENT); - ArcScaleList_->SetScrollBlankSize(10);//(50); + // 让首尾元素也能滑动到屏幕中线处:在顶部/底部各预留半屏的空白区 + ArcScaleList_->SetScrollBlankSize(Screen::GetInstance().GetHeight() / 2, UIAbstractScroll::Direction::TOP); + ArcScaleList_->SetScrollBlankSize(Screen::GetInstance().GetHeight() / 2, UIAbstractScroll::Direction::BOTTOM); ArcScaleList_->SetMaxScrollDistance(MAX_SCROLL_DIS); ArcScaleList_->SetYScrollBarVisible(true); // ArcScaleList_->SetScrollStateListener(presenter_); ArcScaleList_->SetReboundSize(5); ArcScaleList_->EnableAutoAlign(true); - ArcScaleList_->SetItemSpace(0); + ArcScaleList_->SetItemSpace(20); ArcScaleList_->SetSelectPosition(ARC_SCALE_LIST_HEIGHT / 2); ArcScaleList_->SetRotateFactor(1.0); ArcScaleList_->RequestFocus(); @@ -341,8 +395,8 @@ void ApplistView::ArcScaleListStyleOnSetUpView(void) headY = presenter_->GetArcListHeadItemY(); } if (headY == 0) { - // headY = VERTICAL_RESOLUTION / NUM_2; - headY = -42; + headY = VERTICAL_RESOLUTION / NUM_2; + // headY = -42; } } WEARABLE_LOGD(WEARABLE_LOG_MODULE_APP, "[%d],startIndex = %d,headY = %d", __LINE__,startIndex,headY); diff --git a/code/sdk/application/wearable/fd272/nativeapp/nativeui/applist/src/AppItemView.cpp b/code/sdk/application/wearable/fd272/nativeapp/nativeui/applist/src/AppItemView.cpp index fbe5b16be..4b6fa81e7 100644 --- a/code/sdk/application/wearable/fd272/nativeapp/nativeui/applist/src/AppItemView.cpp +++ b/code/sdk/application/wearable/fd272/nativeapp/nativeui/applist/src/AppItemView.cpp @@ -135,10 +135,10 @@ namespace OHOS { return itemInfo_.uid; } /* ---------------------------------- 弧形列表 ---------------------------------- */ - #define ARC_SCALE_LIST_ITEM_WIDTH (400) - #define ARC_SCALE_LIST_ITEM_HEIGHT (110) + #define ARC_SCALE_LIST_ITEM_WIDTH (440) + #define ARC_SCALE_LIST_ITEM_HEIGHT (120) - #define ARC_SCALE_LIST_IMAGE_X (0) + #define ARC_SCALE_LIST_IMAGE_X (20) #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) @@ -151,7 +151,9 @@ namespace OHOS { ArcScaleListItemView::ArcScaleListItemView() { Resize(ARC_SCALE_LIST_ITEM_WIDTH, ARC_SCALE_LIST_ITEM_HEIGHT); - SetStyle(STYLE_BACKGROUND_OPA, OPA_TRANSPARENT); + SetStyle(STYLE_BACKGROUND_OPA, OPA_OPAQUE); + SetStyle(STYLE_BACKGROUND_COLOR, 0xff191919); + SetStyle(STYLE_BORDER_RADIUS, 100); // 胶囊形状 SetTouchable(true); SetUpChild(); } diff --git a/code/sdk/application/wearable/fd272/nativeapp/nativeui/applist/src/ApplistView.cpp b/code/sdk/application/wearable/fd272/nativeapp/nativeui/applist/src/ApplistView.cpp index ee597d965..244234855 100644 --- a/code/sdk/application/wearable/fd272/nativeapp/nativeui/applist/src/ApplistView.cpp +++ b/code/sdk/application/wearable/fd272/nativeapp/nativeui/applist/src/ApplistView.cpp @@ -204,12 +204,13 @@ void ApplistView::WaterfallStyleOnStart() } /* -------------------------------------------------------------------------- */ /* ---------------------------------- 弧形列表 ---------------------------------- */ -#define ARC_SCALE_LIST_SCALE_FACTOR (400) -#define ARC_SCALE_LIST_X (25) +#define ARC_SCALE_LIST_SCALE_FACTOR (440) +#define ARC_SCALE_LIST_X (13) #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()) +#if 1 /** * @brief 根据位置变换列表项的基础函数 * @@ -260,6 +261,57 @@ static bool TransformItemBaseOnPosition(UITransformList* list, UIView* item) // 如果列表项不在列表的中心区域,返回 false return false; } +#else +static bool TransformItemBaseOnPosition(UITransformList* list, UIView* item) +{ + if (list == nullptr || item == nullptr) return false; + if (item->GetViewType() != UI_TRANSFORM_GROUP) return false; + + UITransformGroup* group = dynamic_cast(item); + if (group == nullptr) return false; + + const int16_t w = group->GetWidth(); + const int16_t h = group->GetHeight(); + if (list->GetDirection() != UIList::VERTICAL) return false; + + const int16_t midY = list->GetY() + (list->GetHeight() >> 1); + const int16_t y = group->GetY(); + const int offset = (y + (h >> 1) - midY); // 距中心偏移(+向下) + + // 1) 缩放(中心最大,远离越小) + // 基于现有 SineEaseIn,收敛更柔和;scale ∈ [minScale, 1.0] + static constexpr float kMinScale = 0.90f; // 两侧最小缩放 + static constexpr int kScaleMax = ARC_SCALE_LIST_SCALE_FACTOR; // 400 + const int eased = EasingEquation::SineEaseIn(0, kScaleMax, MATH_ABS(offset), kScaleMax); + float scale = 1.0f - (static_cast(eased) / kScaleMax); + if (scale < kMinScale) scale = kMinScale; + + // 2) 弧形位移(根据距中心的距离决定向右偏移,模拟圆弧) + // 简化:xShift 与 (1 - scale) 成正比;可根据视觉微调 kMaxXShift + static constexpr int16_t kMaxXShift = 40; // 两端最大右移像素 + const int16_t xShift = static_cast(kMaxXShift * (1.0f - scale)); + + // 3) 应用变换:先重置再设置,避免累计误差;以靠右的枢轴点缩放(让左侧圆图标更稳) + group->Scale(Vector2(scale, scale), Vector2(w * 0.75f, h * 0.5f)); + + // 4) UITransformGroup 支持平移变换(不改布局,仅视觉位移) + group->Translate(Vector2(xShift, 0)); + + // 5) 居中项高亮(胶囊背景 + 文字白色,非中心透明 + 灰字) + const bool isCenter = (y <= midY) && ((y + h) >= midY); + + // 访问子控件,改样式 + ArcScaleListItemView* arcItem = dynamic_cast(group); + if (arcItem != nullptr) { + UILabelExt* label = arcItem->GetLabel(); + if (label) { + label->SetTextColor(isCenter ? Color::White() : Color::Gray()); + } + } + + return isCenter; +} +#endif void ApplistView::ArcScaleListStyleOnStart(void) { @@ -295,13 +347,15 @@ void ApplistView::ArcScaleListStyleOnStart(void) ArcScaleList_->SetDraggable(true); ArcScaleList_->SetThrowDrag(true); ArcScaleList_->SetStyle(STYLE_BACKGROUND_OPA, OPA_TRANSPARENT); - ArcScaleList_->SetScrollBlankSize(10);//(50); + // 让首尾元素也能滑动到屏幕中线处:在顶部/底部各预留半屏的空白区 + ArcScaleList_->SetScrollBlankSize(Screen::GetInstance().GetHeight() / 2, UIAbstractScroll::Direction::TOP); + ArcScaleList_->SetScrollBlankSize(Screen::GetInstance().GetHeight() / 2, UIAbstractScroll::Direction::BOTTOM); ArcScaleList_->SetMaxScrollDistance(MAX_SCROLL_DIS); ArcScaleList_->SetYScrollBarVisible(true); // ArcScaleList_->SetScrollStateListener(presenter_); ArcScaleList_->SetReboundSize(5); ArcScaleList_->EnableAutoAlign(true); - ArcScaleList_->SetItemSpace(0); + ArcScaleList_->SetItemSpace(20); ArcScaleList_->SetSelectPosition(ARC_SCALE_LIST_HEIGHT / 2); ArcScaleList_->SetRotateFactor(1.0); ArcScaleList_->RequestFocus(); @@ -341,8 +395,8 @@ void ApplistView::ArcScaleListStyleOnSetUpView(void) headY = presenter_->GetArcListHeadItemY(); } if (headY == 0) { - // headY = VERTICAL_RESOLUTION / NUM_2; - headY = -42; + headY = VERTICAL_RESOLUTION / NUM_2; + // headY = -42; } } WEARABLE_LOGD(WEARABLE_LOG_MODULE_APP, "[%d],startIndex = %d,headY = %d", __LINE__,startIndex,headY);