进阶篇－用户界面：5.android绘图api自定义View（视图）

Posted 2020-08-02 安卓随笔

1.自定义视图并为其添加属性

    我们平时用的Button啊 TextView啊都是安卓中系统自带的控件供开发者使用，但是，这些事远远不够的，有时候我们需要自定义控件。

（1）新建一个类MyView使其继承View 类

import android.content.Context;
import android.content.res.TypedArray;
import android.util.AttributeSet;
import android.view.View;

/**
 * Created by lzc on 16/7/2.
 */
public class MyView extends View {

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

这两个构造方法是必不可少的。

（2）此时，在activity_main.xml中就可以添加我们自定义的这个控件了。

 <com.example.lzc.myrect.MyView
        android:layout_width="100dp"
        android:layout_height="100dp"
        />

它的宽度和长度分别是100dp，它目前是一个正方形

（3）在res文件夹中添加资源文件arrts.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="MyView">
        <attr name="rect_color"
            format="color"/>
    </declare-styleable>
</resources>

声明一个名为rect_color的属性，它的格式是color类型的格式。

（4）回到MyView类，为其添加默认属性

import android.content.Context;
import android.content.res.TypedArray;
import android.util.AttributeSet;
import android.view.View;

/**
 * Created by lzc on 16/7/2.
 */
public class MyView extends View {

    public MyView(Context context, AttributeSet attrs) {
        super(context, attrs);

        TypedArray ta = context.obtainStyledAttributes(attrs,R.styleable.MyView);

        int color = ta.getColor(R.styleable.MyView_rect_color,0xffff0000);
        setBackgroundColor(color);

        ta.recycle();
    }
    public MyView(Context context) {
        super(context);
    }
}

(5)在xml中（layout）中直接使用我们刚刚声明的属性

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:mns="http://schemas.android.com/apk/res-auto"
   
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.example.lzc.myrect.MainActivity">

    <com.example.lzc.myrect.MyView
        android:layout_width="100dp"
        android:layout_height="100dp"
        mns:rect_color="#ff0000ff"
        />

</LinearLayout>

这个属性的名字为rect_color，但是需要给他加一个命名空间，我们看到所有属性前面都有一个android：，这个android就是系统的命名空间。

我们添加一个名为mns（mynamespace可以自定义）的命名空间，在eclipse中我们要把

xmlns:android="http://schemas.android.com/apk/res/android"中的android直接改成我们的包名，但是在android studio中，只需要添加：

xmlns:mns="http://schemas.android.com/apk/res-auto"

他就会自动检测到你在资源文件中声明的属性名称。

2.自定义Button皮肤

（1）在res文件夹中添加一个drawable类型的xml文件－button_skin.xml，root element为selector

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="false" android:drawable="@drawable/btn_normal"/>
    <item android:state_pressed="true" android:drawable="@drawable/btn_pressed"/>
</selector>

也就是按下和弹起分别加载两张不同的背景图片。

（2）在button标签中添加一个background属性

android:background="@drawable/button_skin"

把我们刚刚创建的button_skin.xml添加到background属性中。

4.使用绘图api自定义控件

(1)同样的先创建一个自定义类 MyView继承View类

public class MyView extends View {
    public MyView(Context context) {
        super(context);
        init();
    }

    public MyView(Context context, AttributeSet attrs) {
        super(context, attrs);

    }

    public MyView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
       
    }

    @Override
    public void draw(Canvas canvas) {
        super.draw(canvas);
    }
   
}

我们需要三个构造方法和一个重写的draw()方法。

（2）在draw方法里面使用canvas进行绘制一个正方形，绘制需要一个Paint类作为工具，所以还需要定义一个Paint类。并为其指定颜色等属性。

public class MyView extends View {
    public MyView(Context context) {
        super(context);
        init();
    }

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

    public MyView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }
    private void init(){
        p = new Paint();
        p.setColor(Color.RED);
    }
    @Override
    public void draw(Canvas canvas) {
        super.draw(canvas);
        canvas.save();
        canvas.translate(200,200);
        canvas.rotate(degrees,50,50);
        canvas.drawRect(0 ,0 ,100 ,100 ,p);
        degrees ++;
        canvas.restore();
        invalidate();//清除并重绘
    }
    private Paint p;
    private float degrees=0;
}

注意init()方法需要在三个构造方法中同时添加，保证无论执行哪个构造方法都执行此方法。

在draw方法里面的操作为事这个正方形进行旋转，这样旋转很耗资源，所以最好在里面加一个handle延时，使其刷新的频率没有这么快。

（3）在xml文件里面添加我们自定义的控件

<com.example.lzc.myapplication.MyView
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" />

这样运行程序我们就会看到一个旋转的正方形！

android的绘图api非常强大，能够绘制出任何图形，执行任何动画。