Android实现一个视图在固定圆圈内移动
来源:互联网 发布:吉尔伽美什史诗 知乎 编辑:程序博客网 时间:2024/05/09 02:33
我们知道,在android4.0系统原生的滑动锁屏中,用户可以拖动中心的图标在固定的圆圈内移动。本文将以一个小Demo来实现类似这种绕着固定圆圈内拖动图标。
这个Demo有两个类:
1. MainActivity:继承Activity,主要用来承载MainView这个自定义ViewGroup类;
2. MainView:自定义ViewGroup,继承ViewGroup,是本Demo核心类,功能的实现都在这个自定义View类里了;
MainActivity的代码如下:
- package com.example.hu.tvt;
- import android.app.Activity;
- import android.os.Bundle;
- public class MainActivity extends Activity
- {
- /** Called when the activity is first created. */
- @Override
- public void onCreate(Bundle savedInstanceState)
- {
- super.onCreate(savedInstanceState);
- //加载MainView
- setContentView(new MainView(this));
- }
- }
MainView的代码如下:
- package com.example.hu.tvt;
- import android.content.Context;
- import android.graphics.Rect;
- import android.util.Log;
- import android.view.MotionEvent;
- import android.view.View;
- import android.view.ViewGroup;
- import android.view.animation.AlphaAnimation;
- import android.view.animation.Animation;
- import android.widget.ImageView;
- import android.widget.ImageView.ScaleType;
- public class MainView extends ViewGroup
- {
- private static final boolean DBG = true;
- private static final String TAG = "MainView";
- private int mWidth, mHight;
- //手机屏幕高度的一半
- private int mScreenHalfWidth;
- private int mAlphaViewWidth, mAlphaViewHeight;
- private int mCenterViewWidth, mCenterViewHeight;
- private int mCenterViewTop, mCenterViewBottom;
- private int mAlphaViewTop, mAlphaViewBottom;
- private boolean mTracking = false;
- private Rect mCenterViewRect;
- private ImageView mCenterView, mAlphaView;
- private AlphaAnimation mAlphaAnimation;
- public MainView(Context context)
- {
- super(context);
- initViews(context);
- onAnimationStart();
- }
- //获取图标,将获取的图标添加入MainView,设置图标的可见性
- private void initViews(Context context)
- {
- mAlphaView = new ImageView(context);
- mAlphaView.setImageResource(R.drawable.alpha);
- setViewsLayout(mAlphaView);
- mAlphaView.setVisibility(View.INVISIBLE);
- mCenterView = new ImageView(context);
- mCenterView.setImageResource(R.drawable.centure);
- setViewsLayout(mCenterView);
- mCenterView.setVisibility(View.VISIBLE);
- }
- //设置获取图标的参数,并添加到MainView
- private void setViewsLayout(ImageView image) {
- image.setScaleType(ScaleType.CENTER);
- image.setLayoutParams(new LayoutParams(LayoutParams.WRAP_CONTENT,
- LayoutParams.WRAP_CONTENT));
- addView(image);
- }
- @Override
- protected void onLayout(boolean changed, int l, int t, int r, int b)
- {
- // TODO Auto-generated method stub
- if (changed)
- {
- mWidth = r;
- mHight = b;
- //mHalfWidth >> 1为向右位移1位,相当于mHalfWidth / 2。采用位移的原因是计算效率比较高。
- mScreenHalfWidth = mWidth >> 1;
- getViewMeasure();
- //中心图标顶部到屏幕顶部的距离
- mCenterViewTop = mHight / 2 - (mCenterViewHeight >> 1);
- //中心图标底部部到屏幕顶部的距离
- mCenterViewBottom = mHight / 2 + (mCenterViewHeight >> 1);
- //显示动画的图标顶部到屏幕顶部的距离
- mAlphaViewTop = mHight / 2 - (mAlphaViewHeight >> 1);
- //显示动画的图标底部到屏幕顶部的距离
- mAlphaViewBottom = mHight / 2 + (mAlphaViewHeight >> 1);
- setChildViewLayout();
- //创建中心图标所在矩形区域
- mCenterViewRect = new Rect(mWidth / 2 - mAlphaViewWidth / 2, mAlphaViewTop,
- mWidth / 2 + mAlphaViewWidth / 2, mAlphaViewBottom);
- }
- }
- //获取中心图片和显示动画图片的宽、高
- private void getViewMeasure()
- {
- mAlphaView.measure(View.MeasureSpec.makeMeasureSpec(0,
- View.MeasureSpec.UNSPECIFIED), View.MeasureSpec
- .makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED));
- //显示动画图标的宽
- mAlphaViewWidth = mAlphaView.getMeasuredWidth();
- //显示动画图标的高
- mAlphaViewHeight = mAlphaView.getMeasuredHeight();
- mCenterView.measure(View.MeasureSpec.makeMeasureSpec(0,
- View.MeasureSpec.UNSPECIFIED), View.MeasureSpec
- .makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED));
- //中心图标的宽
- mCenterViewWidth = mCenterView.getMeasuredWidth();
- //中心图标的高
- mCenterViewHeight = mCenterView.getMeasuredHeight();
- }
- //设置各图标在MainView中的布局
- private void setChildViewLayout()
- {
- mAlphaView.layout(mScreenHalfWidth - mAlphaViewWidth / 2, mAlphaViewTop,
- mScreenHalfWidth + mAlphaViewWidth / 2, mAlphaViewBottom);
- mCenterView.layout(mScreenHalfWidth - mCenterViewWidth / 2, mCenterViewTop,
- mScreenHalfWidth + mCenterViewWidth / 2, mCenterViewBottom);
- }
- //停止显示动画
- @Override
- protected void onAnimationEnd()
- {
- // TODO Auto-generated method stub
- super.onAnimationEnd();
- if (mAlphaAnimation != null)
- {
- mAlphaAnimation = null;
- }
- mAlphaView.setAnimation(null);
- }
- //显示中心图标动画
- @Override
- protected void onAnimationStart()
- {
- // TODO Auto-generated method stub
- super.onAnimationStart();
- mAlphaView.setVisibility(View.VISIBLE);
- if (mAlphaAnimation == null) {
- mAlphaAnimation = new AlphaAnimation(0.0f, 1.0f);
- mAlphaAnimation.setDuration(1000);
- }
- mAlphaAnimation.setRepeatCount(Animation.INFINITE);
- mAlphaView.startAnimation(mAlphaAnimation);
- }
- //用户手机点下屏幕时首先会先调用执行该函数,然后再执行onTouchEvent
- @Override
- public boolean onInterceptTouchEvent(MotionEvent ev)
- {
- if(DBG) Log.d(TAG, "onInterceptTouchEvent()");
- final int action = ev.getAction();
- final float x = ev.getX();
- final float y = ev.getY();
- switch (action) {
- case MotionEvent.ACTION_DOWN:
- //手指点在中心图标范围区域内
- if (mCenterViewRect.contains((int) x, (int) y))
- {
- mTracking = true;
- onAnimationEnd();
- mAlphaView.setVisibility(View.INVISIBLE);
- return true;
- }
- break;
- default:
- break;
- }
- return super.onInterceptTouchEvent(ev);
- }
- @Override
- public boolean onTouchEvent(MotionEvent event)
- {
- /*mTracking为true时,说明中心图标被点击移动
- * 即只有在中心图标被点击移动的情况下,onTouchEvent
- * 事件才会触发。
- */
- if (mTracking)
- {
- final int action = event.getAction();
- final float nx = event.getX();
- final float ny = event.getY();
- switch (action) {
- case MotionEvent.ACTION_DOWN:
- break;
- case MotionEvent.ACTION_MOVE:
- //中心图标移动
- handleMoveView(nx, ny);
- break;
- case MotionEvent.ACTION_UP:
- mTracking = false;
- resetMoveView();
- break;
- case MotionEvent.ACTION_CANCEL:
- mTracking = false;
- resetMoveView();
- break;
- }
- }
- if(DBG) Log.d(TAG, "onTouchEvent()");
- return mTracking || super.onTouchEvent(event);
- }
- //实现图标在固定圆圈内移动的方法
- private void handleMoveView(float x, float y)
- {
- int mHalfCenterViewWidth = mCenterViewWidth >> 1;
- //Radius为中心图标移动的限定的圆范围区域半径(可根据自己的需要设置大小)
- int Radius = mCenterViewWidth + mHalfCenterViewWidth;
- //int Radius = 100;
- /*若用户手指移动的点与中心点的距离长度大于Radius,则中心图标坐标位置限定在移动区域范围圆弧上。
- * 一般是用户拖动中心图标,手指移动到限定圆范围区域外。
- */
- if (Math.sqrt(dist2(x - mScreenHalfWidth, y - (mCenterView.getTop() + mCenterViewWidth / 2)
- )) > Radius)
- {
- //原理为x1 / x = r1 / r ,此时的x,y为以Radius为半径的圆圈圆弧上的坐标
- x = (float) ((Radius / (Math.sqrt(dist2(x - mScreenHalfWidth, y - (mCenterView.getTop() + mHalfCenterViewWidth)
- )))) * (x - mScreenHalfWidth) + mScreenHalfWidth);
- y = (float) ((Radius / (Math.sqrt(dist2(x - mScreenHalfWidth, y - (mCenterView.getTop() + mHalfCenterViewWidth)
- )))) * (y - (mCenterView.getTop() + mHalfCenterViewWidth)) + mCenterView.getTop() + mHalfCenterViewWidth);
- }
- /*图形的坐标是以左上角为基准的,
- * 所以,为了使手指所在的坐标和图标的中心位置一致,
- * 中心坐标要减去宽度和高度的一半。
- */
- mCenterView.setX((int)x - mCenterView.getWidth()/2);
- mCenterView.setY((int)y - mCenterView.getHeight()/2);
- invalidate();
- }
- //平方和计算
- private float dist2(float dx, float dy)
- {
- return dx * dx + dy * dy;
- }
- //重置中心图标,回到原位置
- private void resetMoveView()
- {
- mCenterView.setX(mWidth / 2 - mCenterViewWidth /2);
- mCenterView.setY((mCenterView.getTop() + mCenterViewHeight / 2) - mCenterViewHeight / 2);
- onAnimationStart();
- invalidate();
- }
- }
代码实现总结:
1. 代码中的handleMoveView函数是计算图标在固定圆圈中移动的核心方法。
2. 当我们移动中心图标时,会调用onTouchEvent方法,然后会获得用户手指所在屏幕点的移动坐标。
3. 将获得的移动坐标作为参数传到handleMoveView,在handleMoveView方法里再对坐标的选定判断处理。
4. 当用户移动图标超出限定的圆圈(移动坐标相对图标原始位置的偏移量形成的直角三角形的斜边大于限定圆圈半径时),那么这时候就将图标移动定格在限定圆圈的圆弧上。
5. 至于圆弧点的坐标值,可根据获得的用户手指所在屏幕的坐标值(即通过onTouchEvent获得的坐标值)通过比例计算得到相应的圆弧点的坐标值(注:x,y的偏移量和半径连成一个直角三角形,所以可以通过比例等值计算得到圆弧的坐标值)。
6. 得到圆弧点上的坐标值后,就可以通过设置中心图标的坐标值移动图标到相应的坐标点了。
ok,关于实现一个视图在固定圆圈内移动就到此结束了,有时间会在此基础上开发一个基于第三方应用的锁屏;
相关Demo代码下载链接:http://download.csdn.net/detail/u014768339/8726657
- Android实现一个视图在固定圆圈内移动
- 实现一个视图在固定圆圈内移动
- 实现一个视图在固定圆圈内移动
- 在安卓中,如何实现将一个图片固定在另一个图片上,在屏幕移动时不随屏幕移动呢?
- 在一个方框内上下左右移动图片
- 判断某点是否在圆圈内
- Canvas画板实现一个简单的球在盒子内随机移动效果
- Android实现3个圆圈的动画
- android自定义TextView实现绘制圆圈
- Android模仿圆形圆圈倒计时实现
- 自定义视图 自定义代理在tableView视图内形成一个加载信息的效果
- odoo9在treeview视图固定表头
- Android 一个视图界面内某一View设置动画,其他视图view.setvisibility无效得解决方法
- 在Android上实现模糊视图
- 在Android中动画移动一个View的位置,采用Scroller类实现
- 在对话框内嵌入视图
- 元素只能在固定窗口内拖动
- 在移动Web单页应用中实现固定页脚
- 流行的通讯库/消息中间件
- JuQueen
- javaLIST集合去重
- 即时通数据库结构
- 远程桌面能解决物联网和智能硬件的什么问题
- Android实现一个视图在固定圆圈内移动
- 高性能服务器本质论
- 陈怡暖:2015.5.22早间最强现货黄金白银操作建议
- hibernate学习心得一:一对一单向关联映射
- Javascript事件总结
- Windows剪贴板增强小工具---ditto
- 使用ExpandableListView实现时间轴效果
- hdu3507 Print Article 单调队列斜率优化DP
- 每个程序员都应该知道的延迟值