android tv 焦点移动控件-飞框-FlowView

github库---demo源码-https://github.com/ihu11/MetroRecyclerView

1.先来一张效果图展示焦点移动控制

device-2019-10-16-145843.gif device-2019-10-16-145301.gif

功能概述
1、焦点框独立于整个界面之上，可以与直接与其他控件和view的交互，且自己管理自己的绘制线程，所以焦点框可以在屏幕的任意位置上移动，不局限于当前的列表控件。也方便了统一的管理
2、主要实现了焦点框的平滑移动，只需要知道下一个焦点的view就可以根据这个view的位置把焦点框移动过去。
3、在移动过程中，如果选择了其他焦点，该焦点框会根据下一个焦点的位置自动转移方向，不需要等下上一次的焦点事件完成，可以时刻响应焦点移动事件的改变。
4、不管下一个焦点与当前焦点的大小是否一样，焦点框都是准确到框住下一个焦点的区域，焦点框的大小根据焦点位置和区域的大小自动改变。
5、焦点框的资源图片也可以动态改变，适应不同需求的焦点框，例如从圆角的方框移动到一个直角的方框上，通过切换焦点框的资源图而改变形状。
6、开放可重载方法，提供其他类继承，可在该控件上再定制其他效果，例如在焦点框上增加动画效果
7、焦点框直接绘制不需要地图，可以变换为任意颜色和形状

流程图

代码实现

import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.view.ViewTreeObserver;
import android.widget.TextView;

import com.ihu11.metro.flow.FlowNormalView;
import com.ihu11.metro.flow.FlowView;

public class MainActivity extends Activity implements View.OnFocusChangeListener, View.OnClickListener {
    private FlowView flowView;
    private TextView textView1;
    private TextView textView2;
    private TextView textView3;
    private TextView textView4;

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

        flowView = findViewById(R.id.flow_view);
        textView1 = findViewById(R.id.text1);
        textView2 = findViewById(R.id.text2);
        textView3 = findViewById(R.id.text3);
        textView4 = findViewById(R.id.text4);
        textView1.setOnFocusChangeListener(this);
        textView2.setOnFocusChangeListener(this);
        textView3.setOnFocusChangeListener(this);
        textView4.setOnFocusChangeListener(this);
        textView1.setOnClickListener(this);
        textView2.setOnClickListener(this);
        textView3.setOnClickListener(this);
        textView4.setOnClickListener(this);

        textView4.setNextFocusDownId(R.id.text1);
        textView1.setNextFocusUpId(R.id.text4);

        requestViewFocus(textView1);
    }

    @Override
    public void onFocusChange(View view, boolean b) {
        if (b) {
            if (view == textView1) {
                //flowView.setSmooth(false);//直接到 不使用动画
            } else if (view == textView2) {
                flowView.setFlowPadding(20, 20, 20, 20);//增加边框距离
            } else if (view == textView3) {
                flowView.setNextShape(FlowNormalView.SHAPE_RECT);//变成直角方形
            } else if (view == textView4) {
                flowView.setNextShape(FlowNormalView.SHAPE_ROUND);//变成圆边方形
            }
            flowView.moveTo(view, 1.0f);
        }
    }

    public static void requestViewFocus(final View view) {
        if (view.getWidth() > 0 && view.getHeight() > 0) {
            view.requestFocus();
            return;
        }
        view.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {

            @SuppressWarnings("deprecation")
            @Override
            public void onGlobalLayout() {
                int width = view.getWidth();
                int height = view.getHeight();
                if (width > 0 && height > 0) {
                    view.getViewTreeObserver().removeGlobalOnLayoutListener(this);
                    view.setFocusable(true);
                    view.requestFocus();
                }
            }
        });
    }

    @Override
    public void onClick(View view) {
        if (view == textView3) {
            startActivity(new Intent(this, GridActivity.class));
        } else if (view == textView2) {
            startActivity(new Intent(this, HorActivity.class));
        } else if (view == textView1) {
            startActivity(new Intent(this, VerActivity.class));
        } else if (view == textView4) {
            startActivity(new Intent(this, ModifyActivity.class));
        }
    }
}

布局文件

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ffB0C4DE">

    <TextView
        android:id="@+id/text1"
        android:layout_width="100px"
        android:layout_height="50px"
        android:layout_marginLeft="200px"
        android:layout_marginTop="200px"
        android:focusable="true"
        android:gravity="center"
        android:text="垂直列表"
        android:textColor="#ffffffff" />

    <TextView
        android:id="@+id/text2"
        android:layout_width="110px"
        android:layout_height="50px"
        android:layout_marginLeft="200px"
        android:layout_marginTop="300px"
        android:focusable="true"
        android:gravity="center"
        android:text="水平列表"
        android:textColor="#ffffffff" />

    <TextView
        android:id="@+id/text3"
        android:layout_width="120px"
        android:layout_height="50px"
        android:layout_marginLeft="200px"
        android:layout_marginTop="400px"
        android:focusable="true"
        android:gravity="center"
        android:text="网格列表"
        android:textColor="#ffffffff" />

    <TextView
        android:id="@+id/text4"
        android:layout_width="160px"
        android:layout_height="50px"
        android:layout_marginLeft="200px"
        android:layout_marginTop="500px"
        android:focusable="true"
        android:gravity="center"
        android:text="可删除项的列表"
        android:textColor="#ffffffff" />

    <com.ihu11.metro.flow.FlowView
        android:id="@+id/flow_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:flow_color1="@android:color/white"
        app:flow_color2="@android:color/black"
        app:viewType="normal"
        app:flow_stroke_width="2px"
        app:round_radius="5px" />

</RelativeLayout>

FlowView

package com.ihu11.metro.flow;

import android.content.Context;
import android.content.res.TypedArray;
import android.util.AttributeSet;
import android.view.View;
import android.view.ViewGroup;

import com.ihu11.metro.R;

public class FlowView extends ViewGroup {

    public final static int VIEW_TYPE_NORMAL = 0;
    public final static int VIEW_TYPE_SOLID = 1;
    public final static int VIEW_TYPE_NO_SHADOW = 2;

    protected FlowNormalView iFlowView;
    private int viewType;
    private float roundRadius;

    public FlowView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init(context, attrs);
    }

    public FlowView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public FlowView(Context context) {
        this(context, null);
    }

    private void init(Context context, AttributeSet attrs) {
        int color1 = -1;
        int color2 = -1;
        int strokeWidth = -1;
        if (attrs != null) {
            TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.FlowView);
            viewType = a.getInt(R.styleable.FlowView_viewType, VIEW_TYPE_NORMAL);
            roundRadius = a.getDimensionPixelSize(R.styleable.FlowView_round_radius, 0);
            color1 = a.getResourceId(R.styleable.FlowView_flow_color1, -1);
            color2 = a.getResourceId(R.styleable.FlowView_flow_color2, -1);
            strokeWidth = a.getResourceId(R.styleable.FlowView_flow_stroke_width, -1);
            a.recycle();
        } else {
            viewType = VIEW_TYPE_NORMAL;
        }

        if (viewType == VIEW_TYPE_NORMAL) {
            iFlowView = new FlowNormalView(context);
            addView(iFlowView);
        } else if (viewType == VIEW_TYPE_SOLID) {
            iFlowView = new FlowSolidView(context);
            addView(iFlowView);
        } else if (viewType == VIEW_TYPE_NO_SHADOW) {
            iFlowView = new FlowNormalView(context);
            iFlowView.setNoShawdow();
            addView(iFlowView);
        }

        iFlowView.setDefaultRadius(roundRadius);
        iFlowView.setStrokeWidth(strokeWidth);
        int c1 = -1;
        if (color1 != -1) {
            c1 = getResources().getColor(color1);
        }
        int c2 = -1;
        if (color2 != -1) {
            c2 = getResources().getColor(color2);
        }
        iFlowView.setRectColor(c1, c2);
    }

    @Override
    public ViewGroup.LayoutParams generateLayoutParams(AttributeSet attrs) {
        return new MarginLayoutParams(getContext(), attrs);
    }

    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        int cCount = getChildCount();
        for (int i = 0; i < cCount; i++) {
            View childView = getChildAt(i);
            childView.layout(l, t, r, b);
        }
    }

    @Override
    public void setVisibility(int visibility) {
        super.setVisibility(visibility);
        int cCount = getChildCount();
        for (int i = 0; i < cCount; i++) {
            View childView = getChildAt(i);
            childView.setVisibility(visibility);
        }
    }

    public void moveTo(View view, float scale) {
        if (iFlowView != null) {
            iFlowView.moveTo(view, scale);
        }
    }

    public void setFlowPadding(int left, int top, int right, int bottom) {
        if (iFlowView != null) {
            iFlowView.setFlowPadding(left, top, right, bottom);
        }
    }

    public void moveTo(float x, float y, float width, float height, float scale) {
        if (iFlowView != null) {
            iFlowView.moveTo(x, y, width, height, scale);
        }
    }

    public void moveTo(View view, float scale, int offsetX, int offsetY, boolean isSmooth) {
        if (iFlowView != null) {
            iFlowView.moveTo(view, scale, offsetX, offsetY, isSmooth);
        }
    }

    public void setOffset(int x, int y) {
        if (iFlowView != null) {
            iFlowView.setOffset(x, y);
        }
    }

    public void setSmooth(boolean isSmooth) {
        if (iFlowView != null) {
            iFlowView.setSmooth(isSmooth);
        }
    }

    public void setNextShape(int shape) {
        if (iFlowView != null) {
            iFlowView.setNextShape(shape);
        }
    }

    public void setRectColor(int rectColor, int shadowColor) {
        if (iFlowView != null) {
            iFlowView.setRectColor(rectColor, shadowColor);
        }
    }

    public void setStrokeWidth(float strokeWidth) {
        iFlowView.setStrokeWidth(strokeWidth);
    }

    public void setDefaultRadius(float roundRadius) {
        iFlowView.setDefaultRadius(roundRadius);
    }
}

FlowNormalView

package com.ihu11.metro.flow;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.PorterDuff;
import android.graphics.PorterDuffXfermode;
import android.graphics.RectF;
import android.support.annotation.Nullable;
import android.util.AttributeSet;
import android.util.Log;
import android.view.View;
import android.view.ViewGroup;
import android.view.animation.AccelerateDecelerateInterpolator;
import android.view.animation.AccelerateInterpolator;
import android.view.animation.DecelerateInterpolator;
import android.view.animation.Interpolator;

public class FlowNormalView extends View {

    public final static int SHAPE_ROUND_RECT = 0;
    public final static int SHAPE_RECT = 1;
    public final static int SHAPE_ROUND = 2;

    private final static String TAG = "FlowHand";
    private final static float SPEED = 2f;// 默认速度
    private final static long MIN_FLOW_TIME = 200;// 最小时间
    private final static long MAX_FLOW_TIME = 300;// 最大时间
    private final static float SHADOW_TOTAL_WIDTH = 40f;
    private final static float SHADOW_STROKE_WIDTH = 1f;
    private final static int SHADOW_ALPHA_START = 150;
    private static final Interpolator mInterpolator1 = new AccelerateDecelerateInterpolator();
    private static final Interpolator mInterpolator2 = new DecelerateInterpolator();
    private static final Interpolator mInterpolatorShadow = new AccelerateInterpolator();
    private static final int INTERVAL_TIME_NORMAL = 20;

    private boolean isRun = false;
    private int offsetX = 0;
    private int offsetY = 0;
    private int paddingLeft = 0;
    private int paddingRight = 0;
    private int paddingTop = 0;
    private int paddingBottom = 0;
    private int shape = SHAPE_ROUND_RECT;
    private float strokeWidth;
    protected float screenScale;
    private boolean isSmooth = true;
    private boolean isContinuityMove = false;
    private boolean noShawdow = false;

    private int rectColor = 0xFFFFFFFF;
    private int shadowColor = 0xFF000000;

    private RoundRectF lastRectF;
    private RoundRectF currRectF;
    private RoundRectF destRectF;
    private RoundRectF shadowRectF;

    protected Paint mPaint;
    private Paint mPaintShadow;
    private Paint paintEraser;
    private float defaultRadius;

    private long startTime = 0L;
    private long totalTime = 0L;
    private float distance = 0f;

    class RoundRectF extends RectF {
        float radius;

        public RoundRectF() {
        }

        public void set(RoundRectF src) {
            this.left = src.left;
            this.right = src.right;
            this.top = src.top;
            this.bottom = src.bottom;
            this.radius = src.radius;
        }

    }

    public FlowNormalView(Context context) {
        super(context);
        init(context);
    }

    public FlowNormalView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        init(context);
    }

    public FlowNormalView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init(context);
    }

    public FlowNormalView(Context context, @Nullable AttributeSet attrs, int defStyleAttr, int defStyleRes) {
        super(context, attrs, defStyleAttr, defStyleRes);
        init(context);
    }

    protected void init(Context context) {

        lastRectF = new RoundRectF();
        currRectF = new RoundRectF();
        destRectF = new RoundRectF();
        shadowRectF = new RoundRectF();

        screenScale = context.getResources().getDisplayMetrics().widthPixels / 1920f;
        strokeWidth = 2f * screenScale;

        mPaint = new Paint();
        mPaint.setAntiAlias(true);
        mPaint.setColor(rectColor);
        mPaint.setStrokeWidth(strokeWidth);
        mPaint.setStyle(Paint.Style.STROKE);

        mPaintShadow = new Paint();
        mPaintShadow.setAntiAlias(true);
        mPaintShadow.setColor(shadowColor);
        mPaintShadow.setStyle(Paint.Style.STROKE);

        paintEraser = new Paint();
        paintEraser.setAntiAlias(true);
        paintEraser.setColor(Color.BLACK);
        paintEraser.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_OUT));
    }

    private void start() {
        if (isRun) {
            return;
        }
        isRun = true;
        new Thread() {
            public void run() {
                while (isRun) {
                    refreshView();
                }
                isRun = false;
            }
        }.start();
    }

    protected void refreshView() {
        try {
            Thread.sleep(INTERVAL_TIME_NORMAL);
        } catch (InterruptedException e) {
            e.printStackTrace();
        }
        postInvalidate();
    }

    protected void moveToLocation(float l, float t, float width, float height, float roundScale) {
        resetLast();

        // 偏移量
        l -= offsetX;
        t -= offsetY;

        destRectF.left = l - paddingLeft;
        destRectF.right = l + width + paddingRight;
        destRectF.top = t - paddingTop;
        destRectF.bottom = t + height + paddingBottom;
        if (shape == SHAPE_ROUND_RECT) {
            destRectF.radius = defaultRadius * roundScale;
        } else if (shape == SHAPE_RECT) {
            destRectF.radius = 0f;
        } else if (shape == SHAPE_ROUND) {
            destRectF.radius = Math.min(destRectF.bottom - destRectF.top, destRectF.right - destRectF.left) / 2;
        }

        startTime = System.currentTimeMillis();
        distance = getDistance(lastRectF.centerX(), lastRectF.centerY(), destRectF.centerX(), destRectF.centerY());

        if (isSmooth) {
            if (lastRectF.width() < 0.1f || lastRectF.height() < 0.1f) {
                totalTime = 0;
            } else {
                totalTime = (long) (distance / SPEED);
                if (totalTime > MAX_FLOW_TIME) {
                    totalTime = MAX_FLOW_TIME;
                } else if (totalTime < MIN_FLOW_TIME) {
                    totalTime = MIN_FLOW_TIME;
                }
            }
        } else {
            totalTime = 0;
        }
        reset();
        start();
    }

    private float getDistance(float x1, float y1, float x2, float y2) {
        return (float) Math.sqrt((x1 - x2) * (x1 - x2) + (y1 - y2) * (y1 - y2));
    }

    private float getCurrDistance() {
        long time = System.currentTimeMillis();
        if (time >= startTime + totalTime) {
            return distance;
        }
        float p = (time - startTime) / (float) totalTime;
        if (isContinuityMove) {
            return mInterpolator2.getInterpolation(p) * distance;
        } else {
            return mInterpolator1.getInterpolation(p) * distance;
        }
    }

    private void resetLast() {
        if (Math.abs(getCurrDistance() - distance) < 0.1f) {
            isContinuityMove = false;
        } else {
            isContinuityMove = true;
        }

        lastRectF.set(currRectF);
    }

    @Override
    public void onDraw(Canvas canvas) {
        drawView(canvas);
    }

    private void drawView(Canvas canvas) {
        float currDistance = getCurrDistance();
        if (distance != 0) {
            currRectF.left = lastRectF.left + (destRectF.left - lastRectF.left) * (currDistance / distance);
            currRectF.right = lastRectF.right + (destRectF.right - lastRectF.right) * (currDistance / distance);
            currRectF.top = lastRectF.top + (destRectF.top - lastRectF.top) * (currDistance / distance);
            currRectF.bottom = lastRectF.bottom + (destRectF.bottom - lastRectF.bottom) * (currDistance / distance);
            currRectF.radius = lastRectF.radius + (destRectF.radius - lastRectF.radius) * (currDistance / distance);
        }

        if (currRectF.width() > 0.1f && currRectF.height() > 0.1f) {
            drawRoundRectF(canvas, currRectF);
            drawExtra(canvas, currRectF);
        }

        if (Math.abs(currDistance - distance) < 0.1f) {
            isContinuityMove = false;
            isRun = false;
        }
    }

    protected void drawExtra(Canvas canvas, RectF currRectF) {

    }

    protected void drawRoundRectF(Canvas canvas, RoundRectF currRectF) {
        shadowRectF.set(currRectF);
        if (!noShawdow) {
            mPaintShadow.setStrokeWidth(SHADOW_STROKE_WIDTH);
            for (float i = 0f; i < SHADOW_TOTAL_WIDTH; i += SHADOW_STROKE_WIDTH) {
                shadowRectF.left = currRectF.left - i;
                shadowRectF.top = currRectF.top - i;
                shadowRectF.right = currRectF.right + i;
                shadowRectF.bottom = currRectF.bottom + i;
                shadowRectF.radius = currRectF.radius + i;
                float p = mInterpolatorShadow.getInterpolation(((SHADOW_TOTAL_WIDTH - i) / SHADOW_TOTAL_WIDTH));
                mPaintShadow.setAlpha((int) (p * SHADOW_ALPHA_START));
                canvas.drawRoundRect(shadowRectF, shadowRectF.radius, shadowRectF.radius, mPaintShadow);
            }
        }
        canvas.drawRoundRect(currRectF, currRectF.radius, currRectF.radius, mPaint);
    }

    public void setNoShawdow() {
        noShawdow = true;
    }

    public void setDefaultRadius(float defaultRadius) {
        this.defaultRadius = defaultRadius;
    }

    public void setNextShape(int shape) {
        this.shape = shape;
    }

    /**
     * 设置偏移
     *
     * @param x X轴的偏移量
     * @param y Y轴的偏移量
     */
    public void setOffset(int x, int y) {
        offsetX = x;
        offsetY = y;
    }

    public void setSmooth(boolean isSmooth) {
        this.isSmooth &= isSmooth;
    }

    private void reset() {
        offsetX = 0;
        offsetY = 0;
        isSmooth = true;
        paddingLeft = 0;
        paddingRight = 0;
        paddingTop = 0;
        paddingBottom = 0;
        shape = SHAPE_ROUND_RECT;
    }

    /**
     * 移动到view的位置
     *
     * @param view
     * @param scale    是否缩放
     * @param offsetX  X轴的偏移量
     * @param offsetY  Y轴的偏移量
     * @param isSmooth 是否平滑滚动
     */
    public void moveTo(View view, float scale, int offsetX, int offsetY, boolean isSmooth) {
        if (view == null) {
            Log.e(TAG, "view is null");
            return;
        }
        setOffset(offsetX, offsetY);
        setSmooth(isSmooth);
        moveTo(view, scale);
    }

    public void moveTo(View view, float scale) {
        int h = view.getHeight();
        int w = view.getWidth();
        // Log.d(TAG, "width:" + w);
        int[] location = new int[2];
        view.getLocationInWindow(location);
        int x = location[0];
        int y = location[1];

        x += ((view.getScaleX() - 1) / 2) * w;
        y += ((view.getScaleY() - 1) / 2) * h;

        moveTo(x, y, w, h, scale);
    }

    public void moveTo(float x, float y, float width, float height, float scale) {
        if (width > 0 && height > 0) {
            int[] location = new int[2];
            ((ViewGroup) getParent().getParent()).getLocationInWindow(location);
            int pX = location[0];
            int pY = location[1];
            float l = x - pX;
            float t = y - pY;
            moveToLocation(l - ((scale - 1) / 2) * width, t - ((scale - 1) / 2) * height, width * scale, height * scale,
                    scale);
        } else {
            reset();
            Log.e(TAG, "width or height is 0");
        }
    }

    public void setFlowPadding(int left, int top, int right, int bottom) {
        this.paddingLeft = left;
        this.paddingRight = right;
        this.paddingTop = top;
        this.paddingBottom = bottom;
    }

    public void setRectColor(int rectColor, int shadowColor) {
        if (rectColor != -1) {
            this.rectColor = rectColor;
            mPaint.setColor(rectColor);
        }
        if (shadowColor != -1) {
            this.shadowColor = shadowColor;
            mPaintShadow.setColor(shadowColor);
        }
    }

    public void setStrokeWidth(float strokeWidth) {
        if (strokeWidth > 0) {
            this.strokeWidth = strokeWidth;
            mPaint.setStrokeWidth(strokeWidth);
        }
    }
}

FlowSolidView

package com.ihu11.metro.flow;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.LinearGradient;
import android.graphics.Paint;
import android.graphics.Shader;
import android.support.annotation.Nullable;
import android.util.AttributeSet;

public class FlowSolidView extends FlowNormalView {

    private LinearGradient shader;

    private int color1;
    private int color2;

    public FlowSolidView(Context context) {
        super(context);
    }

    public FlowSolidView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
    }

    public FlowSolidView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    public FlowSolidView(Context context, @Nullable AttributeSet attrs, int defStyleAttr, int defStyleRes) {
        super(context, attrs, defStyleAttr, defStyleRes);
    }

    protected void init(Context context) {
        super.init(context);
        mPaint.setStyle(Paint.Style.FILL);
    }

    @Override
    public void setRectColor(int color1, int color2) {
        this.color1 = color1;
        this.color2 = color2;
    }

    @Override
    protected void drawRoundRectF(Canvas canvas, RoundRectF rectF) {
        if (color1 != color2) {
            shader = new LinearGradient(rectF.left,
                    rectF.top,
                    rectF.right,
                    rectF.top,
                    color1,
                    color2,
                    Shader.TileMode.CLAMP);
            mPaint.setShader(shader);
        } else {
            mPaint.setColor(color1);
        }

        canvas.drawRoundRect(rectF, rectF.radius, rectF.radius, mPaint);
    }
}