android自定义view

目录

1.自定义view简介

        1.anroid自定义view有几种方式

        2.View和ViewGroup

2.自定义组合控件

        1.简介

        2.自动定义组合控件的使用步骤     

        3.代码示例

3.继承系统控件

        1.简介

        2.继承View类系统控件

        3.继承ViewGroup类系统控件

4.自绘控件

        1.自绘控件的三个工具类

        2.相关方法详解

1.Paint（画笔）

2.canvas（画布）

        3.代码示例

1.自定义view简介

        1.anroid自定义view有几种方式

自定义View的实现方式有以下几种： 组合控件，继承控件，自绘控件

                

详细可分为： 自定义组合控件，继承系统 View 控件，继承系统 ViewGroup ，自绘 View 控件，自绘

ViewGroup 控件

        

        2.View和ViewGroup

2.自定义组合控件

        1.简介

组合控件就是将多个控件组合成一个新的控件，可以重复使用

应用场景：在项目中经常会遇到一些比较复杂的 UI 块需要用在 多处使用 ，那么我们就可以通过五大布局 和基本控件组合成一个新的布局View ，这样就可以方便的将该 UI 用在项目的不同页面中，比如一个标题栏。这种方式比较简单，只要通过布局文件实现相应的UI ，然后将该 UI 加到适合的五大布局中即可。

        2.自动定义组合控件的使用步骤     

1. 编写布局文件

2. 实现构造方法

3. 初始化 UI

4. 提供对外的方法

5. 在布局当中引用该控件

6. activity 中使用

        3.代码示例

1.首先先创建一个.xml文件，编写布局

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="60dp"
    android:background="#B8DCF8"
    android:id="@+id/rl">


    <ImageView
        android:id="@+id/iv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:srcCompat="@drawable/ic_baseline_arrow_back_24"
        android:layout_centerVertical="true"
        android:layout_marginStart="10dp"
        />

    <TextView
        android:id="@+id/tv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="安卓"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        />



</RelativeLayout>

2.创建一个java文件，继承与上方.xml的最外层的布局，然后实现他的构造方法，初始化UI

public class ac extends RelativeLayout {


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

    public ac(Context context, AttributeSet attrs) {
        super(context, attrs);
        LayoutInflater.from(context).inflate(R.layout.a,this,true);
    }

    public ac(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    public ac(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
        super(context, attrs, defStyleAttr, defStyleRes);
    }
}

3.在布局中引用该控件

<com.hopu.day18_viewcustom.ac
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

3.继承系统控件

        1.简介

        通过继承系统控件（View 子类控件或 ViewGroup 子类控件）来完成自定义 View ，一般是希望在原有系统控件基础上做一些修饰性的修改，而不会做大幅度的改动

        2.继承View类系统控件

        使用步骤

1. 继承 View 控件，并重写 onDraw 方法

2. 在布局文件中调用

        代码案例

这个是在字体下面加上一条红色的线

1. 继承View控件，并重写onDraw方法

public class color extends androidx.appcompat.widget.AppCompatTextView {

    public color(@NonNull Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        Paint paint=new Paint();
        paint.setColor(Color.RED);
        paint.setStrokeWidth(5);
        int width=getWidth();
        int height=getBaseline();
        canvas.drawLine(0,height,width,height,paint);
    }
}

2.在布局文件中调用

        3.继承ViewGroup类系统控件

        使用步骤

1. 继承 ViewGroup 类系统控件

2. 在布局文件中调用

      代码案例

设计背景色的案例

1.继承ViewGroup类系统控件

public class beijingse extends LinearLayout {

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

    public beijingse(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
    }

    @Override
    protected void dispatchDraw(Canvas canvas) {
        super.dispatchDraw(canvas);
        canvas.drawColor(Color.parseColor("#50ff0000"));
    }

    public beijingse(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    public beijingse(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
        super(context, attrs, defStyleAttr, defStyleRes);
    }
}

2. 在布局文件中调用

        我这里是把最外层的布局给引用了上面的继承viewGroup

<com.hopu.day18_viewcustom.beijingse xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    android:orientation="vertical">

    <com.hopu.day18_viewcustom.ac
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

    <com.hopu.day18_viewcustom.color
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="你好"/>

</com.hopu.day18_viewcustom.beijingse>

4.自绘控件

        1.自绘控件的三个工具类

他们分别是 Canvas( 画布 ) ， Paint( 画笔 ) ， Path( 路径 )

        2.相关方法详解

1.Paint（画笔）

就是画笔 , 用于设置绘制风格 , 如 : 线宽 ( 笔触粗细 ), 颜色 , 透明度和填充风格等 直接使用无参构造方法

就可以创建 Paint 实例 : Paint paint = new Paint( );

我们可以通过下述方法来设置 Paint( 画笔 ) 的相关属性 , 另外 , 关于这个属性有两种 , 图形绘制相关与文

本绘制相关 :

setARGB (int a,int r,int g,int b): 设置绘制的颜色， a 代表透明度， r ， g ， b 代表颜色值。

setAlpha (int a): 设置绘制图形的透明度。

setColor (int color): 设置绘制的颜色，使用颜色值来表示，该颜色值包括透明度和 RGB 颜

色。

setAntiAlias (boolean aa): 设置是否使用抗锯齿功能，会消耗较大资源，绘制图形速度会变

慢。

setDither (boolean dither): 设定是否使用图像抖动处理，会使绘制出来的图片颜色更加平滑

和饱满，图像更加清晰

setFilterBitmap (boolean filter) ： 如果该项设置为 true ，则图像在动画进行中会滤掉对

Bitmap 图像的优化操作， 加快显示速度，本设置项依赖于 dither 和 xfermode 的设置

setMaskFilter (MaskFilter maskfilter) ： 设置 MaskFilter ，可以用不同的 MaskFilter 实现滤

镜的效果，如滤化，立体等

setColorFilter (ColorFilter colorfilter) ： 设置颜色过滤器，可以在绘制颜色时实现不用颜色

的变换效果

setPathEffect (PathEffect effect) 设置绘制路径的效果，如点画线等

setShader (Shader shader) ： 设置图像效果，使用 Shader 可以绘制出各种渐变效果

setShadowLayer (float radius ,float dx,float dy,int color) ：在图形下面设置阴影层，产生

阴影效果， radius 为阴影的角度， dx 和 dy 为阴影在 x 轴和 y 轴上的距离， color 为阴影的颜色

setStyle (Paint.Style style) ： 设置画笔的样式，为 FILL ， FILL_OR_STROKE ，或 STROKE

setStrokeCap (Paint.Cap cap) ： 当画笔样式为 STROKE 或 FILL_OR_STROKE 时，设置笔刷的

图形样式， 如圆形样 Cap.ROUND, 或方形样式 Cap.SQUARE

setSrokeJoin (Paint.Join join) ： 设置绘制时各图形的结合方式，如平滑效果等

setStrokeWidth (float width) ： 当画笔样式为 STROKE 或 FILL_OR_STROKE 时，设置笔刷的

粗细度

setXfermode (Xfermode xfermode) ： 设置图形重叠时的处理方式，如合并，取交集或并

集，经常用来制作橡皮的擦除效果

setFakeBoldText (boolean fakeBoldText) ： 模拟实现粗体文字，设置在小字体上效果会非

常差

setSubpixelText (boolean subpixelText) ： 设置该项为 true ，将有助于文本在 LCD 屏幕上的

显示效果

setTextAlign (Paint.Align align) ： 设置绘制文字的对齐方向

setTextScaleX (float scaleX) ： 设置绘制文字 x 轴的缩放比例，可以实现文字的拉伸的效果

setTextSize (float textSize) ： 设置绘制文字的字号大小

setTextSkewX (float skewX) ： 设置斜体文字， skewX 为倾斜弧度

setTypeface (Typeface typeface) ： 设置 Typeface 对象，即字体风格，包括粗体，斜体以及

衬线体，非衬线体等

setUnderlineText (boolean underlineText) ： 设置带有下划线的文字效果

setStrikeThruText (boolean strikeThruText) ： 设置带有删除线的效果

setStrokeJoin (Paint.Join join) ： 设置结合处的样子， Miter: 结合处为锐角， Round: 结合处

为圆弧： BEVEL ：结合处为直线

setStrokeMiter (float miter) ：设置画笔倾斜度

setStrokeCap (Paint.Cap cap) ：设置转弯处的风格 其他常用方法：

float ascent ( ) ：测量 baseline 之上至字符最高处的距离

float descent () ： baseline 之下至字符最低处的距离

int breakText (char[] text, int index, int count, float maxWidth, float[]

measuredWidth) ： 检测一行显示多少文字

clearShadowLayer ( ) ：清除阴影层 其他的自行查阅文档

2.canvas（画布）

画笔有了，接着就到画布 (Canvas) ，总不能凭空作画是吧 ~ 常用方法如下：

首先是 构造方法 ， Canvas 的构造方法有两种：

Canvas() : 创建一个空的画布，可以使用 setBitmap() 方法来设置绘制具体的画布。

Canvas(Bitmap bitmap) : 以 bitmap 对象创建一个画布，将内容都绘制在 bitmap 上，因此

bitmap 不得为 null 。

接着是

1.drawXXX() 方法族：以一定的坐标值在当前画图区域画图，另外图层会叠加， 即后面绘画的图

层会覆盖前面绘画的图层。 比如：

        drawRect(RectF rect, Paint paint) ：绘制区域，参数一为 RectF 一个区域

        drawPath(Path path, Paint paint) ：绘制一个路径，参数一为 Path 路径对象

        drawBitmap(Bitmap bitmap, Rect src, Rect dst, Paint paint) ： 贴图，参数一就是我们常

规的 Bitmap 对象，参数二是源区域 ( 这里是 bitmap) ， 参数三是目标区域 ( 应该在 canvas 的位

置和大小 ) ，参数四是 Paint 画刷对象， 因为用到了缩放和拉伸的可能，当原始 Rect 不等于目

标 Rect 时性能将会有大幅损失。

        drawLine(float startX, float startY, float stopX, float stopY, Paintpaint) ： 画线，参数一起

始点的 x 轴位置，参数二起始点的 y 轴位置，参数三终点的 x 轴水平位置， 参数四 y 轴垂直位

置，最后一个参数为 Paint 画刷对象。

        drawPoint(float x, float y, Paint paint) ： 画点，参数一水平 x 轴，参数二垂直 y 轴，第三个

参数为 Paint 对象。

        drawText(String text, float x, floaty, Paint paint) ： 渲染文本， Canvas 类除了上面的还可

以描绘文字，参数一是 String 类型的文本， 参数二 x 轴，参数三 y 轴，参数四是 Paint 对象。

        drawOval(RectF oval, Paint paint) ：画椭圆，参数一是扫描区域，参数二为 paint 对象；

        drawCircle(float cx, float cy, float radius,Paint paint) ： 绘制圆，参数一是中心点的 x 轴，

参数二是中心点的 y 轴，参数三是半径，参数四是 paint 对象； drawArc (RectF oval, float startAngle, float sweepAngle, boolean useCenter, Paint paint)： 画弧，参数一是 RectF 对象，一个矩形区域椭圆形的界限用于定义在形状、大小、电 弧，参数二是起始角 ( 度 ) 在电弧的开始，参数三扫描角 ( 度 ) 开始顺时针测量的，参数四是如果 这是真的话, 包括椭圆中心的电 弧 , 并关闭它 , 如果它是假这将是一个弧线 , 参数五是 Paint 对象；

2. clipXXX() 方法族 : 在当前的画图区域裁剪 (clip) 出一个新的画图区域，这个画图区域就是 canvas

对象的当前画图区域了。比如： clipRect(new Rect()) ，那么该矩形区域就是 canvas 的当前画图区

域

3. save() 和 restore() 方法： save ( ) ：用来保存 Canvas 的状态。 save 之后，可以调用 Canvas 的平

移、放缩、旋转、错切、裁剪等操作！ restore （）：用来恢复 Canvas 之前保存的状态。防止

save 后对 Canvas 执行的操作对后续的绘制有影响。 save() 和 restore() 要配对使用 (restore 可以比

save 少 , 但不能多 ) ，若 restore 调用次数比 save 多 , 会报错！

4. translate (float dx, float dy) ： 平移，将画布的坐标原点向左右方向移动 x ，向上下方向移动

y.canvas 的默认位置是在（ 0,0 ）

5. scale (float sx, float sy) ：扩大， x 为水平方向的放大倍数， y 为竖直方向的放大倍数

6. rotate (float degrees) ：旋转， angle 指旋转的角度，顺时针旋转

3.Pant(路径)：

        

        

简单点说就是描点，连线 ~ 在创建好我们的 Path 路径后，可以调用 Canvas 的

drawPath (path,paint) 将图形绘制出来 ~ 常用方法如下：

addArc (RectF oval, float startAngle, float sweepAngle ：为路径添加一个多边形

addCircle (float x, float y, float radius, Path.Direction dir) ：给 path 添加圆圈

addOval (RectF oval, Path.Direction dir) ：添加椭圆形

addRect (RectF rect, Path.Direction dir) ：添加一个区域

addRoundRect (RectF rect, float[] radii, Path.Direction dir) ：添加一个圆角区域

isEmpty () ：判断路径是否为空

transform (Matrix matrix) ：应用矩阵变换

transform (Matrix matrix, Path dst) ：应用矩阵变换并将结果放到新的路径中，即第二个参

数。

更高级的效果可以使用 PathEffect 类！

几个 To ：

moveTo (float x, float y) ：不会进行绘制，只用于移动移动画笔

lineTo (float x, float y) ：用于直线绘制，默认从 (0 ， 0) 开始绘制，用 moveTo 移动！ 比如

mPath.lineTo(300, 300); canvas.drawPath(mPath, mPaint);

quadTo (float x1, float y1, float x2, float y2) ： 用于绘制圆滑曲线，即贝塞尔曲线，同样可

以结合 moveTo 使用！

rCubicTo (float x1, float y1, float x2, float y2, float x3, float y3) 同样是用来实现贝塞尔曲线

的。 (x1,y1) 为控制点， (x2,y2) 为控制点， (x3,y3) 为结束点。 Same as cubicTo, but the

coordinates are considered relative to the current point on this contour. 就是多一个控制

点而已 ~ 绘制上述的曲线： mPath.moveTo(100, 500); mPath.cubicTo(100, 500, 300, 100，600, 500); 如果不加上面的那个 moveTo 的话：则以 (0,0) 为起点， (100,500) 和 (300,100)为控制点绘制贝塞尔曲线

arcTo (RectF oval, float startAngle, float sweepAngle) ： 绘制弧线（实际是截取圆或椭圆的

一部分） ovalRectF 为椭圆的矩形， startAngle 为开始角度， sweepAngle 为结束角度。

        3.代码示例

                1.创建一个drwaViewjava文件，继承与View，实现他的构造方法，以及创建一个方法

init（）；来对画笔进行设置

public class drawView extends View {
    private Paint paint;
    public drawView(Context context) {
        super(context);
        init();
    }

    public drawView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    public drawView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }

    public drawView(Context context, @Nullable AttributeSet attrs, int defStyleAttr, int defStyleRes) {
        super(context, attrs, defStyleAttr, defStyleRes);
        init();
    }

    private void init(){
        paint=new Paint();
        paint.setColor(getResources().getColor(R.color.black));//画笔颜色
        paint.setAntiAlias(true);//抗锯齿
        paint.setTextSize(36);//绘制文字大小，单位px
        paint.setStrokeWidth(5);//画笔粗细
        paint.setStyle(Paint.Style.FILL);//画笔风格

    }

        2.重写onDraw方法，在该方法里绘图

 //在该地方画图
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.drawColor(getResources().getColor(R.color.teal_200));//绘制画布背景颜色
        
        canvas.drawCircle(getWidth()/2,getHeight()/2,200,paint);//绘制圆形
        
        canvas.drawRect(200,100,800,400,paint);//绘制矩形
        
         //绘制Bitmap,就是图片  
             canvas.drawBitmap(BitmapFactory.decodeResource(getResources(),R.mipmap.heihei),200,200,paint);

        //绘制圆角矩形
        canvas.drawRoundRect(new RectF(10,10,210,110),20,20,paint);

        //绘制形状，至少要绘制三个点才能组成一个图形
        Path path=new Path();
        path.moveTo(10,10);
        path.lineTo(200,30);
        path.lineTo(300,10);
        path.close();
        canvas.drawPath(path,paint);
        
         //绘制一个波浪形的一个数字形状
        Path path1=new Path();
        path1.moveTo(10,10);
        path1.lineTo(0,100);
        path1.lineTo(100,0);
        path1.lineTo(200,200);
        path1.lineTo(300,200);
        path1.close();
        canvas.drawTextOnPath("ABCDEFGHIJKLMNOPQRSTUVWXYZ",path1,10,10,paint);

        //绘制文字
        Paint textPaint=new Paint();
        textPaint.setColor(getResources().getColor(R.color.white));
        textPaint.setStrokeWidth(5);
        textPaint.setTextSize(36);
        canvas.drawText("15",getWidth()/2,getHeight()/2,textPaint);