学会绘制自定义的View实际上是非常重要的,在以后的实际开发中我们会有许多地方使用到我们自制的View,因此学好绘图还是很有用处的。既然我们自定义了我们的View就要学着为自定义的View设置一些属性。
这里我们接着Android 绘图进阶(二)对我们自定义的View进行自定义它的属性。
自定义View属性
自定义View属性需要进行下面几步:
1、在res/values文件夹下创建xml文件,并编写代码
<?xml version="1.0" encoding="utf-8"?>
<resources>
<declare-styleable name="mybitmapview2">
<attr name="bitnapview_paintwidth" format="dimension" ></attr>
<attr name="bitmapbackground" format="reference"></attr>
</declare-styleable>
</resources>
attr:即attrbuteset(属性组合)
name:定义的view表示属性名:就好像我们使用的textsize、background、src之类的
format:format中传递类型:
dimension传递尺寸(30dp 30xp)
reference传递类似于@drawable/ic_launcher这种形式的
color传递颜色值 String传递字符串
2、在布局中添加xmlns并使用
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:mybitmapview2="http://schemas.android.com/apk/res/com.example.myview"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<Button
android:id="@+id/btn_bitmapview2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="生成图片"
mybitmapview2:bitnapview_paintwidth="100dp"
/>
<com.example.myview.MyBitmapView2
android:id="@+id/bitmap2"
android:layout_width="match_parent"
android:layout_height="match_parent"
mybitmapview2:bitmapbackground="@drawable/aln"
/>
</LinearLayout>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
备注:
在layout中添加xmlns,这里的mybitmapview2可以自己起名字但是在使用的时候一定要是相同的名字。比如我们修改mybitmapview2为tool那么相应的mybitmapview2:bitmapbackground="@drawable/aln"
就要修改为tool:bitmapbackground="@drawable/aln"
xmlns:mybitmapview2="http://schemas.android.com/apk/res/com.example.myview"
在eclipse中xmlns的写法是上面的写法,最后是包名,但是AndroidStudio中直接写成xmlns:mybitmapview2="http://schemas.android.com/apk/res_auto"
就可以了,它会自动检测
3、在自定义View中进行设置
public MyBitmapView2(Context context, AttributeSet attrs) {
super(context, attrs)
//下面一行代码是通过进入super(ctrl+左键)里找到的
final TypedArray a = context.obtainStyledAttributes(
attrs,R.styleable.mybitmapview2)
//将drawable图片强制造型成BitmapDrawable
BitmapDrawable bitmapdraw=(BitmapDrawable) a.getDrawable(R.styleable.mybitmapview2_bitmapbackground)
if(bitmapdraw!=null){
//通过getBitmap()方法将BitmapDrawable 转成Bitmap类型
mBitmapBackground=bitmapdraw.getBitmap()
}else{
mBitmapBackground=BitmapFactory.decodeResource(getResources(), R.drawable.zly)
}
//设置圆形画笔
mpaintcircle=new Paint()
mpaintcircle.setColor(Color.YELLOW)
//设置矩形画笔的颜色
mpaintrect=new Paint()
mpaintrect.setColor(Color.GREEN)
//给画笔设置mode
PorterDuffXfermode mode=new PorterDuffXfermode(PorterDuff.Mode.XOR)
mpaintrect.setXfermode(mode)
//注:使用setStrokeCap与setStrokeJoin必须先设置style
mpaintrect.setStyle(Style.STROKE)
mpaintrect.setStrokeCap(Cap.ROUND)
mpaintrect.setStrokeJoin(Join.ROUND)
//获得布局中设置的画笔宽度属性,
//最后一个参数含义:如果没有进行设置则默认设置为30
int paintwidth=a.getDimensionPixelOffset(R.styleable.mybitmapview2_bitnapview_paintwidth, 30)
mpaintrect.setStrokeWidth(paintwidth)
mpath=new Path()
matrix=new Matrix()
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
4、效果图
没换背景前(即没设置mybitmapview2:bitmapbackground="@drawable/aln"
)
设置背景属性后
从上图可以看出背景图片改变了,我们自定义属性设置生效了
5、备注一下自定义View的完整代码
public class MyBitmapView2 extends View{
private int width;
private int height;
private Paint mpaintcircle;
private Paint mpaintrect;
private Bitmap mBitmap;
private Bitmap mBitmapBackground;
private Canvas BitmapCanvas;
private Bitmap back;
private Path mpath;
private Matrix matrix;
public MyBitmapView2(Context context) {
super(context);
}
public MyBitmapView2(Context context, AttributeSet attrs) {
super(context, attrs);
final TypedArray a = context.obtainStyledAttributes(
attrs,R.styleable.mybitmapview2);
BitmapDrawable bitmapdraw=(BitmapDrawable) a.getDrawable(R.styleable.mybitmapview2_bitmapbackground);
if(bitmapdraw!=null){
mBitmapBackground=bitmapdraw.getBitmap();
}else{
mBitmapBackground=BitmapFactory.decodeResource(getResources(), R.drawable.zly);
}
mpaintcircle=new Paint();
mpaintcircle.setColor(Color.YELLOW);
mpaintrect=new Paint();
mpaintrect.setColor(Color.GREEN);
PorterDuffXfermode mode=new PorterDuffXfermode(PorterDuff.Mode.XOR);
mpaintrect.setXfermode(mode);
mpaintrect.setStyle(Style.STROKE);
mpaintrect.setStrokeCap(Cap.ROUND);
mpaintrect.setStrokeJoin(Join.ROUND);
int paintwidth=a.getDimensionPixelOffset(R.styleable.mybitmapview2_bitnapview_paintwidth, 30);
mpaintrect.setStrokeWidth(paintwidth);
mpath=new Path();
matrix=new Matrix();
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
Log.d("放缩", (float)width/mBitmapBackground.getWidth()+"");
Log.d("gao", ""+(float)height/mBitmapBackground.getHeight());
canvas.drawBitmap(mBitmapBackground, matrix, null);
BitmapCanvas.drawRect(0, 0, width, height, mpaintcircle);
BitmapCanvas.drawPath(mpath, mpaintrect);
canvas.drawBitmap(mBitmap, 0, 0, null);
}
private float x;
private float y;
private float old_x;
private float old_y;
@Override
public boolean onTouchEvent(MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:{
x=event.getX();
y=event.getY();
mpath.moveTo(x, y);
invalidate();
old_x=x;
old_y=y;
return true;
}
case MotionEvent.ACTION_MOVE:
x=event.getX();
y=event.getY();
mpath.moveTo(old_x,old_y);
mpath.lineTo(x,y);
invalidate();
old_x=x;
old_y=y;
return true;
default:
break;
}
return super.onTouchEvent(event);
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
width = getDefaultSize(getSuggestedMinimumWidth(), widthMeasureSpec);
height = getDefaultSize(getSuggestedMinimumHeight(), heightMeasureSpec);
setMeasuredDimension(width, height);
mBitmap=Bitmap.createBitmap(width, height, Config.ARGB_8888);
BitmapCanvas=new Canvas(mBitmap);
back=Bitmap.createBitmap(width, height, Config.ARGB_8888);
matrix.reset();
matrix.postScale((width+0.0f)/mBitmapBackground.getWidth(), (height+0.0f)/mBitmapBackground.getHeight());
}
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
- 116
- 117
- 118
- 119
- 120
- 121
- 122
- 123
- 124
- 125
- 126
- 127
- 128