引导页 聚焦效果

引导页 聚焦效果

大家好,又见面了,我是全栈君,祝每个程序员都可以多学几门语言。

偶尔在知乎上看到 豌豆荚工作氛围和企业文化都比較好,有归属感,多写写博客,希望能被豌豆荚发现大笑

如题,引导页 聚焦效果,用于标注某个区域的功能,假设感觉有点意思,请给个赞。如图:

引导页 聚焦效果

设计思路:

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账号...

(0)


相关推荐

  • c++中数组下标越界输出什么_C语言数组的越界和溢出

    c++中数组下标越界输出什么_C语言数组的越界和溢出引言最近突然想到当数组array有2个元素,而访问其array[2]时会不会编译错误的问题,答案是编译的时候不报错,只有运行的时候才报错。感悟以下是我测试用的代码,程序可以正常编译,且编译正确,只是在运行的时候出现程序崩溃。chararray[2]={‘2′,’3’};std::cout<<array[2]<<std::endl;//编译正常,运行的时候出现问题基于上述现象,说明程序在编译的时候没有进行下标越界的检查,当一个程序生成可执行文件的时候

  • ajax php投票记录功能,PHP 实例 AJAX 投票 | 菜鸟教程[通俗易懂]

    PHP实例-AJAX投票AJAX投票在下面的实例中,我们将演示一个投票程序,通过它,投票结果在网页不进行刷新的情况下被显示。你喜欢PHP和AJAX吗?是:否:实例解释-HTML页面当用户选择上面的某个选项时,会执行名为”getVote()”的函数。该函数由”onclick”事件触发。poll.html文件代码如下:菜鸟教程(runoob.com)function…

  • springboot的介绍_springboot web

    springboot的介绍_springboot webSpringboot入门介绍一、Spring框架概述1.1什么是SpringSpring是一个开源框架,Spring是于2003年兴起的一个轻量级的Java开发框架,由RodJohnson在其著作《ExpertOne-On-OneJ2EEDevelopmentandDesign》。Spring是为了解决企业级应用开发的复杂性而创建的,使用Spring可以让简单的Ja…

  • Crontab定时任务配置

    Crontab定时任务配置一、开启crontab1.查看crontab是否启动sudolaunchctllist|grepcron2.检查需要的文件ls-al/etc/crontab3.如果crontab文件不存在则创建sudotouch/etc/crontab上述操作完成之后就可以正常使用crontab啦二、crontab服务开启、关闭1.开启su…

    2022年10月22日
  • 海康sdk协议接口_海康sadp搜索不到设备

    海康sdk协议接口_海康sadp搜索不到设备海康威视RTSP转RTMP协议,使ChromeSafari上可以直接播放。

  • 卷积与反卷积关系超详细说明及推导(反卷积又称转置卷积、分数步长卷积)

    卷积与反卷积关系超详细说明及推导(反卷积又称转置卷积、分数步长卷积)  以CNN为代表的卷积神经网络在图像的相关领域得到了较为长足的发展。在CNN中卷积实际分类两大类,一种是卷积,另一种是转置卷积(transposedconvolutional),或者称为分数步长卷积(fractionallystridedconvolutionallayers),亦或者是反卷积(deconvolution)。  虽然在一些文章中将反卷积与转置卷积认为是等价的…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号