大家好,又见面了,我是全栈君,祝每个程序员都可以多学几门语言。
偶尔在知乎上看到 豌豆荚工作氛围和企业文化都比較好,有归属感,多写写博客,希望能被豌豆荚发现。
如题,引导页 聚焦效果,用于标注某个区域的功能,假设感觉有点意思,请给个赞。如图:
设计思路:
1、得到想聚焦View的位置location;
2、遮罩层(一个圆圈,其它地方半透),用SurfaceView实现,包括两张图片,一张圆形,一张半透的方形。
先在Canvas上画出镂空圆孔,然后在该圆形图片的上下左右4个矩形区域画上那张半透的方形图片,就组成了遮罩层;
3、依照View的location,能够计算得到圆形图片的位置;
4、监听遮罩层的OnTouch事件,每次touch,将依据下一个locaton,重绘SurfaceView;
5、当没有下一个location时,再次点击,遮罩层消失。
源代码分析:
包括3部分,GuideIndexActivity.java、GuideView.java、MainActivity.java。
注:可改动去掉GuideIndexActivity.java,将GuideView在Activity中显示。
MainActivity.java:
public class MainActivity extends Activity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); } public void showGuide(View v) { Button hereBtn = (Button) findViewById(R.id.btn_here); TextView godlikeTv = (TextView) findViewById(R.id.tv_godlike); ImageView launcherIv = (ImageView) findViewById(R.id.iv_launcher); Intent intent = new Intent(MainActivity.this, GuideIndexActivity.class); intent.putExtra("ArrayPoints", guidePoints(hereBtn, godlikeTv, launcherIv)); startActivity(intent); } private String guidePoints(View... views) { int size = views.length; JSONArray array = new JSONArray(); for (int i = 0; i < size; i++) { array.put(viewPoint(views[i])); } return array.toString(); } private JSONObject viewPoint(View view) { JSONObject json = new JSONObject(); int[] location = new int[2]; view.getLocationOnScreen(location); try { json.put("x", location[0] + view.getWidth() / 2); json.put("y", location[1] + view.getHeight() / 2); } catch (JSONException e) { // TODO Auto-generated catch block e.printStackTrace(); } return json; } }
JSONObject viewPoint(View view) 获取到某View的位置。
String guidePoints(View… views) 将全部的View的位置信息转为JSONArray字符串。
GuideView.java:
public class GuideView extends SurfaceView implements SurfaceHolder.Callback { private SurfaceHolder holder; private Bitmap focus = BitmapFactory.decodeResource(getResources(), R.drawable.bg_guide_focus); private Bitmap bg = BitmapFactory.decodeResource(getResources(), R.drawable.bg_guide); private float focusW, focusH; private Context mContext; private int ScreenWidth; private int ScreenHeight; private JSONArray arrayPoints; private int step = 0; private boolean flag = false; public GuideView(Context context) { super(context); this.mContext = context; this.focusH = focus.getHeight(); this.focusW = focus.getWidth(); this.holder = this.getHolder(); Display mDisplay = ((Activity) context).getWindowManager() .getDefaultDisplay(); ScreenWidth = mDisplay.getWidth(); ScreenHeight = mDisplay.getHeight(); holder.addCallback(this); getHolder().setFormat(PixelFormat.TRANSLUCENT); } public GuideView(Context context, AttributeSet attributeSet) { super(context, attributeSet); this.mContext = context; this.focusH = focus.getHeight(); this.focusW = focus.getWidth(); this.holder = this.getHolder(); Display mDisplay = ((Activity) context).getWindowManager() .getDefaultDisplay(); ScreenWidth = mDisplay.getWidth(); ScreenHeight = mDisplay.getHeight(); holder.addCallback(this); getHolder().setFormat(PixelFormat.TRANSLUCENT); } public void setArrayPoint(JSONArray arrayPoints) { this.setVisibility(View.VISIBLE); this.arrayPoints = arrayPoints; flag = true; invalidate(); } @Override public void surfaceChanged(SurfaceHolder arg0, int arg1, int arg2, int arg3) { // TODO Auto-generated method stub } @Override public void surfaceCreated(SurfaceHolder arg0) { // TODO Auto-generated method stub if (flag) { doDraw(step); } } @Override public void surfaceDestroyed(SurfaceHolder arg0) { // TODO Auto-generated method stub } @Override public boolean onTouchEvent(MotionEvent event) { // TODO Auto-generated method stub if (flag) { if (step <= arrayPoints.length()) { doDraw(step); } else { ((Activity) mContext).finish(); focus.recycle(); bg.recycle(); } } return super.onTouchEvent(event); } private void doDraw(int step) { // TODO Auto-generated method stub Canvas canvas = getHolder().lockCanvas(); canvas.drawColor(Color.TRANSPARENT, PorterDuff.Mode.CLEAR); Rect src = new Rect(0, 0, bg.getWidth(), bg.getHeight()); if(step < arrayPoints.length()){ Point point = new Point(); try { JSONObject json = arrayPoints.getJSONObject(step); point.x = json.getInt("x"); point.y = json.getInt("y"); } catch (JSONException e) { // TODO Auto-generated catch block e.printStackTrace(); } int left = (int) (point.x - focusW / 2); int top = (int) (point.y - focusH / 2); int right = (int) (left + focusW); int bottom = (int) (top + focusH); canvas.drawBitmap(focus, left, top, null); Rect dstTop = new Rect(0, 0, ScreenWidth, top); Rect dstBottom = new Rect(0, bottom, ScreenWidth, ScreenHeight); Rect dstLeft = new Rect(0, top, left, bottom); Rect dstRight = new Rect(right, top, ScreenWidth, bottom); canvas.drawBitmap(bg, src, dstTop, null); canvas.drawBitmap(bg, src, dstBottom, null); canvas.drawBitmap(bg, src, dstLeft, null); canvas.drawBitmap(bg, src, dstRight, null); switch (step) { case 0: // first to do something break; case 1: // second to do something break; case 2: // third to do something break; default: break; } }else if(step == 3){ } this.step++; getHolder().unlockCanvasAndPost(canvas); } class Point { int x; int y; }
GuideIndexActivity.java:
public class GuideIndexActivity extends Activity{ private GuideView guideView; @Override protected void onCreate(Bundle savedInstanceState) { // TODO Auto-generated method stub super.onCreate(savedInstanceState); guideView = new GuideView(this); setContentView(guideView); } @Override protected void onResume() { // TODO Auto-generated method stub JSONArray arrayPoints; try { arrayPoints = new JSONArray(getIntent().getStringExtra("ArrayPoints")); guideView.setArrayPoint(arrayPoints); } catch (JSONException e) { // TODO Auto-generated catch block e.printStackTrace(); } super.onResume(); } }
源代码下载地址:
http://download.csdn.net/detail/toyuexinshangwan/7603509
转载请标明:
http://blog.csdn.net/toyuexinshangwan/article/details/37508619
发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/118348.html原文链接:https://javaforall.cn
【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛
【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...