自定义View——画线、矩形、圆形、图像

最新推荐文章于 2023-11-23 08:50:43 发布
最新推荐文章于 2023-11-23 08:50:43 发布
阅读量809 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cn_Jack_Chen/article/details/74375037
版权

一、最简单的自定义View，什么都不显示，但是有View的特性

com.cctvjiatao.customview.MainActivity

[java] view plain copy
  1. package com.cctvjiatao.customview;  
  2.   
  3. import android.app.Activity;  
  4. import android.os.Bundle;  
  5.   
  6. public class MainActivity extends Activity {  
  7.   
  8.     @Override  
  9.     protected void onCreate(Bundle savedInstanceState) {  
  10.         super.onCreate(savedInstanceState);  
  11.         setContentView(R.layout.activity_main);  
  12.     }  
  13.   
  14. }  
com.cctvjiatao.customview.v1.CustomView1

[java] view plain copy
  1. package com.cctvjiatao.customview.v1;  
  2.   
  3. import android.content.Context;  
  4. import android.util.AttributeSet;  
  5. import android.view.View;  
  6.   
  7. /** 
  8.  * @作者： jiatao 
  9.  * @修改时间：2016-3-11 上午7:58:10 
  10.  * @包名：com.cctvjiatao.customview.v1 
  11.  * @文件名：CustomView1.java 
  12.  * @版权声明：www.cctvjiatao.com 
  13.  * @功能： 最简单的自定义View，什么都不显示，但是有View的特性 
  14.  */  
  15. public class CustomView1 extends View {  
  16.   
  17.     public CustomView1(Context context) {  
  18.         super(context);  
  19.     }  
  20.   
  21.     public CustomView1(Context context, AttributeSet attrs) {  
  22.         super(context, attrs);  
  23.     }  
  24.   
  25. }  
activity_main.xml

[html] view plain copy
  1. <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  2.     xmlns:tools="http://schemas.android.com/tools"  
  3.     android:id="@+id/container"  
  4.     android:layout_width="match_parent"  
  5.     android:layout_height="match_parent" >  
  6.   
  7.     <com.cctvjiatao.customview.v1.CustomView1  
  8.         android:layout_width="match_parent"  
  9.         android:layout_height="match_parent"  
  10.         android:background="#00ff00" >  
  11.     </com.cctvjiatao.customview.v1.CustomView1>  
  12.   
  13. </FrameLayout>  
AndroidManifest.xml

[html] view plain copy
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <manifest xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     package="com.cctvjiatao.customview"  
  4.     android:versionCode="1"  
  5.     android:versionName="1.0" >  
  6.   
  7.     <uses-sdk  
  8.         android:minSdkVersion="14"  
  9.         android:targetSdkVersion="21" />  
  10.   
  11.     <application  
  12.         android:allowBackup="true"  
  13.         android:icon="@drawable/ic_launcher"  
  14.         android:label="@string/app_name"  
  15.         android:theme="@style/AppTheme" >  
  16.         <activity  
  17.             android:name=".MainActivity"  
  18.             android:label="@string/app_name" >  
  19.             <intent-filter>  
  20.                 <action android:name="android.intent.action.MAIN" />  
  21.   
  22.                 <category android:name="android.intent.category.LAUNCHER" />  
  23.             </intent-filter>  
  24.         </activity>  
  25.     </application>  
  26.   
  27. </manifest>  
效果图：


二、自定义View，显示一行文字。注意:drawText的坐标是 “左下” 坐标。
com.cctvjiatao.customview.MainActivity 同一

AndroidManifest.xml 同一

activity_main.xml

[html] view plain copy
  1. <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  2.     xmlns:tools="http://schemas.android.com/tools"  
  3.     android:id="@+id/container"  
  4.     android:layout_width="match_parent"  
  5.     android:layout_height="match_parent" >  
  6.   
  7.     <com.cctvjiatao.customview.v1.CustomView1  
  8.         android:layout_width="match_parent"  
  9.         android:layout_height="match_parent"  
  10.         android:background="#00ff00"   
  11.         android:visibility="gone">  
  12.     </com.cctvjiatao.customview.v1.CustomView1>  
  13.       
  14.     <com.cctvjiatao.customview.v2.CustomView1  
  15.         android:layout_width="match_parent"  
  16.         android:layout_height="match_parent">  
  17.     </com.cctvjiatao.customview.v2.CustomView1>  
  18.   
  19. </FrameLayout>  
com.cctvjiatao.customview.v2.CustomView1

[java] view plain copy
  1. package com.cctvjiatao.customview.v2;  
  2.   
  3. import android.content.Context;  
  4. import android.graphics.Canvas;  
  5. import android.graphics.Paint;  
  6. import android.util.AttributeSet;  
  7. import android.view.View;  
  8.   
  9. /** 
  10.  * @作者： jiatao 
  11.  * @修改时间：2016-3-11 上午8:22:56 
  12.  * @包名：com.cctvjiatao.customview.v2 
  13.  * @文件名：CustomView2.java 
  14.  * @版权声明：www.cctvjiatao.com 
  15.  * @功能： 自定义View，显示一行文字。注意:drawText的坐标是 “左下” 坐标。 
  16.  */  
  17. public class CustomView1 extends View {  
  18.   
  19.     public CustomView1(Context context, AttributeSet attrs) {  
  20.         super(context, attrs);  
  21.     }  
  22.   
  23.     public CustomView1(Context context) {  
  24.         super(context);  
  25.     }  
  26.   
  27.     @Override  
  28.     protected void onDraw(Canvas canvas) {  
  29.         Paint paint = new Paint();  
  30.         // canvas.drawText("This is a canvas", 0, 0, paint);//这样写不会显示文字，因为文字的左下坐标是（0，0）  
  31.         canvas.drawText("This is a canvas,坐标为左下（0，50）", 0, 50, paint);// (字符，左坐标，下坐标，画笔)  
  32.   
  33.         paint.setTextSize(30);//设置画笔大小，即字体大小  
  34.         canvas.drawText("This is a canvas，坐标为左下（0，30）", 0, 30, paint);// (字符，左坐标，下坐标，画笔)  
  35.     }  
  36.   
  37. }  

效果图：


三、  自定义View，画线、矩形、圆角矩形、圆形

com.cctvjiatao.customview.MainActivity 同一

AndroidManifest.xml 同一

activity_main.xml

[html] view plain copy
  1. <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  2.     xmlns:tools="http://schemas.android.com/tools"  
  3.     android:id="@+id/container"  
  4.     android:layout_width="match_parent"  
  5.     android:layout_height="match_parent" >  
  6.   
  7.     <com.cctvjiatao.customview.v1.CustomView1  
  8.         android:layout_width="match_parent"  
  9.         android:layout_height="match_parent"  
  10.         android:background="#00ff00"   
  11.         android:visibility="gone">  
  12.     </com.cctvjiatao.customview.v1.CustomView1>  
  13.       
  14.     <com.cctvjiatao.customview.v2.CustomView1  
  15.         android:layout_width="match_parent"  
  16.         android:layout_height="match_parent"  
  17.         android:visibility="gone">  
  18.     </com.cctvjiatao.customview.v2.CustomView1>  
  19.       
  20.     <com.cctvjiatao.customview.v2.CustomView2  
  21.         android:layout_width="match_parent"  
  22.         android:layout_height="match_parent">  
  23.     </com.cctvjiatao.customview.v2.CustomView2>  
  24.   
  25. </FrameLayout>  
com.cctvjiatao.customview.v2.CustomView2

[java] view plain copy
  1. <pre name="code" class="java">package com.cctvjiatao.customview.v2;  
  2.   
  3. import android.content.Context;  
  4. import android.graphics.Canvas;  
  5. import android.graphics.Paint;  
  6. import android.graphics.Rect;  
  7. import android.graphics.RectF;  
  8. import android.graphics.Paint.Style;  
  9. import android.util.AttributeSet;  
  10. import android.view.View;  
  11.   
  12. /** 
  13.  * @作者： jiatao 
  14.  * @修改时间：2016-3-12 上午11:31:51 
  15.  * @包名：com.cctvjiatao.customview.v2 
  16.  * @文件名：CustomView2.java 
  17.  * @版权声明：www.cctvjiatao.com 
  18.  * @功能： 自定义View，画线、矩形、圆角矩形、圆形 
  19.  */  
  20. public class CustomView2 extends View {  
  21.   
  22.     public CustomView2(Context context, AttributeSet attrs) {  
  23.         super(context, attrs);  
  24.     }  
  25.   
  26.     public CustomView2(Context context) {  
  27.         super(context);  
  28.     }  
  29.   
  30.     @Override  
  31.     protected void onDraw(Canvas canvas) {  
  32.         Paint paint = new Paint();  
  33.         paint.setTextSize(10);  
  34.         paint.setColor(0xffff0000);  
  35.         // 画直线  
  36.         canvas.drawLine(0, 10, 200, 10, paint);  
  37.         // 画斜线  
  38.         canvas.drawLine(0, 10, 200, 60, paint);  
  39.   
  40.         // 画矩形(Rect)  
  41.         Rect rect = new Rect(0, 80, 100, 160);  
  42.         canvas.drawRect(rect, paint);  
  43.         // 画矩形(RectF)  
  44.         RectF rectf = new RectF(150, 80, 250, 160);  
  45.         canvas.drawRect(rectf, paint);  
  46.         // 画矩形(坐标)  
  47.         canvas.drawRect(300, 80, 400, 160, paint);  
  48.   
  49.         // 画圆角矩形(RectF)  
  50.         RectF rectrf = new RectF(10, 180, 110, 250);  
  51.         canvas.drawRoundRect(rectrf, 10, 10, paint);  
  52.         // 画圆角矩形(RectF)  
  53.         canvas.drawRoundRect(120, 180, 220, 250, 10, 10, paint);  
  54.   
  55.         // 画圆形  
  56.         canvas.drawCircle(100, 350, 50, paint);  
  57.         paint.setStyle(Style.STROKE);  
  58.         canvas.drawCircle(210, 350, 50, paint);  
  59.         paint.setStyle(Style.FILL_AND_STROKE);  
  60.         canvas.drawCircle(320, 350, 50, paint);  
  61.         paint.setStyle(Style.FILL);  
  62.         canvas.drawCircle(430, 350, 50, paint);  
  63.   
  64.     }  
  65. }  

效果图：

四、自定义View，画图像

com.cctvjiatao.customview.MainActivity 同一

AndroidManifest.xml 同一

activity_main.xml

[html] view plain copy
  1. <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  2.     xmlns:tools="http://schemas.android.com/tools"  
  3.     android:id="@+id/container"  
  4.     android:layout_width="match_parent"  
  5.     android:layout_height="match_parent" >  
  6.   
  7.     <com.cctvjiatao.customview.v1.CustomView1  
  8.         android:layout_width="match_parent"  
  9.         android:layout_height="match_parent"  
  10.         android:background="#00ff00"   
  11.         android:visibility="gone">  
  12.     </com.cctvjiatao.customview.v1.CustomView1>  
  13.       
  14.     <com.cctvjiatao.customview.v2.CustomView1  
  15.         android:layout_width="match_parent"  
  16.         android:layout_height="match_parent"  
  17.         android:visibility="gone">  
  18.     </com.cctvjiatao.customview.v2.CustomView1>  
  19.       
  20.     <com.cctvjiatao.customview.v2.CustomView2  
  21.         android:layout_width="match_parent"  
  22.         android:layout_height="match_parent"  
  23.         android:visibility="gone">  
  24.     </com.cctvjiatao.customview.v2.CustomView2>  
  25.       
  26.     <com.cctvjiatao.customview.v2.CustomView3  
  27.         android:layout_width="match_parent"  
  28.         android:layout_height="match_parent">  
  29.     </com.cctvjiatao.customview.v2.CustomView3>  
  30.   
  31. </FrameLayout>  
com.cctvjiatao.customview.v2. CustomView3
[java] view plain copy
  1. package com.cctvjiatao.customview.v2;  
  2.   
  3. import com.cctvjiatao.customview.R;  
  4.   
  5. import android.content.Context;  
  6. import android.graphics.Bitmap;  
  7. import android.graphics.BitmapFactory;  
  8. import android.graphics.Canvas;  
  9. import android.graphics.Paint;  
  10. import android.util.AttributeSet;  
  11. import android.view.View;  
  12.   
  13. /** 
  14.  * @作者： jiatao 
  15.  * @修改时间：2016-3-12 下午1:16:11 
  16.  * @包名：com.cctvjiatao.customview.v2 
  17.  * @文件名：CustomView3.java 
  18.  * @版权声明：www.cctvjiatao.com 
  19.  * @功能： 自定义View，画图像 
  20.  */  
  21. public class CustomView3 extends View {  
  22.   
  23.     private Bitmap bitmap;  
  24.   
  25.     public CustomView3(Context context, AttributeSet attrs) {  
  26.         super(context, attrs);  
  27.         bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.ic_launcher);  
  28.     }  
  29.   
  30.     public CustomView3(Context context) {  
  31.         super(context);  
  32.         bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.ic_launcher);  
  33.     }  
  34.   
  35.     @Override  
  36.     protected void onDraw(Canvas canvas) {  
  37.         Paint paint = new Paint();  
  38.         canvas.drawBitmap(bitmap, 0, 35, paint);  
  39.     }  
  40.   
  41. }  
效果图：



Ah_JackChen
关注
自定义View（一）——画线、矩形、圆形、图像
可乐淘的专栏
03-12 7946
一、最简单的自定义View，什么都不显示，但是有View的特性 com.cctvjiatao.customview.MainActivity package com.cctvjiatao.customview; import android.app.Activity; import android.os.Bundle; public class MainActivity extends A
Android 自定义view——签名板
AA_chao的博客
11-25 901
首先来看一下咱酷炫的效果图吧！由于是在模拟器上运行，鼠标拖动操作的，所以写的字较丑，见谅见谅哈！ 这个签名板涉及到以下几个知识点： 一、自定义view的制作 二、将布局存成图像并保存 我们来简单说说自定义view： 首先我们要明白，为什么要自定义View？主要是Android系统内置的View无法实现我们的需求，我们需要针对我们的业务需求定制我们想要的View。自定义View我们大部
安卓自定义View基础-绘制点、线、矩形、圆形等
05-11
安卓自定义View基础-绘制点、线、矩形、圆形等详情查看http://blog.csdn.net/z1353095373/article/details/71601293
自定义View（画直线，弧线，扇形）
weixin_44729579的博客
05-02 727
自定义View 1.首先，得有图形上下文，因为他能保存绘图细信息，并且决定着绘制到什么地方去 2.其次，那个图形上下文必须跟view相关联，才能将内容绘制到view上面 自定义View的步骤 1.新建一个类，继承子UIView 2.实现-(void)drawRect:(CGRect)rect方法，然后在这个方法中 1）取得跟当前view相关联的图形上下文 2）绘制相应的图形内容 3）利用图形上下文...
自定义View基础画线案例
qq_20608169的博客
05-25 151
import java.security.PublicKey; import android.R.integer; import android.content.Context; import android.graphics.Bitmap; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Paint; import android.graphics.Paint.Style; imp
Android自定义View-画直线、折线拖动点可移动
最新发布
dream_xang的博客
11-23 674
创建自定义View，实现界面上绘制直线、折线，拖动坐标点可任意移动。
自定义View画圆、直线、矩形
NuanSY的博客
10-31 641
这是我们的效果图。。。。 下面是代码。。。。。。 首先我们先从xml开始 com.bwie.test.demo2_view.MyView android:id="@+id/my_view" android:layout_width="wrap_content" android:layout_height="wrap_content"/> 这是 我们自定义
安卓Android源码——一个涂鸦还有画矩形圆形的小Demo.zip
10-11
这个“安卓Android源码——一个涂鸦还有画矩形圆形的小Demo.zip”就是这样一个示例项目，它帮助开发者了解如何在Android上进行图形绘制和手势识别。 首先，我们要关注的是`DrawDemo`这个主程序文件夹，它包含了该...
Android-自定义View之圆形进度条总结
I_wait_for_you的专栏
03-03 698
最近撸了一个圆形进度条的开源项目，算是第一次完完整整的使用自定义 View 。在此对项目开发思路做个小结，欢迎大家 Star 和 Fork。该项目总共实现了三种圆形进度条效果:圆形进度条、带刻度的圆形进度条已经水波纹进度条
Android开发学习笔记——自定义View(二)自定义View绘图
qq_36425800的博客
10-25 613
Android开发学习笔记——自定义View（二）自定义View
Android 自定义View ：虚线矩形
Type真是太帅了
10-14 1290
本案例涉及视频外一个点指向视频内某块区域，因此参数略微复杂，除斜线起点坐标为实际坐标外，其他三个参数为百分比，例如矩形左上角坐标（0.1,0.1）表示位于相对于视频左上角0.1*weight，0.1*height处。PS：由于获取视频尺寸需要prepared才给到，此时 DashLineView已经create和onMeasure，只能在onDraw时才能进行具体坐标的计算。其中，前两个参数用于绘制预览效果中矩形上方的斜线，如果不需要可以移除。
自定义View入门 —— 制作圆圈进度条
妇校长的博客QAQ
02-21 724
今天说下怎么自定义一个简单的进度条=。=自定义View首要确定两个东西，第一个就是 View 的大小，第二个就是绘图位置！！剩下的就是画笔啥的，这方面的就没有什么好讲的了。。。确定view的大小首先，确定View 的大小，和自定义ViewGroup一样，重写onMeasure() 方法来测量： protected void onMeasure(int widthMeasureSpec, int h
Android笔记 自定义View（五）：Canvas使用之绘制点、线、几何图形
u013135085的博客
07-27 9309
本次继续了解下怎么绘制点、线和几何图形 目录 一、绘制点 二、绘制线 三、绘制几何图形 1、矩形和圆角矩形： 2、绘制圆和椭圆 3、绘制圆弧 四、总结 一、绘制点 查看api我们可以知道Canvas中画点的方法： /* * @param * x x轴坐标 * y y轴坐标 * paint 画笔 * 绘制单个点。 */ public void drawPoint(f...
android自定义View绘制几何图形
有梦请追
06-12 5161
Android利用canvas画各种图形(点、直线、弧、圆、椭圆、文字、矩形、多边形、曲线、圆角矩形) 1、首先说一下canvas类： Class Overview The Canvas class holds the "draw" calls. To draw something, you need 4 basic components: A Bitmap to hold the pixe
Android 自定义View画一条线
在路上的大蜗牛
10-20 6786
自定义View代码:public class NavBarBackgroundView extends View { private Paint mPaint = new Paint(); public NavBarBackgroundView(Context context) { this(context,null); } public NavBarBac
Android自定义View之Paint绘制文字和线
weixin_34390105的博客
07-30 459
Android自定义View系列 Android自定义View之Canvas的使用 Android自定义View注意事项 Android自定义View之图像的色彩处理 Android自定义View之图片外形特效——轻松实现圆角和圆形图片 Android自定义View之双缓冲机制和SurfaceView Android自定义View之invalidate方法和postInvalidate方法 An...
Android自定义View实现画线与点拖动交互
本文将详细介绍如何创建一个自定义View来画直线和折线，并且让这些线条上的点支持拖动操作。此外，本示例还包括了横竖屏切换时坐标自动转换的功能，以确保用户界面在不同屏幕方向下保持一致性和可用性。" 知识点1：...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值