Android带阴影点击效果，可自定义属性的媒体播放控制按钮。包括-米微资源分享网

带阴影点击效果，可自定义属性的媒体播放控制按钮。包括【播放(暂停)】按钮，【下一曲(上一曲)】按钮。😊

自定义 View 开发的可定制大小，颜色，圆角，阴影半径，描边风格的播放，暂停按钮，上一曲，下一曲按钮

一.开发背景

网易云音乐的很多按钮控件点击时都是带阴影效果的，不同于 material design 的涟漪效果，按钮被点击时图标轮廓四周会有白色“阴影”，或者可以称为“荧光”效果，

二.效果图

静态图	动态图

三.介绍

控件具有如下继承结构
|-- android.view.View
    |-- abstract MediaView
        |-- SkipView  上一曲(下一曲)按钮
            |-- PlayView  播放按钮

3.1 构成元素

xml 中提供的可定制属性如下：

radius 半径：整个控件的半径
shadowRadius 阴影半径

（1）外圆圈

strokeWidth 描边宽度
strokeColor 描边颜色

（2）上一曲(下一曲)按钮：

distance 单竖线和三角形顶点距离

1 单竖线：

innerLineWidth(Height) 宽度，高度：任一者赋值为 0 时不进行绘制。
innerLineRadius 圆角大小

2 等腰三角形：

triangleWidth 三角形顶角到底边的距离
triangleHeight 底边高度
triangleColor 填充颜色
triangleRadius 圆角大小
triangleHollow 是否空心
triangleStroke 空心时的描边宽度

（3）播放，暂停按钮

checked 是否播放，true 为正在播放（此时处于可暂停状态）

1 播放状态：播放状态下直接绘制继承自 SkipView 的等腰三角形 2 暂停状态：此时两条竖线的属性时完全一致的

pauseLineDistance 双竖线间距
pauseLineWidth 竖线宽度
pauseLineHeight 竖线高度
pauseLineRadius 竖线圆角
pauseLineColor 竖线颜色
pauseLineHollow 是否空心
pauseLineStroke 空心状态下指定竖线描边宽度

3.2 java 类表示

控件由三个 java 类表示，三个类的定义如下：

abstract class MediaView extends View：该类定义了控件的基本结构：圆圈构成的固定的最外部，由子类负责绘制的内部。绘制规则：先绘制外部，再绘制内部触摸事件处理：ACTION_DOWN时开始触摸动画，ACTION_UP时开启释放动画。（两个动画都是作用于“阴影大小”）
class SkipView extends MediaView: 该类继承自 MediaView，实现了 MediaView 定义的drawInside方法，完成单竖线和三角形的绘制。
class PlayView extends SkipView：
该类继承自 SkipView ，完成在播放，暂停两种状态下控件的绘制，覆写 onTouchEvent 方法以实现 checked 属性变化监听，同时覆写了 SkipView 的 drawLine 方法，以绘制可播放状态下的双竖线。

四.适用场景：

音乐，视频等媒体文件的播放控制。

五.如何使用

5.1 复制源文件

使用【上一曲(下一曲)】和【播放(暂停)】控件需复制 MediaView.java ， SkipView.java ， PlayView.java 和 attrs.xml 文件到你的项目中。

如果你只需要【上一曲(下一曲)】对应的控件：
1 复制 MediaView.java 和 SkipView.java 到你的项目中
2 将 attrs 文件中的 <declare-styleable name="MediaView">....</declare-styleable>及其对应的 attr 属性定义，<declare-styleable name="SkipView">....</declare-styleable>及其对应的 attr 属性定义复制到你项目中的 values 文件夹下的资源文件中。

5.2 使用示例

在完成 5.1 之后就可以在你的项目中使用了。

可以在布局文件中直接使用：使用时包名替换成你的源文件所在位置

【上一曲(下一曲)】

        <com.duan.mediaviewdemo.view.SkipView
            android:id="@+id/sv_01"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="0.5"

            app:innerLineHeight="30dp"
            app:innerLineWidth="6dp"

            app:innerLineRadius="8dp"

            app:distance="-8dp"
            app:triangleHeight="40dp"

            app:strokeWidth="0dp"
            app:triangleColor="#2ca4a4"
            app:triangleRadius="8dp"

            />

【播放(暂停)】控件

      <com.duan.mediaviewdemo.view.PlayView
            android:layout_width="0dp"

            android:layout_height="match_parent"
            android:layout_weight="0.5"

            android:rotation="180"
            app:checked="true"
            app:pauseLineDistance="8dp"
            app:pauseLineHeight="35dp"

            app:pauseLineHollow="true"

            app:pauseLineRadius="0dp"
            app:pauseLineWidth="10dp"
            app:strokeColor="#e4188f"
            app:triangleColor="#e4188f"
            app:strokeWidth="3dp"
            app:triangleHeight="35dp"


            app:triangleHollow="true"
            app:triangleRadius="5dp"
            app:triangleStroke="7dp" />

在 java 中使用：

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        SkipView sv = (SkipView) findViewById(R.id.sv_01);
        PlayView pv = (PlayView) findViewById(R.id.pv_01);

        sv.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(MainActivity.this, "click", Toast.LENGTH_SHORT).show();
            }
        });

        pv.setOnCheckedChangeListener(new PlayView.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(PlayView view, boolean checked) {
                Toast.makeText(MainActivity.this, "checked:" + checked, Toast.LENGTH_SHORT).show();
            }
        });

    }

六.版本变化

v 0.1 2017-06-16

七.未来的开发计划

setter 和 getter 方法测试
规范注释

资源均来自第三方，谨慎下载，前往第三方网站下载