[Android开发]支持高亮灯光移动效果的TextView、ImageView及ViewGroup

一、效果图：

1、支持高亮的ImageView

2、支持高亮的TextView

3、支持高亮的FrameLayout、LinearLayout、RelativeLayout可任意组合任何类型的View

二、实现原理

        1、TextView的实现原理

        重写onDraw，然后只需要给TextView画笔添加一个渐变色shader即可，设置渐变色开始位置和结束为止，然后绘制文字，摘取部分代码如下：

@Override
protected void onDraw(Canvas canvas) {
    LinearGradient linearGradient = new LinearGradient(startHighlightOffset+x0, y0,         startHighlightOffset+x1, y1,  new int[]{getCurrentTextColor(),highlightColor,highlightColor,getCurrentTextColor()}, new float[]{0,.45f,.55f,1}, Shader.TileMode.CLAMP);
    textPaint.setShader(linearGradient);

    super.onDraw(canvas);
}

        2、ImageView实现原理

        重写onDraw，绘制一个渐变色方形，利用DST_IN模式和图片相交部分即是高亮区域，然后再把原图绘制出来即可，摘取部分代码如下：

@Override
protected void onDraw(Canvas canvas) {
    int hypotenuseLength = (int) Math.sqrt(Math.pow(getWidth(),2)+Math.pow(getHeight(),2));
    int left = -(hypotenuseLength - getWidth())/2;
    int top = -(hypotenuseLength - getHeight())/2;
    int right = getWidth() + (hypotenuseLength - getWidth())/2;
    int bottom = getHeight() + (hypotenuseLength - getHeight())/2;

    canvas.rotate(highlightRotateDegrees,getWidth()/2,getHeight()/2);

    mImagePaint.setXfermode(null);
    canvas.saveLayer(new RectF(left, top, right, bottom), mImagePaint, Canvas.ALL_SAVE_FLAG);
    
    LinearGradient linearGradient =
                new LinearGradient(startHighlightOffset, 0, startHighlightOffset + highlightWidth, 0,
                        new int[]{highlightEndColor, highlightColor,highlightColor, highlightEndColor},
                        new float[]{0,.45f,.55f,1}, Shader.TileMode.CLAMP);
    mImagePaint.setShader(linearGradient);
    canvas.drawRect(startHighlightOffset, top, startHighlightOffset + highlightWidth,bottom,mImagePaint);
    
    mImagePaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_IN));
    canvas.saveLayer(new RectF(left, top, right, bottom), mImagePaint, Canvas.ALL_SAVE_FLAG);
    canvas.rotate(-highlightRotateDegrees,getWidth()/2,getHeight()/2);
    super.onDraw(canvas);
}

 三、使用方法

设置 HighlightTextView 示例

<com.flyjingfish.highlightviewlib.HighlightTextView
    android:id="@+id/highlightTextView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text=" Hello World! "
    android:gravity="center"
    android:textStyle="bold"
    android:textColor="@color/black"
    android:layout_marginTop="10dp"
    app:highlight_view_highlightWidth="40dp"
    app:highlight_view_highlightColor="#E6ffffff"
    app:highlight_view_autoStart="true"
    app:highlight_view_duration="2500"
    app:highlight_view_repeatCount="-1"
    app:highlight_view_repeatMode="restart"
    app:highlight_view_highlightRotateDegrees="30"
    app:highlight_view_startDirection="from_left"
    android:textSize="30sp"/>

设置 HighlightImageView 示例

<com.flyjingfish.highlightviewlib.HighlightImageView
    android:id="@+id/highlightImageView"
    android:layout_width="154dp"
    android:layout_height="64dp"
    android:scaleType="fitXY"
    android:src="@mipmap/e_bank"
    app:highlight_view_highlightWidth="30dp"
    app:highlight_view_highlightColor="#b3ffffff"
    app:highlight_view_autoStart="true"
    app:highlight_view_duration="2500"
    app:highlight_view_repeatCount="-1"
    app:highlight_view_repeatMode="restart"
    app:highlight_view_highlightRotateDegrees="30"
    app:highlight_view_startDirection="from_left"
    android:layout_marginTop="10dp"/>

设置 ViewGroup 示例(以HighlightLinearLayout为例)

<com.flyjingfish.highlightviewlib.HighlightLinearLayout
    android:id="@+id/highlightLinearLayout"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:gravity="center"
    app:highlight_view_highlightWidth="40dp"
    app:highlight_view_highlightColor="#E6ffffff"
    app:highlight_view_autoStart="true"
    app:highlight_view_duration="2500"
    app:highlight_view_repeatCount="-1"
    app:highlight_view_repeatMode="restart"
    app:highlight_view_highlightRotateDegrees="30"
    app:highlight_view_startDirection="from_left">
    <ImageView
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:scaleType="fitXY"
        android:src="@mipmap/camera"
        android:layout_marginTop="10dp"/>
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text=" Hello World! "
        android:gravity="center"
        android:textStyle="bold|italic"
        android:textColor="@color/black"
        android:layout_marginTop="10dp"
        android:textSize="30sp"/>

</com.flyjingfish.highlightviewlib.HighlightLinearLayout>

四、Github地址如下，欢迎star～～～

https://github.com/FlyJingFish/HighlightView