利用自定义View制作跟随手指的小球
参考资料:自定义View,有这一篇就够了,Android 深入理解Android中的自定义属性,《疯狂android讲义第三版》。
引言
接触安卓没几天,打算写些文章来总结归纳自己所学到的,记录自己的学习过程,也用以勉励自己坚持下去,我主要的学习依据是李刚老师的书《疯狂android讲义第三版》以及网上前辈所写的极具参考价值的文章。
1. 小案例的制作过程
首先初次接触到自定义View,我的想法就是先跟书做一遍然后再详细的分析各个部分细节的作用。
- 创建继承View的DrawView类
- 定义小球的大小
- 书写两个构造函数
- 重写onDraw()方法
- 为该组件的触碰事件重写事件处理方法
- 将这个自定义控件应用到主界面中
总体来说就是这六个步骤,主要的步骤就是前五个,主要的核心代码如下:
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
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();
//返回ture表明该处理方法已经处理该事件
return true;
}
}
以上便是DrawView的内容,下面便是将这个自定义控件应用到主界面的方法。
其实有两个方法来实现此目的。
- 直接将控件应用到xml文件中,这个方法最简单。具体所要加入主界面xml的代码块如下:
<org.crazyit.customview.DrawView
android:layout_width="match_parent"
android:layout_height="match_parent" />
- 或者你可以在MainActivity类中实现控件的整合,具体代码如下:
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
LinearLayout root = (LinearLayout) findViewById(R.id.action_bar_root);
//实例化DrawView自定义控件类
final DrawView drawView = new DrawView(this);
//设置控件的大小
drawView.setMinimumHeight(500);
drawView.setMinimumWidth(300);
//将控件加入LinerLayout布局中
root.addView(drawView);
}
}
很简单,这样你就会得到一个跟随手指移动的小球。
2. 解决一些制作过程中的疑问
2.1. 自定义控件的目的
首先我们要明白,为什么要自定义View?主要是Android系统内置的View无法实现我们的需求,我们需要针对我们的业务需求定制我们想要的View。自定义View我们大部分时候只需重写两个函数:onMeasure()、onDraw()。onMeasure负责对当前View的尺寸进行测量,onDraw负责把当前这个View绘制出来。当然了,你还得写至少写2个构造函数:
public MyView(Context context) {
super(context);
}
public MyView(Context context, AttributeSet attrs) {
super(context, attrs);
}
2.2. AttributeSet和TypedArray的作用
对于这些制作过程我最大的疑问就是构造函数中的AttributeSet究竟是做什么的,他有什么用?
首先我看到AttributeSet是第一感觉就觉得他是一个包含参数的集合,可以通过以下代码来取出这个参数中的值:
public MyTextView(Context context, AttributeSet attrs) {
super(context, attrs);
//得到AttributeSet的长度
int count = attrs.getAttributeCount();
//循环取出其中的值来观察
for (int i = 0; i < count; i++) {
String attrName = attrs.getAttributeName(i);
String attrVal = attrs.getAttributeValue(i);
Log.e(TAG, "attrName = " + attrName + " , attrVal = " + attrVal);
}
}
输出值为:
MyTextView(4136): attrName = layout_width , attrVal = 100.0dip
MyTextView(4136): attrName = layout_height , attrVal = 200.0dip
MyTextView(4136): attrName = text , attrVal = helloworld
MyTextView(4136): attrName = testAttr , attrVal = 520
对照着此项目的布局文件:
<com.example.test.MyTextView
android:layout_width="100dp"
android:layout_height="200dp"
zhy:testAttr="520"
zhy:text="helloworld" />
你就会发现,这个AttributeSet实际上就是这些布局文件中自定义控件全部属性的值。
然后我由于这个AttributeSet我又查到了TypedArray这个东西,其实TypedArray我感觉就是AttributeSet的升级版,当布局中的属性的值是引用类型的时候,用AttributeSet得到的是一串串数字,解析后才能是我们所需要的数据,如下面的例子:
布局文件:
<com.example.test.MyTextView
android:layout_width="@dimen/dp100"
android:layout_height="@dimen/dp200"
zhy:testAttr="520"
zhy:text="@string/hello_world" />
输出值:
MyTextView(4692): attrName = layout_width , attrVal = @2131165234
MyTextView(4692): attrName = layout_height , attrVal = @2131165235
MyTextView(4692): attrName = text , attrVal = @2131361809
如果利用TypedArray就不一样了,TypedArray需要这样来获取和使用:
TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.test);
String text = ta.getString(R.styleable.test_testAttr);
int textAttr = ta.getInteger(R.styleable.test_text, -1);
获取到的值则是我们需要的值,无需解析。
初次接触自定义界面,还得加油学习!