进阶篇-用户界面:5.android绘图api自定义View(视图)

Posted 安卓随笔

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了进阶篇-用户界面:5.android绘图api自定义View(视图)相关的知识,希望对你有一定的参考价值。

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非常强大,能够绘制出任何图形,执行任何动画。

 

以上是关于进阶篇-用户界面:5.android绘图api自定义View(视图)的主要内容,如果未能解决你的问题,请参考以下文章

mxgraph进阶Web绘图——mxGraph项目实战(精华篇)

mxgraph进阶 三 Web绘图——mxGraph项目实战 精华篇

从零开始学Sketch——进阶篇-b

进阶之路(基础篇) - 011 arduino api基础手册

Python进阶(三十九)-数据可视化の使用matplotlib进行绘图分析数据

CompletableFuture进阶篇-外卖商家端API的异步化