实现一个视图在固定圆圈内移动

    我们知道，在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/stevenhu_223/5591373