自定义UI组件&让小球随着跟随手指在屏幕上滑动

View组件在布局中是一个矩形是空白区域，没有任何内容。而UI组件之所以有内容，是因为继承了View组件之后在其提供的空白区域上重新绘制外观。这就是Android的UI组件的实现原理。
自定义UI组件需要重写的方法：

例：自定义UI的例子，让小球跟随手指在屏幕上的滑动而滑动
BallView.java

public class BallView extends View {

    public float currentX=60;
    public float currentY=60;

    //定义并创建画笔
    Paint paint=new Paint();

    public BallView(Context context) {
        super(context);
    }

    public BallView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //设置画笔的颜色
        paint.setColor(Color.RED);
        //画一个圆
        canvas.drawCircle(currentX,currentY,20,paint);
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        //修改 currentX，currentY的值
        currentX=event.getX();
        currentY=event.getY();

        //通知当前组件重新绘制自己
        invalidate();
        //表明该处理方法已经处理了该事件
        return true;
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

MainActivity.java

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.layout);
    }
}
1
2
3
4
5
6
7
8

layout.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:id="@+id/root_view">
    <com.example.test_application.BallView
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
</LinearLayout>
1
2
3
4
5
6
7
8
9
10

运行结果如下:

鼠标放在屏幕的任意位置，小球会跟随鼠标的移动而移动，非常好玩