Android绘图机制（二）——自定义View绘制形, 圆形, 三角形, 扇形, 椭圆, 曲线,文字和图片的坐标讲解

我们要想画好一些炫酷的View，首先我们得知道怎么去画一些基础的图案，比如矩形，圆形，三角形，多边形等….

新建一个项目

然后我们创建一个listview,每个图案一个Activity,这样看起来是不是很顺眼

     <ListView
        android:id="@+id/listview"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

编写ListView

private ListView listview;
//item上的数据源
 private String[] name = {"矩形", "圆形", "三角形", "扇形", "椭圆", "曲线","文字和图片"};
//listview的adapter
private ArrayAdapter<String>adapter;

private void initView() {
        //实例化listview
        listview = (ListView) findViewById(R.id.listview);
        //实例化数据源
        adapter = new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, name);
        //listview设置adapter
        listview.setAdapter(adapter);
        //listview设置点击事件
        listview.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
                //判断点击了第几个
                if (id == 0) {
                    //矩形
                    startActivity(new Intent(MainActivity.this, RectActivity.class));
                } else if (id == 1) {
                    //圆形
                    startActivity(new Intent(MainActivity.this, CircleActivity.class));
                } else if (id == 2) {
                    //三角形
                    startActivity(new Intent(MainActivity.this, TrigonActivity.class));
                } else if (id == 3) {
                    //扇形
                    startActivity(new Intent(MainActivity.this, SectorActivity.class));
                } else if (id == 4) {
                    //椭圆
                    startActivity(new Intent(MainActivity.this, OvalActivity.class));
                } else if (id == 5) {
                    //曲线
                    startActivity(new Intent(MainActivity.this, PathActivity.class));
                }else if (id == 6) {
                    //曲线
                    startActivity(new Intent(MainActivity.this, TvIvActivity.class));
                }
            }
        });
    }
效果是这样的


后续可以添加

1.矩形——RectActivity

好的，上面写ListView的代码是不是很简单？拿我们新建一个RectActivity去画点了，首先我们要新建一个RectView继承View

package com.lgl.view.view;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.view.View;

/**
 * 矩形
 * Created by LGL on 2016/1/7.
 */
public class RectView extends View {

    //无参
    public RectView(Context context) {
        super(context);
    }

    //有参
    public RectView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        // 创建画笔
        Paint p = new Paint();
        //设置实心
        p.setStyle(Paint.Style.FILL);
        // 设置红色
        p.setColor(Color.BLACK);
        // 设置画笔的锯齿效果
        p.setAntiAlias(true);
        //绘制
        canvas.drawRect(50, 100, 300, 300, p);

    }
}

大致的坐标思维

截图

1.圆形——CircleActivity

我们还是新建一个CircleActivity去画点了，首先我们要新建一个CircleView继承View

package com.lgl.view.view;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.view.View;
import android.view.WindowManager;

/**
 * 圆
 * Created by LGL on 2016/1/7.
 */
public class CircleView extends View {

    int width;
    int height;

    //无参
    public CircleView(Context context) {
        super(context);
        init();
    }

    //有参
    public CircleView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    private void init() {
        //获取屏幕的宽高
        //Android绘图机制（一）——自定义View的基础属性和方法里面有讲
        WindowManager wm = (WindowManager) getContext()
                .getSystemService(Context.WINDOW_SERVICE);

        width = wm.getDefaultDisplay().getWidth();
        height = wm.getDefaultDisplay().getHeight();
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        Paint p = new Paint();
        p.setColor(Color.BLACK);
        // 设置画笔的锯齿效果
        p.setAntiAlias(true);
        canvas.drawCircle(width / 2, height / 2, width / 2, p);
    }
}

大致的坐标思维

截图

3.三角形——TrigonActivity

我们还是新建一个TrigonActivity去画点了，首先我们要新建一个trigonView继承View

package com.lgl.view.view;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.util.AttributeSet;
import android.view.View;

/**
 * 三角形
 * Created by LGL on 2016/1/7.
 */
public class TrigonView extends View {

    //无参
    public TrigonView(Context context) {
        super(context);
    }

    //有参
    public TrigonView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        Paint p = new Paint();
        p.setColor(Color.BLACK);
        //实例化路径
        Path path = new Path();
        path.moveTo(80, 200);// 此点为多边形的起点
        path.lineTo(120, 250);
        path.lineTo(80, 250);
        path.close(); // 使这些点构成封闭的多边形
        canvas.drawPath(path, p);

    }
}

大致的坐标思维

截图

4.扇形——SectorActivity

package com.lgl.view.view;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.view.View;

/**
 * 扇形
 * Created by LGL on 2016/1/8.
 */
public class SectorView extends View {

    public SectorView(Context context) {
        super(context);
    }

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

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        // 创建画笔
        Paint p = new Paint();
        p.setColor(Color.BLACK);
        RectF rectF = new RectF(60, 100, 200, 240);
        canvas.drawArc(rectF, 200, 130, true, p);
    }
}

大致的坐标思维

截图

5.椭圆——OvalActivity

package com.lgl.view.view;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.view.View;

/**
 * 椭圆
 * Created by LGL on 2016/1/8.
 */
public class OvalView extends View {

    public OvalView(Context context) {
        super(context);
    }

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

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        // 创建画笔
        Paint p = new Paint();
        p.setColor(Color.BLACK);
        RectF rectF = new RectF(60, 100, 200, 240);
        rectF.set(210,100,250,130);
        canvas.drawOval(rectF, p);
    }
}

椭圆的思路和扇形是一样的，这里就不演示了

截图

6.曲线——PathActivity

package com.lgl.view.view;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.util.AttributeSet;
import android.view.View;

/**
 * Created by LGL on 2016/1/8.
 */
public class PathView extends View {

    public PathView(Context context) {
        super(context);
    }

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

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        // 创建画笔
        Paint p = new Paint();
        p.setColor(Color.BLACK);

        p.reset();
        //设置空心
        p.setStyle(Paint.Style.STROKE);
        Path path = new Path();
        path.moveTo(100, 320);//设置Path的起点
        path.quadTo(150, 310, 170, 400);  //设置路径点和终点
        canvas.drawPath(path, p);
    }
}

大致的坐标思维

截图

7.文字和图片——TvIvActivity

package com.lgl.view.view;

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.view.View;

import com.lgl.view.R;

/**
 * Created by LGL on 2016/1/8.
 */
public class TvIvView extends View {
    public TvIvView(Context context) {
        super(context);
    }

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

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        Paint p = new Paint();
        p.setColor(Color.RED);

        //文本
        canvas.drawText("自定义文本", 250, 330, p);
        Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.mipmap.ic_launcher);
        //图片
        canvas.drawBitmap(bitmap, 250, 360, p);
    }
}

文字和图片感觉不用多说，图片加载需要一个bitmap，而加载bitmap又需要一个工厂类，就是这样

大致的坐标思维

截图

相信看到这里，一些基础的图案都是可以绘制了，那么我们就可以进入下一节了

Demo下载地址：会在本系列最后一节放出，现在还没写完

PPT：http://download.csdn.net/detail/qq_26787115/9396627

Android绘图机制（三）——自定义View的三种实现方式以及实战项目操作

Android绘图机制（二）——自定义View绘制形, 圆形, 三角形, 扇形, 椭圆, 曲线,文字和图片的坐标讲解的更多相关文章

  1. Android绘图机制（三）——自定义View的实现方式以及半弧圆新控件

    Android绘图机制(三)--自定义View的三种实现方式以及实战项目操作 在Android绘图机制(一)--自定义View的基础属性和方法 里说过,实现自定义View有三种方式,分别是 1.对现有 ...

  2. Android群英传笔记——第六章：Android绘图机制与处理技巧

    Android群英传笔记--第六章:Android绘图机制与处理技巧 一直在情调,时间都是可以自己调节的,不然世界上哪有这么多牛X的人 今天就开始读第六章了,算日子也刚好一个月了,一个月就读一半,这效 ...

  3. Android绘图机制（一）——自定义View的基础属性和方法

    Android绘图机制(一)--自定义View的基础属性和方法 自定义View看起来,确实看起来高深莫测,很多Android开发都不是特别在行这一块,这里面的逻辑以及一些绘画都是有一点难的,说一下我目 ...

  4. Android 自定义 View 绘制

    在 Android 自定义View 里面,介绍了自定义的View的基本概念.同时在 Android 控件架构及View.ViewGroup的测量 里面介绍了 Android 的坐标系 View.Vie ...

  5. android自定义View绘制天气温度曲线

    原文:android自定义View绘制天气温度曲线 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/u012942410/article/detail ...

  6. Android群英传》读书笔记 (3) 第六章 Android绘图机制与处理技巧 + 第七章 Android动画机制与使用技巧

    第六章 Android绘图机制与处理技巧 1.屏幕尺寸信息屏幕大小:屏幕对角线长度,单位“寸”:分辨率:手机屏幕像素点个数,例如720x1280分辨率:PPI(Pixels Per Inch):即DP ...

  7. Android绘图机制（四）——使用HelloCharts开源框架搭建一系列炫酷图表，柱形图，折线图，饼状图和动画特效，抽丝剥茧带你认识图表之美

    Android绘图机制(四)--使用HelloCharts开源框架搭建一系列炫酷图表,柱形图,折线图,饼状图和动画特效,抽丝剥茧带你认识图表之美 这里为什么不继续把自定义View写下去呢,因为最近项目 ...

  8. Android显示框架：自定义View实践之绘制篇

    文章目录 一 View 二 Paint 2.1 颜色处理 2.2 文字处理 2.3 特殊处理 三 Canvas 3.1 界面绘制 3.2 范围裁切 3.3 集合变换 四 Path 4.1 添加图形 4 ...

  9. android自定义View绘制圆形头像与椭圆头像

    要实现这两种效果,需要自定义View,并且有两种实现方式.   第一种: public class BitmapShaders extends View {     private  BitmapSh ...

随机推荐

  1. ZAB协议

    zookeeper依赖zab协议来实现分布式数据一致性.基于该协议,zookeeper实现了一种主备模式的系统架构来保持ZooKeeper为高可用的一致性协调框架,自然的ZooKeeper也有着一致性 ...

  2. FORM中调用JAVA组件

    调用方式: 链接:可以在一个数据块中创建专门的 Bean Area项,使用 Implementation Class 特性链接到J a v a B e a n,使用W h e n - C u s t ...

  3. 怎样在Ubuntu 14.04中搭建gitolite git服务器

     1.   首先这里我们安装openssh-serveropenssh-client,如果你用的是VPS之类的一般都默认安装好了,不过运行一个这个命令不会有错的,如果有安装就会提示已安装. sud ...

  4. python使用qq服务器发送邮件

    python使用qq服务器发送邮件 直接上代码: #!/usr/bin/python2.7 #-*- coding: UTF-8 -*- # sendmail.py # # init created: ...

  5. Java-IO之PipedReader和PipedWriter

    PipedReader和PipedWriter与PipedInputStream和PipedOutputStream一样,都可以用于管道通信.PipedWriter是字符管道输出流,继承于Writer ...

  6. UNIX网络编程——ICMP报文分析：端口不可达

    ICMP的一个规则是,ICMP差错报文必须包括生成该差错报文的数据报IP首部(包含任何选项),还必须至少包括跟在该IP首部后面的前8个字节(包含源端口和目的端口).在我们的例子中,跟在IP首部后面的前 ...

  7. 用SpriteBuilder简化"耕牛遍地走"的动画效果(三)

    接下来的代码和原文差不多,建立一个数组用来存放动画帧,然后用数组来初始化一个CCAnimation动画对象.接着将牛放在屏幕中心,然后运行动画: NSMutableArray *walkAnimFra ...

  8. 自己动手写hibernate

    这篇文章 可作为北京尚学堂 hibernate的学习笔记 再学习hibernate之前 得有一点反射的基础知识 package com.bjsxt.hibernate; public class St ...

  9. 用过的一些Android设备调试特性注意点（挖坑帖）

    华为3C Activity切换动画偏快. 显示大图时不容易出现OOM(应用最大内容要比其他手机大一点),所以调试OOM问题时不要用此手机,否则难以发现问题. 小米3 不要调用系统的裁图功能.因为返回的 ...

  10. CodePen最佳实例分享

    原文地址: Chris Coyier's Favorite CodePen Demos 原文日期: 2013年8月13日 翻译日期: 2013年8月21日 CodePen: Build, Explor ...