Android开发跟随手指的小球Demo

当我们在做Android开发中，常常需要自己完全为项目定制组件，当系统提供的UI组件不足以满足项目需求是，我们可以通过继承View来派生自定义组件。

在我们打算派生自己的UI组件时，我们需要定义一个继承View的子类。然后重写View里面的方法，其中这些方法可以是一个，或者多个，目的都是为了满足我们的项目需求。

构造器：重写构造器是定制View的最基本方式，View中的常用方法。

 

 

下面我们使用自定义的UI组件，开发一个可以跟随手指的圆。这个UI组件将会在指定位置绘制一个小球，这个位置可以动态改变。当用户通过手指在屏幕上拖动时，程序监听到这个手机动作，并把手指动作的位置传入自定义UI组件，并通知该组件重绘即可。

下面是自定义组件的代码：

package com.skk.drawcircle.view;

import android.annotation.SuppressLint;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;

@SuppressLint("ClickableViewAccessibility")
public class DrawView extends View {
	//设置X,Y轴
	public float currentX = 40;
	public float currentY = 50;
	Paint p = new Paint();
	public DrawView(Context context) {
		super(context);
	}
	public DrawView(Context context, AttributeSet set) {
		super(context, set);
	}
	@Override
	protected void onDraw(Canvas canvas) {
		super.onDraw(canvas);
		p.setColor(Color.RED);
		canvas.drawCircle(currentX, currentY, 15, p);
	}
	@Override
	public boolean onTouchEvent(MotionEvent event) {
		//修改currentX,currentY两个属性
		currentX = event.getX();
		currentY = event.getY();
		// 通知当前组建重绘自己
		invalidate();
		//返回true表明该处理方法已经处理该事件
		return true;
	}
}

上面的DrawView组件继承了View基类，并重写了onDraw方法——该方法负责在该组件的指定位置绘制一个小球。除此之外，该组件还重写了onTouchEventw(OmtionEvent event)方法，该方法用于处理该组件的触碰事件，当用户手指触碰该组件时将会激发该方法，当手指在触摸屏上移动时，将会不断地触发触摸屏事件，事件监听器中负责触发事件的坐标将被传入DrawView组件，并通知该组件重绘——这样即可保证DrawView上小球跟随手指移动而移动。

        有了这个自定义组件之后，接下来可以通过Java代码把该组件天机到指定容器中，这样就可以看到该组件的运行效果，下面是这个应用的Activity类。

package com.skk.drawcircle;

import com.skk.drawcircle.view.DrawView;

import android.app.Activity;
import android.os.Bundle;
import android.widget.LinearLayout;

public class MainActivity extends Activity {

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		LinearLayout root = (LinearLayout) findViewById(R.id.root);
		final DrawView draw = new DrawView(this);
		draw.setMinimumWidth(300);
		draw.setMinimumHeight(500);
		root.addView(draw);
	}
}

上面的程序中先创建了自定义组件（DrawView）的实例，然后程序将该组件添加到LinearLayout容器中。下面是运行效果的小视频

        该实例依然在Java代码中创建了DrawView组件的实例，并将它添加到LinearLayout容器中，实际上完全可以在XML布局文件中管理该组件，如果我们使用如下布局文件。

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/root"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    tools:context="${relativePackage}.${activityClass}" >

    <com.skk.drawcircle.view.DrawView
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</LinearLayout>

上面的布局文件已经添加了自定义组件，因此Java代码中只要加载该界面布局文件极客，无需通过Java代码来添加该自定义组件，因此Activity、的代码可以简化为如下形式

package com.skk.drawcircle;

import com.skk.drawcircle.view.DrawView;

import android.app.Activity;
import android.os.Bundle;
import android.widget.LinearLayout;

public class MainActivity extends Activity {

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
}
}