Android-学习之路-1

利用自定义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);

获取到的值则是我们需要的值，无需解析。

初次接触自定义界面，还得加油学习！