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)'
}
二、功能实现
- 添加布局 将
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()来定义我们自己的效果。
结束
YouTube视频预览的完整Demo可以到这里查看
详细的属性文档可以到这里查看
到此我们就用很少的代码实现了YouTube的视频预览功能，nifty-slider为我们提供了高度的自定义方法，可以对一切不满意的地方进行调整，后面我们还会用它来实现YouTube的滑动轨道视频分章功能 以及滑动轨道展示视频用户关注度曲线。
