Android 快速制作一个YouTube 拖动进度视屏预览功能

litao0621

已于 2023-05-31 14:54:08 修改

阅读量360

点赞数

文章标签： android 动画 kotlin

于 2023-03-22 14:06:45 首次发布

本文链接：https://blog.csdn.net/sd6352051/article/details/129706150

版权

下面我们基于nifty-slider来快速实现以上效果

一、添加依赖

dependencies {
    //基础库 - 实现视频拖动的基础功能 
    implementation 'io.github.litao0621:nifty-slider:(latest version)'
    //可选的效果库 - 来实现touch down、touch up后滑动的放大缩小效果
    implementation 'io.github.litao0621:nifty-slider-effect:(latest version)'

}

二、功能实现

添加布局将tipViewVisible改为true显示提示浮窗，定义好轨道颜色，滑块颜色等属性，这个里需要注意我们需要自定义视频预览浮窗，因为宽度比较大，默认是可能滑出屏幕的，所以要将isTipViewClippingEnabled改为true,表示浮窗只能够在屏幕内滑动。

<com.litao.slider.NiftySlider
    android:id="@+id/nifty_slider"
    android:layout_width="0dp"
    android:layout_height="64dp"
    android:padding="16dp"
    android:valueFrom="0"
    android:valueTo="123000"
    android:value="0"
    app:isTipViewClippingEnabled ="true"
    app:tipViewVisible="true"
    app:enableDrawHalo="false"
    app:trackHeight="3dp"
    app:trackColor="@color/youtube_theme_color"
    app:thumbColor="@color/youtube_theme_color"
    app:thumbShadowColor="@android:color/transparent"
    app:tipViewBackground="@color/youtube_theme_color"
    app:thumbRadius="6dp"
    app:trackCornersRadius="0dp"
     />

2.自定义视频预览浮窗 custom_tip_view.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <!--  为预览view 添加一个边框  -->
    <androidx.constraintlayout.utils.widget.ImageFilterView
        android:id="@+id/video_border"
        android:layout_width="130dp"
        android:layout_height="70dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        android:background="@android:color/white"
        android:scaleType="centerCrop"
        app:round="6dp"
        />
    <!--  使用系统控件来快速实现圆角效果  -->
    <androidx.constraintlayout.utils.widget.ImageFilterView
        android:id="@+id/video_image"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_margin="2dp"
        app:layout_constraintLeft_toLeftOf="@+id/video_border"
        app:layout_constraintTop_toTopOf="@+id/video_border"
        app:layout_constraintRight_toRightOf="@+id/video_border"
        app:layout_constraintBottom_toBottomOf="@+id/video_border"
        android:scaleType="centerCrop"
        app:round="4dp"
        />
    <androidx.appcompat.widget.AppCompatTextView
        android:id="@+id/time"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="4dp"
        app:layout_constraintLeft_toLeftOf="@+id/video_image"
        app:layout_constraintRight_toRightOf="@+id/video_image"
        app:layout_constraintTop_toBottomOf="@+id/video_image"
        android:textColor="#AAAAAA"
        />

</androidx.constraintlayout.widget.ConstraintLayout>

添加我们的自定义提示浮窗

val customTipView = View.inflate(context, R.layout.custom_tip_view, null)
niftySlider.addCustomTipView(customTipView)

添加动画效果
可以看到上面的效果图，滑块按下/松开是有一个缩放的动画效果的，我们可以直接利用nifty-slider-effect库中提供的AnimationEffect来完成。

val animEffect = AnimationEffect(niftySlider).apply {
  animDuration = 300
  srcThumbRadius = 6.dp  //原始的thumb 半径
  targetThumbRadius = 9.dp //按下后需过渡到的 thumb 半径
}
niftySlider.effect = animEffect

监听Touch Start、 Touch Stop
从上面效果图可以看出，在拖动结束后一段时间滑块会自动隐藏，这里可以利用自带的回调来实现

niftySlider.setOnSliderTouchListener(object : NiftySlider.OnSliderTouchListener {
  override fun onStartTrackingTouch(slider: NiftySlider) {
      //拖动开始时让给thumb 展示出来
      slider.showThumb(false)
  }

  override fun onStopTrackingTouch(slider: NiftySlider) {
      //拖动结束后一段时间让thumb 隐藏掉
      slider.hideThumb(delayMillis = 2000)
  }
})

到这里我们就很快的现实了YouTube的视频预览功能，预览浮窗默认会有一个Fade In 、Fade Out 动画，如果我们想让它更炫一些还可以通过 niftySlider.createTipAnimation()来定义我们自己的效果。