feat:换肤

1)频道图片展示和gif展示

feat:换肤
1)频道图片展示和gif展示
liyubing
Commit 27fd98c2d5e2629ca025ec6c41adfb2c33cffd49 27fd98c2 1 parent 949b250a
Showing 3 changed files with 98 additions and 34 deletions
sight_harmony/features/wdComponent/src/main/ets/components/page/TopNavigationComponentNew.ets
sight_harmony/features/wdComponent/src/main/ets/utils/CommonUtils.ets
sight_harmony/products/phone/src/main/ets/pages/view/VideoChannelPage.ets
--- a/sight_harmony/features/wdComponent/src/main/ets/components/page/TopNavigationComponentNew.ets
View file @27fd98c
+++ b/sight_harmony/features/wdComponent/src/main/ets/components/page/TopNavigationComponentNew.ets
View file @27fd98c
 import { BottomNavDTO, NavigationDetailDTO, TopNavDTO } from 'wdBean';
-import { Logger, NetworkUtil, SPHelper, ToastUtils, WindowModel } from 'wdKit';
+import { Logger, NetworkUtil, SPHelper, ToastUtils } from 'wdKit';
 import { ProcessUtils, WDRouterPage, WDRouterRule } from 'wdRouter';
 import { PageComponent } from './PageComponent';
 import { ChannelSubscriptionLayout } from './ChannelSubscriptionLayout';
@@ -12,6 +12,8 @@ import DailyPaperTopicModel from '../../model/DailyPaperTopicModel';
 import { CompUtils } from '../../utils/CompUtils';
 import ChannelViewModel from '../../viewmodel/ChannelViewModel';
 import { ColorUtils } from '../../utils/ColorUtils';
+import { ImageKnifeComponent } from '@ohos/imageknife';
+import { CommonUtils } from '../../utils/CommonUtils';
 const TAG = 'TopNavigationComponent';
@@ -330,8 +332,10 @@ export struct TopNavigationComponentNew {
       if (item.iconUrl && item.iconCUrl) {
         // 有图
-        Image(this.currentTopNavSelectedIndex === index ? item.iconUrl : item.iconCUrl)
+        ImageKnifeComponent({ imageKnifeOption: CommonUtils.getTopImageKnifeOption(item, this.currentTopNavSelectedIndex === index) })
           .height(36)
+          .width(CommonUtils.calTopTabWidth(36,item.iconUrlSize))
+          .enabled(false)
       } else {
         // 无图
         Text(item?.name)
@@ -352,7 +356,6 @@ export struct TopNavigationComponentNew {
         }
       }
-
     }
     .hoverEffect(HoverEffect.Highlight)
     .constraintSize({
@@ -362,8 +365,8 @@ export struct TopNavigationComponentNew {
     .height('100%')
     // .backgroundColor(Color.Transparent)
     .padding({
-      left: $r('app.float.top_tab_item_padding_horizontal'),
-      right: $r('app.float.top_tab_item_padding_horizontal'),
+      left: item.iconUrl && item.iconCUrl ? 0 : $r('app.float.top_tab_item_padding_horizontal'),
+      right: item.iconUrl && item.iconCUrl ? 0 : $r('app.float.top_tab_item_padding_horizontal'),
     })
     .justifyContent(FlexAlign.Center)
     .id(`col_tabBar${index}`)
@@ -379,6 +382,8 @@ export struct TopNavigationComponentNew {
     })
   }
+
+
   /**
    *  频道文字颜色
    * @returns
--- a/sight_harmony/features/wdComponent/src/main/ets/utils/CommonUtils.ets 0 → 100644
View file @27fd98c
+++ b/sight_harmony/features/wdComponent/src/main/ets/utils/CommonUtils.ets 0 → 100644
View file @27fd98c
+import { ALL, ImageKnifeOption } from '@ohos/imageknife';
+import { TopNavDTO } from 'wdBean/Index';
+
+/**
+ * 通用工具类，只记录处理build里面组件业务计算逻辑
+ */
+export class CommonUtils{
+
+
+  /**
+   *  获取顶部导航栏的频道option
+   * @param item
+   * @param isSelect
+   * @returns
+   */
+ public static  getTopImageKnifeOption(item: TopNavDTO, isSelect: boolean): ImageKnifeOption {
+    // let defaultIcon = this.getBottomLocalIcon(navItem, isSelect)
+    let url =  isSelect ?  item.iconCUrl:item.iconUrl // this.getBottomIcon(navItem, isSelect)
+
+    let imageKnifeOption: ImageKnifeOption = {
+      loadSrc: url,
+      // // 占位图使用本地资源
+      // placeholderSrc: defaultIcon,
+      // // 失败占位图使用本地资源
+      // errorholderSrc: defaultIcon,
+      // 是否开启一级内存缓存
+      isCacheable: true,
+      // 磁盘缓存
+      strategy: new ALL(),
+      gif: {
+        playTimes: 1
+      }
+    };
+    return imageKnifeOption
+  }
+
+  /**
+   * 计算 频道tab 宽度
+   * @param height 已知高度
+   * @returns
+   */
+  public static  calTopTabWidth(height:number,scale:string):number{
+    if(scale){
+
+      if(scale.includes('*')){
+        let scaleArray = scale.split('*');
+        return height*Number.parseInt(scaleArray[0])/parseInt(scaleArray[1])
+      }
+    }
+    return height*210/60
+
+  }
+
+}
--- a/sight_harmony/products/phone/src/main/ets/pages/view/VideoChannelPage.ets
View file @27fd98c
+++ b/sight_harmony/products/phone/src/main/ets/pages/view/VideoChannelPage.ets
View file @27fd98c
@@ -2,15 +2,16 @@
  * 视频频道，包含视频和直播
  * 视频为沉浸式,直播同新闻页面
  */
-import { BottomNavDTO, TopNavDTO } from 'wdBean/Index'
+import { BottomNavDTO, TopNavDTO } from 'wdBean/Index';
 import { VideoChannelDetail } from 'wdDetailPlayShortVideo/Index';
 import { WDRouterPage, WDRouterRule } from 'wdRouter';
 import { DisplayDirection } from 'wdConstant/Index';
 import { CompUtils, PageComponent } from 'wdComponent/Index';
-import { TrackingButton, TrackConstants } from 'wdTracking/Index';
-import { Logger, WindowModel } from 'wdKit';
-import { ParamType, Tracking } from 'wdTracking/Index';
+import { ParamType, TrackConstants, Tracking, TrackingButton } from 'wdTracking/Index';
+import { Logger } from 'wdKit';
 import { ColorUtils } from 'wdComponent/src/main/ets/utils/ColorUtils';
+import { ImageKnifeComponent } from '@ohos/imageknife';
+import { CommonUtils } from 'wdComponent/src/main/ets/utils/CommonUtils';
 const TAG = 'VideoChannelPage'
@@ -39,7 +40,6 @@ export struct VideoChannelPage {
   navItem: BottomNavDTO = {} as BottomNavDTO
   // 背景高度
   @State backgroundImageH: number = 0
-
   @Consume @Watch('setBarBackgroundColor') pageShow: number
   async aboutToAppear() {
@@ -48,7 +48,6 @@ export struct VideoChannelPage {
     this.setBarBackgroundColor()
   }
-
   /**
    * 顶导、底导切换下标都到改变背景色，进入或退出沉浸式
    */
@@ -57,16 +56,15 @@ export struct VideoChannelPage {
     if (this.isImmerseChannel() && CompUtils.isVideo(this.currentBottomNavInfo)) {
       this.barBackgroundColor = Color.Black
       this.isImmersive = true
-      ColorUtils.changeTopStatusBarColor(0,0)// 沉浸页面顶部导航栏颜色固定黑色
+      ColorUtils.changeTopStatusBarColor(0, 0) // 沉浸页面顶部导航栏颜色固定黑色
     } else {
       this.isImmersive = false
       this.barBackgroundColor = Color.White
-      ColorUtils.changeTopStatusBarColor(this.navItem.statusBarColor,1)
+      ColorUtils.changeTopStatusBarColor(this.navItem.statusBarColor, 1)
     }
   }
-
   /**
    *  得到顶导文字颜色
    * @param item
@@ -114,28 +112,35 @@ export struct VideoChannelPage {
       Row() {
         ForEach(this.topNavList, (item: TopNavDTO, index: number) => {
           Column() {
-
-            Text(item.name)
-              .fontSize($r('app.float.selected_text_size'))
-              .fontWeight(this.currentTopNavSelectedIndex === index ? FontWeight.Bold : FontWeight.Normal)
-              .fontColor(this.getTopNavFontColor(item, index))
-              .padding({
-                top: $r('app.float.top_tab_item_padding_top'),
-                bottom: $r('app.float.top_tab_item_padding_bottom')
+            if (item.iconUrl && item.iconCUrl) {
+              // 有图
+              ImageKnifeComponent({
+                imageKnifeOption: CommonUtils.getTopImageKnifeOption(item, this.currentTopNavSelectedIndex === index)
               })
-              .maxLines(this.MAX_LINE)
-
-
-            Image($r('app.media.icon_channel_active'))
-             // .colorFilter(ColorUtils.getDrawingColorFilter(this.getBothColor("")))
-              .width(20)
-              .height(3).visibility(this.currentTopNavSelectedIndex === index ? Visibility.Visible : Visibility.Hidden)
-
+                .height(36)
+                .width(CommonUtils.calTopTabWidth(36, item.iconUrlSize))
+                .enabled(false)
+            } else {
+              Text(item.name)
+                .fontSize($r('app.float.selected_text_size'))
+                .fontWeight(this.currentTopNavSelectedIndex === index ? FontWeight.Bold : FontWeight.Normal)
+                .fontColor(this.getTopNavFontColor(item, index))
+                .padding({
+                  top: $r('app.float.top_tab_item_padding_top'),
+                  bottom: $r('app.float.top_tab_item_padding_bottom')
+                })
+                .maxLines(this.MAX_LINE)
+
+              Image($r('app.media.icon_channel_active'))// .colorFilter(ColorUtils.getDrawingColorFilter(this.getBothColor("")))
+                .width(20)
+                .height(3)
+                .visibility(this.currentTopNavSelectedIndex === index ? Visibility.Visible : Visibility.Hidden)
+            }
           }
           .padding({
-            left: $r('app.float.top_tab_item_padding_horizontal'),
-            right: $r('app.float.top_tab_item_padding_horizontal'),
+            left: item.iconUrl && item.iconCUrl ? 0 : $r('app.float.top_tab_item_padding_horizontal'),
+            right: item.iconUrl && item.iconCUrl ? 0 : $r('app.float.top_tab_item_padding_horizontal'),
           })
           .onClick(() => {
             // 视频tab埋点
@@ -197,7 +202,7 @@ export struct VideoChannelPage {
    * 检测是否是沉浸式频道
    * @returns
    */
-  isImmerseChannel():boolean{
+  isImmerseChannel(): boolean {
     return this.navItem.topNavChannelList[this.currentTopNavSelectedIndex].channelStyle === 1;
   }
@@ -215,7 +220,7 @@ export struct VideoChannelPage {
   pageSwiperView() {
     Swiper(this.swiperController) {
       ForEach(this.topNavList, (item: TopNavDTO, index: number) => {
-        if (item.channelStyle===1) {
+        if (item.channelStyle === 1) {
           // 视频
           VideoChannelDetail({
             bottomNavIndex: $_currentNavIndex,