自定义View之圆形拖动DEMO


VIEW主文件
/**
  * 
  */
 package com.android.circle;
 
 import java.util.ArrayList;
 import java.util.List;
 
 import android.content.ClipData;
 import android.content.ClipDescription;
 import android.content.Context;
 import android.content.Intent;
 import android.content.res.TypedArray;
 import android.graphics.Canvas;
 import android.graphics.Color;
 import android.graphics.Paint;
 import android.graphics.Paint.Style;
 import android.graphics.drawable.Drawable;
 import android.util.AttributeSet;
 import android.util.FloatMath;
 import android.util.Log;
 import android.view.DragEvent;
 import android.view.LayoutInflater;
 import android.view.MotionEvent;
 import android.view.View;
 import android.view.ViewGroup;
 import android.widget.ImageView;
 import android.widget.Toast;
 
 public class CircleView extends ViewGroup {
 	Paint mPaint;
 	float mCenter_X, mCenter_Y;
 	int mInnerRadius, mOuterRadius, mOuterSamllRadius, mCircleNumber;
 	View mChild;
 	double mDegree;
 	LayoutInflater mLayoutInflater;
 	ArrayList<CircleValue> mCircleValue = new ArrayList<CircleValue>();
 	private onPenUpCallback mOnPenUpCallback;
 	
 	/**
 	 * @param context
 	 * @param attrs
 	 */
 	public CircleView(Context context, AttributeSet attrs) {
 		super(context, attrs);
 
 		mPaint = new Paint();
 
 		TypedArray array = context.obtainStyledAttributes(attrs,
 				R.styleable.Circle);
 		mInnerRadius = array.getDimensionPixelSize(
 				R.styleable.Circle_inner_radius, 50);
 		mOuterRadius = array.getDimensionPixelSize(
 				R.styleable.Circle_outer_radius, 100);
 		mOuterSamllRadius = array.getDimensionPixelSize(
 				R.styleable.Circle_outer_small_radius, 30);
 		mCircleNumber = array.getInteger(R.styleable.Circle_number1, 4);
 
 		mLayoutInflater = LayoutInflater.from(getContext());
 
 		for (int i = 0; i < mCircleNumber; i++) {
 			mChild = mLayoutInflater.inflate(R.layout.circle_item, null);
 			mChild.setTag("" + i);
 			mChild.setOnTouchListener(new View.OnTouchListener() {
 				float down_x=0 , down_y=0 , curr_x=0 , curr_y=0;
 				@Override
 				public boolean onTouch(View v, MotionEvent event) {
 					String _id = v.getTag().toString();
 					int id = Integer.parseInt(_id);
 					
 					switch (event.getAction()) {
 					case MotionEvent.ACTION_DOWN:
 						down_x = event.getRawX();
 						down_y = event.getRawY();
 						break;
 					case MotionEvent.ACTION_MOVE:
 						curr_x = event.getRawX();
 						curr_y = event.getRawY();
 						moveView(v,id,down_x ,  down_y, curr_x , curr_y);
 						
 						break;
 					case MotionEvent.ACTION_UP:
 					case MotionEvent.ACTION_CANCEL:
 						
 						boolean ret = checkUp(v);
 						if(ret == true)
 						{
 							mOnPenUpCallback.CallBack();
 						}
 						else
 						{
 							CircleValue value =  getOriginalValue(id);
 							v.layout(value.left ,value.top , value.right , value.buttom);
 						}
 						break;
 						
 					default:
 						break;
 					}
 
 					return true;
 				}
 			});
 
 			addView(mChild, i);
 		}
 
 		array.recycle();
 
 	}
 	public void setPenUpCallBack(onPenUpCallback c)
 	{
 		mOnPenUpCallback = c;
 	}
 	
 	private boolean checkUp(View v)
 	{
 		float x = v.getX()+v.getWidth()/2;
 		float y = v.getY()+v.getHeight()/2;
 		
 		float gx = Math.abs(x-mCenter_X);
 		float gy = Math.abs(y-mCenter_Y);
 		
 		double d = (double)(gx*gx + gy*gy);
 		double radius = Math.sqrt(d);
 
 		if(radius < mInnerRadius)
 		{
 			return true;
 		}
 		else
 		{
 			return false;
 		}
 	}
 	
 	private void moveView(View v, int id ,float down_x , float down_y, float curr_x ,float curr_y )
 	{
 		CircleValue value =  getOriginalValue(id);
 		int gap_x , gap_y ;
 		
 		gap_x = (int)(curr_x - down_x);
 		gap_y = (int)(curr_y - down_y);
 		v.layout(value.left+ gap_x,value.top+gap_y , value.right + gap_x , value.buttom + gap_y);
 	}
 	
 	public void onDraw(Canvas canvas) {
 		super.onDraw(canvas);
 
 		mPaint.setStyle(Style.FILL);
 		mPaint.setColor(Color.GRAY);
 		canvas.drawCircle(mCenter_X, mCenter_Y, mOuterRadius, mPaint);
 
 		mPaint.setStyle(Style.FILL);
 		mPaint.setColor(Color.GREEN);
 		canvas.drawCircle(mCenter_X, mCenter_Y, mInnerRadius, mPaint);
 
 	}
 
 	private float calcCircleX(int index) {
 		float x = 0;
 		float degree = (float) mDegree * index;
 
 		x = FloatMath.sin(degree) * mOuterRadius;
 		return mCenter_X + x;
 	}
 
 	private float calcCircleY(int index) {
 		float y = 0;
 		float degree = (float) mDegree * index;
 
 		y = FloatMath.cos(degree) * mOuterRadius;
 		return mCenter_Y - y;
 	}
 
 	protected void onLayout(boolean changed, int left, int top, int right,
 			int bottom) {
 		mDegree = 2 * Math.PI / getChildCount();
 		mCenter_X = getMeasuredWidth() >> 1;
 		mCenter_Y = getMeasuredHeight() >> 1;
 
 		for (int i = 0; i < getChildCount(); i++) {
 			View child = getChildAt(i);
 
 			int w = child.getMeasuredWidth();
 			int h = child.getMeasuredHeight();
 
 			child.measure(w, h);
 
 			float cx = calcCircleX(i);
 			float cy = calcCircleY(i);
 			int sx = (int) cx - (w >> 1);
 			int sy = (int) cy - (h >> 1);
 
 			child.layout(sx, sy, sx + w, sy + h);
 			if(w!=0 && h!=0)
 			{
 				CircleValue mValue = new CircleValue(sx, sy, sx + w, sy + h);
 				mCircleValue.add(mValue);
 			}
 		}
 	}
 	
 	protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
 		super.onMeasure(widthMeasureSpec, heightMeasureSpec);
 		setMeasuredDimension(widthMeasureSpec, heightMeasureSpec);
 	}
 
 	private CircleValue getOriginalValue(int id)
 	{
 		return mCircleValue.get(id);
 	}
 	
 	public interface onPenUpCallback{
 		public void CallBack();
 	}
 	
 	private class CircleValue {
 		public int left, top, right, buttom;
 
 		public CircleValue() {
 			left = 0;
 			top = 0;
 			right = 0;
 			buttom = 0;
 		}
 		
 		public CircleValue(int l, int t, int r, int b) {
 			left = l;
 			top = t;
 			right = r;
 			buttom = b;
 		}
 		
 		public void setValue(int l, int t, int r, int b) {
 			left = l;
 			top = t;
 			right = r;
 			buttom = b;
 		}
 	}
 }
 
attrs.xml 
<?xml version="1.0" encoding="utf-8"?>
 <resources>
 
     <declare-styleable name="Circle">
         <attr name="inner_radius" format="dimension" />
         <attr name="outer_radius" format="dimension" />
         <attr name="outer_small_radius" format="dimension" />
         <attr name="number1" format="integer" />
     </declare-styleable>
 
 </resources>


此view只是一个demo.可以用于解锁界面等.下面是效果图.周边圆环拖动到中间区域内则响应触发事件.不在区域之内则回到原来的地方


  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
### 回答1: Android自定义View圆形刻度在实现上相对简单,主要步骤如下: 1. 创建一个继承自View自定义View类,命名为CircleScaleView。 2. 在该自定义View的构造方法中完成必要的初始化工作,例如设置画笔、设置View的宽高、设置绘制模式等。 3. 重写onMeasure()方法,设置View的尺寸大小。可以根据自定义的需求来决定View的宽高。 4. 重写onDraw()方法,完成绘制整个圆形刻度的逻辑。 5. 在onDraw()方法中,首先通过getMeasuredWidth()和getMeasuredHeight()方法获取到View的宽高,然后计算圆心的坐标。 6. 接着,使用Canvas对象的drawArc()方法来绘制圆弧,根据需求设置圆弧的起始角度和扫描角度。 7. 再然后,通过循环绘制每个刻度线,可以使用Canvas对象的drawLine()方法来绘制。 8. 最后,根据需要绘制刻度值或其他其他附加元素,例如圆心的标记。 9. 至此,整个圆形刻度的绘制逻辑就完成了。 10. 在使用该自定义View的时候,可以通过添加该View到布局文件中或者在代码中动态添加,并按需设置相应的属性。 需要注意的是,自定义圆形刻度的具体样式和行为取决于项目需求,上述步骤仅为基础实现框架,具体细节需要根据实际情况进行相应的调整。 ### 回答2: 在Android中实现一个圆形刻度的自定义View有几个步骤。 首先,我们需要创建一个自定义View类,继承自View或者它的子类(如ImageView)。 接下来,在自定义View的构造方法中,初始化一些必要的属性,比如画笔的颜色、宽度等。我们可以使用Paint类来设置这些属性。 然后,我们需要在自定义View的onMeasure方法中设置View的宽度和高度,确保View在屏幕上正常显示。一种常见的实现方式是将宽度和高度设置为相同的值,使得View呈现出圆形的形状。 接着,在自定义View的onDraw方法中,我们可以利用画笔来绘制圆形刻度。可以使用canvas.drawCircle方法来绘制一个圆形,使用canvas.drawLine方法绘制刻度线。我们可以根据需要,定义不同的刻度颜色和宽度。 最后,我们可以在自定义View的其他方法中,添加一些额外的逻辑。比如,在onTouchEvent方法中处理触摸事件,以实现拖动刻度的功能;在onSizeChanged方法中根据View的尺寸调整刻度的大小等等。 当我们完成了自定义View的代码编写后,我们可以在布局文件中使用这个自定义View。通过设置布局文件中的属性,可以进一步自定义View的外观和行为。 总之,实现一个圆形刻度的自定义View,我们需要定义一个自定义View类,并在其中使用画笔来绘制圆形和刻度。通过处理一些事件和属性,我们可以实现更多的功能和样式。以上就是简单的步骤,可以根据需要进行更加详细的实现。 ### 回答3: Android自定义View圆形刻度可以通过以下步骤实现。 首先,我们需要创建一个自定义View,继承自View类,并重写onDraw方法。在该方法中,我们可以自定义绘制的内容。 其次,我们需要定义一个圆形的刻度尺背景,可以使用Canvas类提供的drawCircle方法来绘制实心圆或空心圆。 接着,我们可以通过Canvas类的drawLine方法来绘制刻度线。根据刻度的数量,可以计算出每个刻度之间的角度,然后循环绘制出所有的刻度线。 然后,我们可以通过Canvas类的drawText方法来绘制刻度的值。根据刻度线的角度和半径,可以计算出刻度的坐标,然后将刻度的值绘制在指定的位置上。 最后,我们可以通过在自定义View的构造方法中获取相关的参数,如刻度的最大值、最小值、当前值等,然后根据这些参数来计算刻度的位置和值。 在使用自定义View时,可以通过设置相关的属性来改变刻度的样式和位置。例如,可以设置刻度线的颜色、粗细、长度等,也可以设置刻度值的颜色、大小等。 通过以上步骤,我们就可以实现一个圆形刻度尺的自定义View。在使用时,可以根据需要自行调整绘制的样式和逻辑。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值