目录

前言

效果展示

实现思路

使用方法

完成的源码和demo

前言

Android TV开发与手机开发最大的不同点就是焦点，TV常用的操作方式是遥控器，所以给用户一个醒目美观的焦点是至关重要的。很多产品经理在设计焦点的时候都会选择扫光的效果，比如小牧电视的控件选中效果。今天就给大家介绍一款自定义的扫光效果控件。

效果展示

1、海报扫光效果

2、带圆角的控件扫光效果，光效不会超过圆角的位置

3、扫光容器，可以在扫光容器中放子控件，目前仅实现了LinearLayout

4、图片扫光效果，光效与图片中不透明内容交融的一种效果

实现思路

这一组控件的实现思路，其实很简单，就是光效bitmap的移动，可以是移动画布，也可以是移动bitmap，两种思路都可以实现。当然其中在实现圆角扫光、光效与图片内容交融等效果时，用到一个比较重要的知识点，就是PorterDuffXfermode。具体介绍Xfermode或者PorterDuffXfermode的文章可以去网上搜一下，有很多。简单讲PorterDuffXfermode是一个非常强大的转换模式，使用它，可以使用图像合成的16条Porter-Duff规则的任意一条来控制Paint如何与已有的Canvas图像进行交互。

PorterDuffXfermode的风格就是上面的16中，我们可以简单的理解为一个SRC图形与DST图形的交集，并集类似的效果，在我们这组控件中，主要用到了DST_ATOP、DST_IN。详细使用方法可参考控件源码。

使用方法

首先需要引入library：

implementation 'com.beauney.scanning:scanning-view:1.0.1'

1、海报斜向的扫光效果控件使用

xml中使用控件：

    <FrameLayout
        android:layout_width="283dp"
        android:layout_height="159dp"
        android:layout_marginStart="20dp"
        android:layout_marginTop="20dp"
        android:focusable="true"
        android:focusableInTouchMode="true">

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/temp_demand_3" />

        <com.beauney.scanning.library.ScanningView
            android:tag="scanning_view"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="#66000000"/>
    </FrameLayout>

java代码中调用start()、stop()方法：

        RelativeLayout container = findViewById(R.id.container);

        for (int i = 0; i < container.getChildCount(); i++) {
            container.getChildAt(i).setOnFocusChangeListener(new View.OnFocusChangeListener() {
                @Override
                public void onFocusChange(View view, boolean b) {
                    ScanningView scanningView = view.findViewWithTag("scanning_view");
                    if (b) {
                        AnimatorUtil.scaleBigAnimator(view);
                        scanningView.start();
                    } else {
                        AnimatorUtil.scaleSmallAnimator(view);
                        scanningView.stop();
                    }
                }
            });
        }

该控件提供了自定义属性lightImage，可以自定义更换光效图片：

        <com.beauney.scanning.library.ScanningView
            android:tag="scanning_view"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:lightImage="@drawable/scanning_view_light"
            android:background="#66000000"/>

图片制作参考默认扫光图片

2、带圆角的竖向扫光效果控件使用

xml中使用控件：

    <FrameLayout
        android:id="@+id/next_text_container"
        android:layout_width="334dp"
        android:layout_height="73dp"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="60dp">

        <View
            android:id="@+id/next_text_bg"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@drawable/ad_text_bg_shape" />

        <TextView
            android:id="@+id/next_text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:layout_marginTop="18dp"
            android:clickable="true"
            android:focusable="true"
            android:focusableInTouchMode="true"
            android:text="按OK键进入下一步"
            android:textColor="#dddddd"
            android:textSize="18sp" />

        <ProgressBar xmlns:android="http://schemas.android.com/apk/res/android"
            android:id="@+id/video_progress_bar"
            style="?android:attr/progressBarStyleHorizontal"
            android:layout_width="294dp"
            android:layout_height="10dp"
            android:layout_gravity="bottom"
            android:layout_marginBottom="14dp"
            android:layout_marginStart="20dp"
            android:background="@null"
            android:progress="100"
            android:progressDrawable="@drawable/ad_progress_selector"/>

        <com.beauney.scanning.library.ScanningRoundView
            android:id="@+id/scanning_round_view"
            android:layout_width="match_parent"
            android:layout_height="match_parent"/>
    </FrameLayout>

java代码中调用start()、stop()方法：

mScanningRoundView.start();

mScanningRoundView.stop();

该控件提供了两个自定义属性，用于修改光效图片和圆角角度，参考如下代码：

        <com.beauney.scanning.library.ScanningRoundView
            android:id="@+id/scanning_round_view"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:roundRadius="10dp"
            app:roundLightImage="@drawable/round_light"/>

图片制作参考默认扫光图片，这里没有采用9patch的图片，所以控件高度要和光效图片的高度一致。

3、带圆角的扫光容器使用

xml中使用控件：

    <com.beauney.scanning.library.ScanningLinearLayout
        android:id="@+id/scanning_container"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="30dp">

        <TextView
            android:id="@+id/language_cn_btn"
            android:layout_width="127dp"
            android:layout_height="27dp"
            android:clickable="true"
            android:focusable="true"
            android:focusableInTouchMode="true"
            android:gravity="center"
            android:text="中文"
            android:textColor="#999999"
            android:background="@drawable/language_cn_nor"
            android:textSize="18sp" />

        <TextView
            android:id="@+id/language_en_btn"
            android:layout_width="127dp"
            android:layout_height="27dp"
            android:clickable="true"
            android:focusable="true"
            android:focusableInTouchMode="true"
            android:gravity="center"
            android:text="English"
            android:background="@drawable/language_en_sel"
            android:textColor="#ffffff"
            android:textSize="18sp" />
    </com.beauney.scanning.library.ScanningLinearLayout>

 java代码中调用start()、stop()方法：

mScanningLayout.start();
mScanningLayout.stop();

 同样提供了两个自定义属性，用于修改光效图片和圆角角度，参考如下代码：

    <com.beauney.scanning.library.ScanningLinearLayout
        android:id="@+id/scanning_container"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layoutRadius="10dp"
        app:layoutLightImage="@drawable/layount_light"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="30dp">
    </com.beauney.scanning.library.ScanningLinearLayout>

 图片制作参考默认扫光图片，这里没有采用9patch的图片，所以控件高度要和光效图片的高度一致。

4、图片扫光效果控件使用

xml中使用控件：

    <FrameLayout
        android:layout_width="83dp"
        android:layout_height="63dp"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="60dp"
        android:layout_gravity="center_horizontal">

        <ImageView
            android:id="@+id/icon_img"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:contentDescription="aaaa"
            android:src="@drawable/icon_choose_sel" />

        <com.beauney.scanning.library.ScanningImageView
            android:id="@+id/scanning_view"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
    </FrameLayout>

java代码中调用相关方法

    public void startScanning(View view) {
        //启动控件动效之前需要将原始的图片传入
        if (mScanningImageView.getSrcBitmap() == null) {
            mScanningImageView.setSrcBitmap(ScreenCapture.captureWidget(mIconImg));
        }
        mScanningImageView.start();
    }

    public void stopScanning(View view) {
        mScanningImageView.stop();
    }

该控件提供了一个自定义属性，用于修改光效颜色，参考如下代码:

        <com.beauney.scanning.library.ScanningImageView
            android:id="@+id/scanning_view"
            android:layout_width="match_parent"
            android:layout_height="match_parent" 
            app:lightColor="@color/colorAccent"/>

完成的源码和demo

Github地址