标签：pointSize point int void im 大家来找 view
作为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;
}
大致这样就能实现想要的效果了，其实还有更高深的做法，就是在一张大图中点击不规则图形进行找错，这个就需要后面时间再完善了，涉及到热点点击处理了，下篇blog来讲解下。
下面来看看demo下载地址：https://download.csdn.net/download/greatdaocaoren/12560490
有兴趣可以看看下面服务号和订阅号：
标签：pointSize,point,int,void,im,大家来找,view 来源： https://blog.csdn.net/greatdaocaoren/article/details/107016499
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。