[HarmonyOS] 统一富媒体动效控件

图片加载库：fresco动效合成库：lottie、ValueAnimator视频播放库：ijkplayer

com.jingdong.app.mall.home.floor.view.linefloor.widget.VideoSkuView / IjkVideoView

• 基本库调研
  

图片加载库：ImageLoadFeature动效合成库：lottie、HGifView视频播放库：ijkplayer

com.taobao.homepage.view.widgets.MultiLayout / HGifView、HVideoView

  
• 静图使用MultiImageView，三方库选用Fresco或Glide
  
• GIF使用MultiGifView，三方库选用Fresco
  
• 动效使用MultiLottieView，三方库选用Lottie
  
• Banner使用MultiPagerView，结合ViewPager产出banner效果
  
• 视频使用MultiVideoView，一方库选用LeadingVideoView支持加载本地资源
  
• 直播使用MultiLiveView，二方库选用WPlayer
  
• 整体统一组装为WubaMultiView，产出一个统一动效控件
  

• 统一性：不同媒体类型调用的接口和模板统一化问题；
• 复用性：富媒体控件在整个APP级别上的缓存复用问题；
• 高效性：如何搭配RecycleView进一步深入到控件级别实现高效复用。
  

public final enum class MediaType private constructor() : kotlin.Enum<MediaType> {  IMAGE,
  GIF,
  LOTTIE,
  PAGER,
  VIDEO;}

1）设置当前媒体类型2）设置URL请求3）播放控制4）设置缓存开关

// 设置媒体类型fun setMediaType(mediaType: MediaType)
// 获取当前的媒体接口fun getIView() : IView?

// 设置请求的地址url…fun setUrl(vararg url: String)
// 设置裁剪类型fun setActualImageScaleType(scaleType: ScalingUtils.ScaleType)
// 设置默认图及其裁剪类型fun setPlaceholderImage(resourceId: Int, scaleType: ScalingUtils.ScaleType?)
// 设置请求结果回调fun setOnRequestStatusListener(listener: WubaMultiView.OnRequestStatusListener)
// 动效播放fun play()
// 动效停止fun stop()
// 动效暂停fun pause()
// 动效是否正在播放fun isPlaying(): Boolean

// 设置缓存fun setUseCache(useCache: Boolean)

/** * 统一动效接口，抽象类 */interface IView {
  fun getMediaType() : MediaType
  fun getView(context: Context) : View
  fun setUrl(vararg url: String) {    val list = ArrayList<String>()    list.addAll(url)    setUrl(list)  }
  fun setUrl(urls: List<String>)
  fun setActualImageScaleType(scaleType: ScalingUtils.ScaleType)
  fun setPlaceholderImage(resourceId: Int, scaleType: ScalingUtils.ScaleType?)
  fun setFailureImage(resourceId: Int, scaleType: ScalingUtils.ScaleType?)
  fun play()
  fun pause()
  fun stop()
  fun isPlaying() : Boolean
  fun setOnRequestStatusListener(listener: WubaMultiView.OnRequestStatusListener)
}

enum class MediaType {
  IMAGE {
    override fun getViewClass(): Class<IView> {
      return MultiImageView::class.java as Class<IView>
    }
    override fun getViewCacheSize(): Int {
      return 10
    }
  },
  ...

  companion object {
    private val CACHE_VIEWS = mutableMapOf<String, ArrayList<IView>>()
  }

  internal abstract fun getViewClass() : Class<IView>

  internal abstract fun getViewCacheSize() : Int

  internal fun getView(useCache: Boolean): IView {
    var v: IView? = null
    if (useCache && CACHE_VIEWS.containsKey(this.name) && (CACHE_VIEWS[this.name]?.size ?: 0) > 0) {
      v = CACHE_VIEWS[this.name]?.removeLast()
    }
    return v ?: getViewClass().newInstance()
  }

  internal fun addViewCache(view: IView) {
    if (!CACHE_VIEWS.containsKey(this.name)) {
      CACHE_VIEWS[this.name] = arrayListOf<IView>()
    }
    if ((CACHE_VIEWS[this.name]?.size?:0) < this.getViewCacheSize()) {
      CACHE_VIEWS[this.name]?.add(view)
    }
  }
  
}

唯一注意事项：XML中配置时需要设置媒体类型，即 media_type=“xxx”

<com.wuba.views.media.WubaMultiView  android:id="@+id/iv_feed_nopic_avator"  android:layout_width="30dp"  android:layout_height="30dp"  android:layout_alignParentEnd="true"  android:layout_marginTop="2.5dp"  app:media_type="IMAGE"  app:scaleType="centerCrop"  app:placeholderImage="@drawable/xxx"  app:placeholderImageScaleType="centerCrop"  app:failureImage="@drawable/xxx"  app:failureImageScaleType="centerCrop"/>

改造前的波动是因为场景中使用了两个媒体控件分别承载不同的效果，会出现同时加载静图控件和Lottie控件的情况；而改造后的控件内部同一时间只会加载一种用户指定的媒体控件，这样表现在内存上波动最多只会出现一次。