| Android绘图机制（二）——自定义View绘制形, 圆形, 三角形, 扇形, 椭圆, 曲线,文字和图片的坐标讲解 |
|
|
|
|
Android绘图机制（二）——自定义View绘制形,圆形,三角形,扇形,椭圆,曲线,文字和图片的坐标讲解
我们要想画好一些炫酷的View，首先我们得知道怎么去画一些基础的图案，比如矩形，圆形，三角形，多边形等….
新建一个项目
然后我们创建一个listview,每个图案一个Activity,这样看起来是不是很顺眼
android:id="@+id/listview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
编写ListView
privateListViewlistview;
//item上的数据源
privateString[]name={"矩形","圆形","三角形","扇形","椭圆","曲线","文字和图片"};
//listview的adapter
privateArrayAdapteradapter;
privatevoidinitView(){
//实例化listview
listview=(ListView)findViewById(R.id.listview);
//实例化数据源
adapter=newArrayAdapter(this,android.R.layout.simple_list_item_1,name);
//listview设置adapter
listview.setAdapter(adapter);
//listview设置点击事件
listview.setOnItemClickListener(newAdapterView.OnItemClickListener(){
@Override
publicvoidonItemClick(AdapterViewparent,Viewview,intposition,longid){
//判断点击了第几个
if(id==0){
//矩形
startActivity(newIntent(MainActivity.this,RectActivity.class));
}elseif(id==1){
//圆形
startActivity(newIntent(MainActivity.this,CircleActivity.class));
}elseif(id==2){
//三角形
startActivity(newIntent(MainActivity.this,TrigonActivity.class));
}elseif(id==3){
//扇形
startActivity(newIntent(MainActivity.this,SectorActivity.class));
}elseif(id==4){
//椭圆
startActivity(newIntent(MainActivity.this,OvalActivity.class));
}elseif(id==5){
//曲线
startActivity(newIntent(MainActivity.this,PathActivity.class));
}elseif(id==6){
//曲线
startActivity(newIntent(MainActivity.this,TvIvActivity.class));
}
}
});
}
效果是这样的
后续可以添加
1.矩形——RectActivity
好的，上面写ListView的代码是不是很简单？拿我们新建一个RectActivity去画点了，首先我们要新建一个RectView继承View
packagecom.lgl.view.view;
importandroid.content.Context;
importandroid.graphics.Canvas;
importandroid.graphics.Color;
importandroid.graphics.Paint;
importandroid.util.AttributeSet;
importandroid.view.View;
/
矩形
CreatedbyLGLon2016/1/7.
/
publicclassRectViewextendsView{
//无参
publicRectView(Contextcontext){
super(context);
}
//有参
publicRectView(Contextcontext,AttributeSetattrs){
super(context,attrs);
}
@Override
protectedvoidonDraw(Canvascanvas){
super.onDraw(canvas);
//创建画笔
Paintp=newPaint();
//设置实心
p.setStyle(Paint.Style.FILL);
//设置红色
p.setColor(Color.BLACK);
//设置画笔的锯齿效果
p.setAntiAlias(true);
//绘制
canvas.drawRect(50,100,300,300,p);
}
}
截图
1.圆形——CircleActivity
我们还是新建一个CircleActivity去画点了，首先我们要新建一个CircleView继承View
packagecom.lgl.view.view;
importandroid.content.Context;
importandroid.graphics.Canvas;
importandroid.graphics.Color;
importandroid.graphics.Paint;
importandroid.util.AttributeSet;
importandroid.view.View;
importandroid.view.WindowManager;
/
圆
CreatedbyLGLon2016/1/7.
/
publicclassCircleViewextendsView{
intwidth;
intheight;
//无参
publicCircleView(Contextcontext){
super(context);
init();
}
//有参
publicCircleView(Contextcontext,AttributeSetattrs){
super(context,attrs);
init();
}
privatevoidinit(){
//获取屏幕的宽高
//Android绘图机制（一）——自定义View的基础属性和方法里面有讲
WindowManagerwm=(WindowManager)getContext()
.getSystemService(Context.WINDOW_SERVICE);
width=wm.getDefaultDisplay().getWidth();
height=wm.getDefaultDisplay().getHeight();
}
@Override
protectedvoidonDraw(Canvascanvas){
super.onDraw(canvas);
Paintp=newPaint();
p.setColor(Color.BLACK);
//设置画笔的锯齿效果
p.setAntiAlias(true);
canvas.drawCircle(width/2,height/2,width/2,p);
}
}
截图
3.三角形——TrigonActivity
我们还是新建一个TrigonActivity去画点了，首先我们要新建一个trigonView继承View
packagecom.lgl.view.view;
importandroid.content.Context;
importandroid.graphics.Canvas;
importandroid.graphics.Color;
importandroid.graphics.Paint;
importandroid.graphics.Path;
importandroid.util.AttributeSet;
importandroid.view.View;
/
三角形
CreatedbyLGLon2016/1/7.
/
publicclassTrigonViewextendsView{
//无参
publicTrigonView(Contextcontext){
super(context);
}
//有参
publicTrigonView(Contextcontext,AttributeSetattrs){
super(context,attrs);
}
@Override
protectedvoidonDraw(Canvascanvas){
super.onDraw(canvas);
Paintp=newPaint();
p.setColor(Color.BLACK);
//实例化路径
Pathpath=newPath();
path.moveTo(80,200);//此点为多边形的起点
path.lineTo(120,250);
path.lineTo(80,250);
path.close();//使这些点构成封闭的多边形
canvas.drawPath(path,p);
}
}
4.扇形——SectorActivity
packagecom.lgl.view.view;
importandroid.content.Context;
importandroid.graphics.Canvas;
importandroid.graphics.Color;
importandroid.graphics.Paint;
importandroid.graphics.RectF;
importandroid.util.AttributeSet;
importandroid.view.View;
/
扇形
CreatedbyLGLon2016/1/8.
/
publicclassSectorViewextendsView{
publicSectorView(Contextcontext){
super(conwww.shanxiwang.nettext);
}
publicSectorView(Contextcontext,AttributeSetattrs){
super(context,attrs);
}
@Override
protectedvoidonDraw(Canvascanvas){
super.onDraw(canvas);
//创建画笔
Paintp=newPaint();
p.setColor(Color.BLACK);
RectFrectF=newRectF(60,100,200,240);
canvas.drawArc(rectF,200,130,true,p);
}
}
5.椭圆——OvalActivity
packagecom.lgl.view.view;
importandroid.content.Context;
importandroid.graphics.Canvas;
importandroid.graphics.Color;
importandroid.graphics.Paint;
importandroid.graphics.RectF;
importandroid.util.AttributeSet;
importandroid.view.View;
/
椭圆
CreatedbyLGLon2016/1/8.
/
publicclassOvalViewextendsView{
publicOvalView(Contextcontext){
super(context);
}
publicOvalView(Contextcontext,AttributeSetattrs){
super(context,attrs);
}
@Override
protectedvoidonDraw(Canvascanvas){
super.onDraw(canvas);
//创建画笔
Paintp=newPaint();
p.setColor(Color.BLACK);
RectFrectF=newRectF(60,100,200,240);
rectF.set(210,100,250,130);
canvas.drawOval(rectF,p);
}
}
椭圆的思路和扇形是一样的，这里就不演示了
截图
6.曲线——PathActivity
packagecom.lgl.view.view;
importandroid.content.Context;
importandroid.graphics.Canvas;
importandroid.graphics.Color;
importandroid.graphics.Paint;
importandroid.graphics.Path;
importandroid.util.AttributeSet;
importandroid.view.View;
/
CreatedbyLGLon2016/1/8.
/
publicclassPathViewextendsView{
publicPathView(Contextcontext){
super(context);
}
publicPathView(Contextcontext,AttributeSetattrs){
super(context,attrs);
}
@Override
protectedvoidonDraw(Canvascanvas){
super.onDraw(canvas);
//创建画笔
Paintp=newPaint();
p.setColor(Color.BLACK);
p.reset();
//设置空心
p.setStyle(Paint.Style.STROKE);
Pathpath=newPath();
path.moveTo(100,320);//设置Path的起点
path.quadTo(150,310,170,400);//设置路径点和终点
canvas.drawPath(path,p);
}
}
截图
7.文字和图片——TvIvActivity
packagecom.lgl.view.view;
importandroid.content.Context;
importandroid.graphics.Bitmap;
importandroid.graphics.BitmapFactory;
importandroid.graphics.Canvas;
importandroid.graphics.Color;
importandroid.graphics.Paint;
importandroid.util.AttributeSet;
importandroid.view.View;
importcom.lgl.view.R;
/
CreatedbyLGLon2016/1/8.
/
publicclassTvIvViewextendsView{
publicTvIvView(Contextcontext){
super(context);
}
publicTvIvView(Contextcontext,AttributeSetattrs){
super(context,attrs);
}
@Override
protectedvoidonDraw(Canvascanvas){
super.onDraw(canvas);
Paintp=newPaint();
p.setColor(Color.RED);
//文本
canvas.drawText("自定义文本",250,330,p);
Bitmapbitmap=BitmapFactory.decodeResource(getResources(),R.mipmap.ic_launcher);
//图片
canvas.drawBitmap(bitmap,250,360,p);
}
}
文字和图片感觉不用多说，图片加载需要一个bitmap，而加载bitmap又需要一个工厂类，就是这样
大致的坐标思维
截图
相信看到这里，一些基础的图案都是可以绘制了。
|
|
|
|
|
|
|
|
|
|
|
|
