跟随手指运动的小球这个案例使用了自动以的UI组件,这个UI组件将会在指定位置绘制一个小球,这个位置会随着我们的手指的拖动而改变。
原理就是使用程序来监听我们手指的动作,把手指动作的位置传入自定义UI组件,并通知该组件重绘即可。
效果图片如下:
自定义组件代码如下
public class DrawView extends View {
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
public void onDraw(Canvas canvas){
super.onDraw(canvas);
p.setColor(Color.RED); // 画笔颜色
canvas.drawCircle(currentX,currentY,15,p);
}
@Override
public boolean onTouchEvent(MotionEvent event){
currentX = event.getX();
currentY = event.getY();
// 通知当前组件重绘自己
invalidate();
return true;
}
}
DrawView 组件继承了View 基类,并重写了 onDraw 方法 – 该方法负责在该组件的指定位置绘制一个小球。除此之外,该组件还重写了 onTouchEvent 方法,该方法用于处理该组件的触碰事件,当用户手指触碰该组件时将会激发该方法。当手指在触摸屏上移动时,将会不断的触发触屏事件,事件监听器中负责触发事件的坐标将被传入 DrawView 组件,并通知重绘。
视图代码
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="pub.weber.bym.ball.MainActivity">
<pub.weber.bym.ball.DrawView
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</LinearLayout>
MainActivity 代码
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}
}