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

youtube_style.gif image.png

下面我们基于nifty-slider来快速实现以上效果, 上面的gif如果不能播放点这里

一、添加依赖

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

}

二、功能实现

1. 添加布局 将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>

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

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

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

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

5. 监听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()来定义我们自己的效果。

结束

YouTube视频预览的完整Demo可以到这里查看

详细的属性文档可以到这里查看

Github 项目源码

到此我们就用很少的代码实现了YouTube的视频预览功能，nifty-slider为我们提供了高度的自定义方法，可以对一切不满意的地方进行调整，后面我们还会用它来实现YouTube的滑动轨道视频分章功能 以及滑动轨道展示视频用户关注度曲线。