仿“大家来找茬”

原作者：Leo稻草人 来源：CSDN
原文链接：仿大家来找茬_易瑞的博客-CSDN博客

作为Android应用层程序员，比较讨厌的就是让实现游戏里的部分功能，一般程序员都会认为这个需要专门的游戏开发才能实现，或者需要专门的动效开发人员才能实现。下面就来看看仿照“大家来找茬”这个的简单实现方法吧。

先看看效果图：

这里要描述里面bean使用到的widthScale和heightScale这两个怎么计算的，取值范围在0-1之间。

WindowManager manager = getWindowManager();
        DisplayMetrics outMetrics = new DisplayMetrics();
        manager.getDefaultDisplay().getMetrics(outMetrics);
        int screenWidth = outMetrics.heightPixels;
        int screenHeight = outMetrics.widthPixels;
 
        if (screenWidth * 16 >= screenHeight * 9) {
            imgWidth = 500 * screenHeight / 667;
            imgHeight = 800 * screenHeight / 667;
        } else {
            imgWidth = 500 * screenWidth / 375;
            imgHeight = 800 * screenWidth / 375;
        }

我是取了屏幕的宽高来设置背景图的大小，这样适配的时候会好点。中间有个16：9的尺寸，是因为有些手机真的真的很烦，特别的长那种。再就来看看自定义view的布局吧，主要是两部分，一个是imageview,这个是用来放背景图，另外一个是FrameLayout,这个是用来存放点击出现的正确错误圆圈的，就是利用addview不断的添加，先看看这个布局吧：

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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">
 
    <ImageView
        android:id="@+id/imgBg"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:adjustViewBounds="true"
        android:scaleType="fitXY" />
 
    <FrameLayout
        android:id="@+id/layouPoints"
        android:layout_width="500dp"
        android:layout_height="500dp"
        android:layout_gravity="center" />
 
</FrameLayout>

剩下就是往这个framelayout里添加正确的圆点，这个利用到的是动态设置view的margin值，就是图片的宽高*之前的scaleWidth和scaleHeight就是这个view的marginLeft和marginTop。

 private void addPoints() {
        int width = currentWidth;
        int height = currentHeight;
        layouPoints.removeAllViews();
 
        for (int i = 0; i < points.size(); i++) {
 
            double width_scale = points.get(i).getWidthScale();
            double height_scale = points.get(i).getHeightScale();
 
 
            final RelativeLayout viewContent = (RelativeLayout) LayoutInflater.from(mContext).inflate(R.layout.layout_img_sure_point, this, false);
            final ImageView im_point = viewContent.findViewById(R.id.im_point);
            im_point.setTag(i);
 
            points.get(i).setIm_point(im_point);
            im_point.setVisibility(VISIBLE);
            im_point.setBackgroundResource(R.drawable.bg_transparent_border_ovil);
           /* if (points.get(i).isGone()) {
                im_point.setVisibility(GONE);
            } else {
                im_point.setVisibility(VISIBLE);
            }*/
 
            LayoutParams layoutParams = (LayoutParams) viewContent.getLayoutParams();
 
            layoutParams.leftMargin = (int) (width * width_scale);
            layoutParams.topMargin = (int) (height * height_scale);
 
            im_point.setOnClickListener(new OnClickListener() {
                @Override
                public void onClick(View v) {
                    if (!canClick) {
                        return;
                    }
 
 
                    if (canUseCound <= 0) {
                        if (null != pointClickListener) {
                            pointClickListener.finishClick();
                        }
                        return;
                    }
                    if ((int) im_point.getTag() == -1 || touchFlag) {
                        return;
                    }
                    canClick = false;
                    touchFlag = true;
                    im_point.setBackgroundResource(R.drawable.bg_green_border_ovil);
                    AnimatorSet animatorSet = new AnimatorSet();
                    ObjectAnimator scaleY = ObjectAnimator.ofFloat(viewContent, "scaleY", 1.0f, 1.5f, 2.0f, 1.5f, 1.0f);
                    ObjectAnimator scaleX = ObjectAnimator.ofFloat(viewContent, "scaleX", 1.0f, 1.5f, 2.0f, 1.5f, 1.0f);
                    animatorSet.playTogether(scaleY, scaleX);
                    animatorSet.setDuration(500);
                    animatorSet.setStartDelay(50);
                    animatorSet.addListener(new SimpleAnimatorListener() {
                        @Override
                        public void onAnimationStart(Animator animator) {
                        }
 
                        @Override
                        public void onAnimationEnd(Animator animator) {
                            touchFlag = false;
                            if (null != pointClickListener) {
                                pointClickListener.pointClick(points.get((int) im_point.getTag()), im_point);
                                im_point.setTag(-1);
                            }
 
                        }
 
                        @Override
                        public void onAnimationCancel(Animator animator) {
                        }
 
                    });
                    animatorSet.start();
                }
            });
 
            layouPoints.addView(viewContent, layoutParams);
        }
    }

这里我先给正确的点以透明的背景，当点击之后就给绿的的圆圈背景，这样就可以出现从消失到显示的效果了。

再看看红色点是怎么实现的吧，原理和正确的点一样的，只不过是动态点击添加和动态点击remove掉，主要监听framelayout的ontouch方法来获取点击位置，然后addview方法添加红色点，这个红色点同上面一样给一个margin值就能确定正确位置了。

 @Override
    public boolean onTouch(View v, MotionEvent event) {
        if (!canClick) {
            return false;
        }
 
 
        if (canUseCound <= 0) {
            if (null != pointClickListener) {
                pointClickListener.finishClick();
            }
            return false;
        }
        if (touchFlag) {
            return false;
        }
        canClick = false;
        touchFlag = true;
        final RelativeLayout view = (RelativeLayout) LayoutInflater.from(mContext).inflate(R.layout.layout_img_error_point, this, false);
        LayoutParams layoutParams = (LayoutParams) view.getLayoutParams();
        int pointSize = dp2px(mContext, 30);
        int marginLeft;
        int marginTop;
        if (event.getX() + pointSize > currentWidth) {
            marginLeft = currentWidth - pointSize * 2;
        } else if (event.getX() < pointSize) {
            marginLeft = 0;
        } else {
            marginLeft = (int) (event.getX() - pointSize);
        }
        if (marginLeft > (currentWidth - pointSize * 2)) {
            marginLeft = (currentWidth - pointSize * 2);
        }
 
        if (event.getY() + pointSize > currentHeight) {
            marginTop = (currentHeight - pointSize * 2);
        } else if (event.getY() < pointSize) {
            marginTop = 0;
        } else {
            marginTop = (int) (event.getY() - pointSize);
        }
        if (marginTop > (currentHeight - pointSize * 2)) {
            marginTop = (currentHeight - pointSize * 2);
        }
 
        layoutParams.leftMargin = marginLeft;
        layoutParams.topMargin = marginTop;
        ImageView im_point = view.findViewById(R.id.im_point);
        im_point.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                //产品说这个红色圈圈要留着
            }
        });
 
        layouPoints.addView(view, layoutParams);
 
        AnimatorSet animatorSet = new AnimatorSet();
        ObjectAnimator scaleY = ObjectAnimator.ofFloat(view, "scaleY", 1.0f, 1.5f, 2.0f, 1.5f, 1.0f);
        ObjectAnimator scaleX = ObjectAnimator.ofFloat(view, "scaleX", 1.0f, 1.5f, 2.0f, 1.5f, 1.0f);
        animatorSet.playTogether(scaleY, scaleX);
        animatorSet.setDuration(500);
        animatorSet.setStartDelay(50);
//        animatorSet.setInterpolator(new BounceInterpolator());
        animatorSet.addListener(new SimpleAnimatorListener() {
            @Override
            public void onAnimationStart(Animator animator) {
            }
 
            @Override
            public void onAnimationEnd(Animator animator) {
                touchFlag = false;
                view.postDelayed(new Runnable() {
                    @Override
                    public void run() {
                        if (null != pointClickListener) {
                            pointClickListener.errorClick(view);
                        }
                        layouPoints.removeView(view);
                    }
                }, 200);
 
            }
 
            @Override
            public void onAnimationCancel(Animator animator) {
            }
 
        });
        animatorSet.start();
        return false;
    }

大致这样就能实现想要的效果了，其实还有更高深的做法，就是在一张大图中点击不规则图形进行找错，这个就需要后面时间再完善了，涉及到热点点击处理了。

GitHub