自定义View实用小技巧

最新推荐文章于 2021-05-26 04:59:29 发布
最新推荐文章于 2021-05-26 04:59:29 发布
阅读量186 收藏
点赞数 2
分类专栏： 安卓
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lvzishen123/article/details/88806055
版权

1.不用传入Context参数的DP转PX，在安卓中进行绘制最后显示都是以PX为单位的，所以我们一般需要用将设计图上的DP转为PX。

public static float dp2px(float dp) {
    return TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, dp, Resources.getSystem().getDisplayMetrics());
}

2.三角函数获取坐标值 通用代码

我们在绘制自定义View的过程中不可避免的经常会接触到三角函数，现提供一个通用的获取X,Y点的代码，
要注意的是我们绘制的时候0°是三点钟方向而非传统认知的12点钟方向，毕竟View的坐标系默认是以左上角为原点的。
在这里插入图片描述
据图所示我们最终的X,Y点其实就是(cos * 半径,sin * 半径),化为代码就为

float cos = (float) Math.cos(Math.toRadians(angle));
float sin = (float) Math.sin(Math.toRadians(angle));

这里注意我们的角度都以默认0°为起始点进行相加,如果画线的话则为

canvas.drawLine(getWidth()/2,getHeight() / 2,
        (float) Math.cos(Math.toRadians(angle)) * RADIUS,  //RADIUS为半径,angle为角度,图示角度为90+90+90+60=240
        (float) Math.sin(Math.toRadians(angle)) * RADIUS,
        paint);

3.Xfermode的使用

可以运用Xfermode绘制出多种重叠，交集等效果
如图:
在这里插入图片描述

public class XfermodeView extends View {
    private static final float RADIUS = DisplayUtil.dp2px(100);
    Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
    Bitmap bitmap;

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

    private void init() {
        savedArea.set(RADIUS, RADIUS, RADIUS * 2, RADIUS * 2);
        bitmap = getBitmap((int) RADIUS * 2);
    }

    @TargetApi(Build.VERSION_CODES.LOLLIPOP)
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        paint.setColor(Color.parseColor("#3F51B5"));
        canvas.drawCircle(getWidth() / 2, getHeight() / 2, RADIUS, paint);
        canvas.drawBitmap(bitmap, getWidth() / 2, getHeight() / 2, paint);
    }

    Bitmap getBitmap(int width) {
        BitmapFactory.Options options = new BitmapFactory.Options();
        options.inJustDecodeBounds = true;
        BitmapFactory.decodeResource(getResources(), R.drawable.ic_default_apk, options);
        options.inJustDecodeBounds = false;
        options.inDensity = options.outWidth;
        options.inTargetDensity = width;
        return BitmapFactory.decodeResource(getResources(), R.drawable.ic_default_apk, options);
    }
}

使用Xfermode之后的效果:
在这里插入图片描述

public class XfermodeView extends View {
    private static final float RADIUS = DisplayUtil.dp2px(100);
    Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
    RectF savedArea = new RectF();
    Xfermode xfermode = new PorterDuffXfermode(PorterDuff.Mode.SRC_IN);
    Bitmap bitmap;


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


    private void init() {
        savedArea.set(RADIUS, RADIUS, RADIUS * 2, RADIUS * 2);
        bitmap = getBitmap((int) RADIUS * 2);
    }


    @TargetApi(Build.VERSION_CODES.LOLLIPOP)
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        paint.setColor(Color.parseColor("#3F51B5"));
        int saved = canvas.saveLayer(null,null, Canvas.ALL_SAVE_FLAG);//保存状态 开启离屏缓冲
        canvas.drawCircle(getWidth() / 2, getHeight() / 2, RADIUS, paint);//DST
        paint.setXfermode(xfermode);
        canvas.drawBitmap(bitmap, getWidth() / 2, getHeight() / 2, paint);//SRC
        paint.setXfermode(null);
        canvas.restoreToCount(saved);
    }


    Bitmap getBitmap(int width) {
        BitmapFactory.Options options = new BitmapFactory.Options();
        options.inJustDecodeBounds = true;
        BitmapFactory.decodeResource(getResources(), R.drawable.ic_default_apk, options);
        options.inJustDecodeBounds = false;
        options.inDensity = options.outWidth;
        options.inTargetDensity = width;
        return BitmapFactory.decodeResource(getResources(), R.drawable.ic_default_apk, options);
    }
}

可以看到模式设置为了SRC_IN，则最终效果为取SRC和DST的交集同时显示SRC的交集部分。

  • 使用Xfermode需要注意的点:绘制之前使用离屏缓冲保存画布状态,绘制之后还原。开启离屏缓冲的原因是如果不开启那么是Xfermode是没效果的，因为默认的DST蒙版将会被认为是整个View。

    int saved = canvas.saveLayer(null,null, Canvas.ALL_SAVE_FLAG);//保存状态 开启离屏缓冲
...
canvas.restoreToCount(saved);

设置离屏缓冲时还可以指定裁取的大小，防止性能的浪费。

RectF savedArea = new RectF();
savedArea.set(left, top, right, bottom);
int saved = canvas.saveLayer(savedArea, paint);

Tips：设置setXfermode之前绘制的是DST，后绘制的是SRC(图例SRC是图片，DST是绘制的圆形，采用SRC_IN，最终取交集并且显示SRC图片的内容),具体的效果图可以参考下图:

在这里插入图片描述

文字的绘制

中心点的确定
需要注意的是文字的X,Y起始点并不是左上角而是左下角。

canvas.drawText("abcd", getWidth() / 2, getHeight() / 2 , paint);

我们可以通过：

paint.setTextAlign(Paint.Align.CENTER);

来设置文字的中心点，如此设置之后X的起始点就为你所定义的位置了。
但是绘制过后文字是会偏上的，因为默认的点为BaseLine，我们需要将文字下移偏移量才是一个真正的中点值。
在这里插入图片描述

paint.setTextSize(DisplayUtil.dp2px(50));
paint.setStyle(Paint.Style.FILL);
paint.setTextAlign(Paint.Align.CENTER);
paint.getTextBounds("abcd", 0, "abcd".length(), rect);
float offset = (rect.top + rect.bottom) / 2;
canvas.drawText("abcd", getWidth() / 2, getHeight() / 2 - offset, paint);

这样减去偏移量文字将会下移为真正的中点，但是注意这种方法是基于BaseLine的，所以当文字确定不会改变的时候用这种方式比较合适。
在这里插入图片描述

会改变的文字用：

Paint.FontMetrics fontMetrics = new Paint.FontMetrics();

paint.getFontMetrics(fontMetrics);
paint.setTextSize(DisplayUtil.dp2px(100));
paint.setStyle(Paint.Style.FILL);
paint.setTextAlign(Paint.Align.CENTER);
float offset = (fontMetrics.ascent + fontMetrics.descent) / 2;
canvas.drawText("abcd", getWidth() / 2, getHeight() / 2 - offset, paint);

这种方式不会随着文字的BaseLine而改变，防止因为文字改变可能出现的跳跃问题。

文字的左对齐

需要减去左边的文字默认间距，如下:

// 绘制文字左对齐
paint.setTextAlign(Paint.Align.LEFT);
Rect rect = new Rect();
paint.getTextBounds("abcd", 0, "abcd".length(), rect);
canvas.drawText("abcd", 0 - rect.left, 300, paint);

文字的多行绘制

  • 如果是仅仅多行绘制那么非常简单，直接使用StaticLayout就可以了：

     {
    staticLayout = new StaticLayout(text, textPaint, 600, Layout.Alignment.ALIGN_NORMAL, 1, 0, true);
     //StaticLayout 并不是一个 View 或者 ViewGroup ，而是 android.text.Layout 的子类，
     // 它是纯粹用来绘制文字的。 StaticLayout 支持换行，它既可以为文字设置宽度上限来让文字自动换行，也会在 \\n 处主动换行。
     //参数说明
     //width 是文字区域的宽度，文字到达这个宽度后就会自动换行；
     //align 是文字的对齐方向；
     //spacingmult 是行间距的倍数，通常情况下填 1 就好；
     //spacingadd 是行间距的额外增加值，通常情况下填 0 就好；
     //includeadd 是指是否在文字上下添加额外的空间，来避免某些过高的字符的绘制出现越界。
 }    
 @Override
 protected void onDraw(Canvas canvas) {
     super.onDraw(canvas);
     // 使用 StaticLayout 代替 Canvas.drawText() 来绘制文字，
     // 以绘制出带有换行的文字
     canvas.save();
     canvas.translate(50, 40);
     staticLayout.draw(canvas);
     canvas.restore();
 }

  • 文字的精确折行

一般用于跟图片相交的需求使用:
主要是两个API的使用:

  1. paint.breakText();
  2. canvas.drawText();
int count = paint.breakText(text, start, length, true, maxWidth, cutWidth);
//截取字符串。
//参数为绘制的文字,开始字符截取的字符，终止字符，是否顺时，截取的宽度，保存截取的宽度
canvas.drawText(text, start, start + count, 0, verticalOffset, paint);
//第二和第三个参数为字符串的起始点和终止点

我们的中心思想就是每次用breakText计算出当次的起点文字到终点文字的长度，根据长度计算出文字的终止点是哪里，然后用drawText根据起止点和终止点截取文字并绘制。
下边以一个实例来说明,上代码:
在这里插入图片描述

  public class ImageTextView extends View {
        private static final float IMAGE_WIDTH = DisplayUtil.dp2px(120);
        private static final float IMAGE_Y = DisplayUtil.dp2px(50);
        private boolean isLeft = true;
        private boolean isInImage = false;
        Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
        Bitmap bitmap;
        Paint.FontMetrics fontMetrics = new Paint.FontMetrics();
        String text = "This is text,This is text,This is text,This is text,This is text,This is text,This is text,This is text,This is text,This is text,This is text,This is text,This is text,This is text,This is text,This is text,This is text,This is text,This is text,This is text,This is text,This is text,This is text,This is text,This is text,This is text,This is text,This is text,This is text,This is text,This is text,This is text,This is text,This is text,This is text,This is text,This is text,This is text.";
        float[] cutWidth = new float[1];
    
        public ImageTextView(Context context, @Nullable AttributeSet attrs) {
            super(context, attrs);
            init();
        }

    private void init() {
        bitmap = getAvatar((int) IMAGE_WIDTH);
        paint.setTextSize(DisplayUtil.dp2px(14));
        paint.getFontMetrics(fontMetrics);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //绘制文字
        canvas.drawBitmap(bitmap, getWidth() / 2 - IMAGE_WIDTH / 2, IMAGE_Y, paint);

        int length = text.length();
        float verticalOffset = -fontMetrics.top;

        for (int start = 0; start < length; ) {
            int maxWidth;
            float textTop = verticalOffset + fontMetrics.top;
            float textBottom = verticalOffset + fontMetrics.bottom;
             //判断是否在图片区域内
            if (textTop > IMAGE_Y && textTop < IMAGE_Y + IMAGE_WIDTH 
                    || textBottom > IMAGE_Y && textBottom < IMAGE_Y + IMAGE_WIDTH) {
                // 文字和图片在同一行,减去图片的宽度
                isInImage = true;
                maxWidth = (int) (getWidth() / 2 - IMAGE_WIDTH / 2);
            } else {
                isInImage = false;
                // 文字和图片不在同一行
                maxWidth = getWidth();
            }
            int count = paint.breakText(text, start, length, true, maxWidth, cutWidth);
            if (isInImage) {//如果是图片显示区域内
                if (isLeft) { //在图片左边
                    isLeft = false;
                    canvas.drawText(text, start, start + count, 0, verticalOffset, paint);
                } else { //在图片右边
                    isLeft = true;
                    canvas.drawText(text, start, start + count, getWidth() / 2 + IMAGE_WIDTH / 2, verticalOffset, paint);
                    verticalOffset += paint.getFontSpacing();  //再右边才换行
                }
            } else {
                canvas.drawText(text, start, start + count, 0, verticalOffset, paint);
                verticalOffset += paint.getFontSpacing(); //换行
            }
            start += count;
        }
    }

    Bitmap getAvatar(int width) {
        BitmapFactory.Options options = new BitmapFactory.Options();
        options.inJustDecodeBounds = true;
        BitmapFactory.decodeResource(getResources(), R.drawable.ic_default_apk, options);
        options.inJustDecodeBounds = false;
        options.inDensity = options.outWidth;
        options.inTargetDensity = width;
        return BitmapFactory.decodeResource(getResources(), R.drawable.ic_default_apk, options);
    }
}

如上，此例我们总体的思路就是判断当前文字是否在图片的显示高度之类，如果在图片高度范围之内则做截取字符的处理，在判断是否超过高度的时候可以根据自己的逻辑来设置，这里只是提供一种思路,实际情况可以根据自己的需求计算处理。

canvas的裁剪和变换

canvas的裁剪主要有4个API：

  1. canvas.clipRect();
  2. canvas.clipPath();
  3. canvas.clipOutPath();
  4. canvas.clipOutRect();

当进行裁剪之后你绘制的部分只能是在你绘制的部分中被显示出来，如下所示：
在这里插入图片描述

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    canvas.clipRect(0, 0, 100, 100);
    canvas.drawBitmap(bitmap, 0, 0, paint);
}

可以看到只绘制了被切割矩形的部分。
Tips:这里还需要注意的一点是当进行了clipPath操作之后画笔的抗锯齿效果就会无效了，画出的东西很有可能是带有毛边的，比如用clipPath切割一个圆形然后绘制一个圆形的头像，在这种情况下就可以考虑Xfermode而非clipPath了。

canvas的变换:

  1. canvas.rotate(degree);

  2. canvas.translate(x,y);

  3. canvas.scale(x,y);

  4. canvas.skew(x,y);

这里只需要注意一点，canvas的变换是改变的坐标系起始点也就是左边系的原点，比如当我调用tranlate之后在调用rotate的情况是这样的:

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    bitmap = getAvatar(100);
    canvas.translate(200,200);
    canvas.rotate(45);
    canvas.drawBitmap(bitmap, 0, 0, paint);
}

在这里插入图片描述
可以看到最后绘制是在0,0点绘制的bitmap图片，也就是说我们每次对坐标系的操作其实都是操作的左边系的原点。
Tips:需要注意的一点是通常进行canvas的变换或裁剪之前都需要调用canvas.save()去保存canvas状态，绘制完成之后调用canvas.restore()去还原canvas的坐标，如果不还原的话之后的绘制都会以你改变后的原点为基础进行绘制。

lvzishen123
关注
专栏目录
Android创建抗锯齿透明背景圆角图像
11-25
Android创建抗锯齿透明背景圆角图像
DisplayUtil 把dp或sp转成px（像素）的工具类。适配不同屏幕
甄宗伟的博客
05-07 1154
public class DisplayUtil { /** * 把dp或sp转成px （像素） * @param context * @param dp * @return */ public static int dp2px(Context context, int dp) { // mdpi 1dp=1px // hdpi 1dp=1.5px
AutoLayout进阶——适配旋转，分屏，分屏后大小调整。
qq_39154578的博客
12-04 1289
本文基于上一篇文章《AutoLayout适配问题解决方案》 前言： 没事看看APP适配，然后发现绝大部分APP都屏蔽了旋转功能。但是，在分屏情况下，屏蔽旋转功能的属性是失效的，开启了分屏之后的旋转，直接导致了某些VIew拉伸，变形甚至移除屏幕找不到了。 正常情况下APP不能旋转，或者适配旋转时，会适配多个布局文件。在能分屏的情况下，以不能旋转的APP：M为例，在分屏并横屏时一半按钮被挡住了。Aut...
使用PorterDuff解决clipPath无法抗锯齿问题
weixin_33708432的博客
03-16 1004
一、简述 前段时间公司史无前例的接了一个大数据外包项目（哇~我们又不是外包公司(╯°Д°)╯︵ ┻━┻），要求搞很多图表方便观察运营的数据情况，图表当然要用到MPAndroidChart啦，但并不是所有的图表都可以用它用实现，这时就需要自定义View了，其中有一个要求，如下图所示，这就是本篇要实现的效果： 本篇全文适合像我一样的小白细细观看，如果你很赶时间，就只是进来看看标题上的解决方案，那么请...
【安卓/Android】自定义控件之弧形布局及clip系列方法抗锯齿
米歪-miwisay
08-04 1921
开头必水，说是做弧形布局，不如说是Draw绘制这块踩坑，因为会对绘制结果进行裁剪（clipPath），而Path则是绘制贝塞尔曲线的结果。裁剪的通病用过的基本都知道，那就是抗锯齿，非常恶心，各种抗锯齿的办法基本GG。所以...我不打算用clip系列的办法（滑稽.jpg），而是Xfermode。Xfermode用起来问题也不大（参考链接），链接是别人的，基本知道是个啥就行了，没必要全部看完。 ...
android 自定义view大全，非常好用
12-13
描述中提到的"展示了常见的自定义view套路，实用"意味着这个压缩包可能包含了各种实用的自定义View示例，涵盖了自定义View设计的基本技巧和常见应用场景。 自定义View通常涉及到以下几个关键知识点： 1. **绘制...
自定义view（圆形进度条）
09-21
总的来说，自定义View是Android开发中一个非常实用且有趣的主题。通过这个过程，开发者可以深入了解Android视图的绘制机制，并提升自己的编程技巧。实践中，不断优化和完善，可以打造出更加独特和高效的应用界面。
Android自定义View之酷炫圆环（二）
09-02
MeasureSpec.AT_MOST) { result...这种自定义View不仅提升了应用的用户体验，也展示了Android开发者对UI定制的深入理解和技巧。对于希望增强应用视觉效果或有自定义控件需求的开发者来说，这是一个非常实用的学习资源。
VC的若干实用小技巧
12-07
### VC的若干实用小技巧详解 #### 一、简化项目构建流程 在使用Visual C++进行编程时，经常需要对项目进行编译和调试。针对这种情况，有一些实用的小技巧可以帮助提高开发效率： **技巧1：单文件调试** 当你只想...
RecycleView+CoordinatorLayout 滑动 隐藏/显示自定义bar和导航
喵喵的博客
05-18 981
很长时间没有写过博客了感觉有点紧张(怎么可能呢 哈哈) ，这几天在公司项目的开发中，看到同行中一个挺好看的功能，就滑着玩了会，感觉体验挺好的，我百忙中抽出时间去研究了一下，居然效果也挺不错，然后就说服iOS那哥们，一块把这个功能同步到项目中,接下来就带你去看看。 效果图： 先不要考虑什么内容，从技术的角度来看，这种效果感觉很不错，用户体验也挺棒，具体怎么实现呢，接着往下看： 首先咱们列表里滑动的item目前基本上是RecycleView和ListView 来实现的，这里我选择第一种Recycl...
Android：的Bitmap进行ClipPath存在锯齿
Alostz
01-23 8692
一般去除锯齿有2中方法 1、mPaint.setAntiAlias(true); 2canvas.setDrawFilter(new PaintFlagsDrawFilter(0, Paint.FILTER_BITMAP_FLAG|Paint.ANTI_ALIAS_FLAG)); 但是 如StackOverflow的问题：http://stackoverflow.com/q
android 画布抗锯齿,android – 如何在画布和路径中进行抗锯齿处理
weixin_39861955的博客
05-25 627
我遇到麻烦当我使用canvas.clipPath,它显示锯齿,它看起来不顺利,我知道如果我使用Paint,我可以使用mPaint.setFlags(Paint.ANTI_ALIAS_FLAG),这可以抗锯齿,但在我的代码中,我不能用油漆.public static void drawCurrentPageArea(Canvas canvas, Bitmap bitmap) {//cebakhjac...
工具篇——DensityUtil（dp与px的相互转换）
一个灵活的胖子MrWang
04-26 1962
写代码的四点： 1.明确需求。要做什么？ 2.分析思路。要怎么做？（1,2,3……） 3.确定步骤。每一个思路要用到哪些语句、方法和对象。 4.代码实现。用具体的语言代码将思路实现出来。学习新技术的四点： 1.该技术是什么？ 2.该技术有什么特点？（使用需注意的方面） 3.该技术怎么使用？（写Demo） 4.该技术什么时候用？（在Pr...
Android 子布局不超过父布局 圆角
嘻哈包袱铺 专栏
06-22 8869
转载自：http://www.gcssloop.com/gebug/rclayout1.前言之前，我在GitHub分享了一个开源库：rclayout，这个库的主要目的是快速实现Android中的圆角需求，例如这样的效果。分享这个库的时候只是觉得可能有用而已，但没有想到居然有了800多个Star，看来有不少人像我一样，对圆角这一需求比较苦恼。圆角算是一种比较常见的需求了，最常用于图片，因此可以找到大...
android 布局加圆角,Android 实现一个通用的圆角布局
weixin_31151281的博客
05-26 1864
前言我们在平时的开发中，经常会遇到圆角需求，比如下图 一般的实现方法是上面的图片左上和右上设置圆角，下面的文字部分左下和右下设置圆角，而 Glide 默认是不支持指定位置设置圆角的，需要通过自定义 Transformation 实现，而 GIF 动图也是不支持圆角的。有些同学说了，加个遮罩不就行了吗？先不说会不会被视觉小姐姐喷：一个圆角都做不了，还要我给你做遮罩图！我自己本身也是无法接受这种实...
Android自定义ListView表格实现技巧
本文主要分享了在Android开发中如何利用ListView来实现自定义表格的技巧。这个技巧包括三个核心要点：动态生成不同数量的列、根据数据源合并列以及为可...这种技巧对于那些需要展示可编辑表格的Android应用非常实用。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值