时间:2021-05-20
public BitmapShader(Bitmap bitmap,Shader.TileMode tileX,Shader.TileMode tileY)
调用这个类来产生一个画有一个位图的渲染器(Shader)。
bitmap:在渲染器内使用的位图
(1)tileX:The tiling mode for x to draw the bitmap in. 在位图上X方向花砖模式
(2)tileY:The tiling mode for y to draw the bitmap in. 在位图上Y方向花砖模式
TileMode:(一共有三种)
(1)CLAMP:如果渲染器超出原始边界范围,会复制范围内边缘染色。
(2)REPEAT:横向和纵向的重复渲染器图片,平铺。
(3)MIRROR:横向和纵向的重复渲染器图片,这个和REPEAT 重复方式不一样,他是以镜像方式平铺。
还是不太明白?那看一下效果图吧!
对于我们的圆角,以及圆形,我们设置的模式都是CLAMP ,但是你会不会会有一个疑问:
view的宽或者高大于我们的bitmap宽或者高岂不是会拉伸?
嗯,我们会为BitmapShader设置一个matrix,去适当的放大或者缩小图片,不会让“ view的宽或者高大于我们的bitmap宽或者高 ”此条件成立的。
到此我们的原理基本介绍完毕了,拿到drawable转化为bitmap,然后直接初始化BitmapShader,画笔设置Shader,最后在onDraw里面进行画圆就行了。
基本用法及实例
首先就来看看利用BitmapShader实现的圆形或者圆角。
我们这里直接继承ImageView,这样大家设置图片的代码会比较熟悉;但是我们需要支持两种模式,那么就需要自定义属性了:
1、自定义属性
values/attr.xml
我们定义了一个枚举和一个圆角的大小borderRadius。
2、获取自定义属性
public class RoundImageView extends ImageView { /** * 图片的类型,圆形or圆角 */ private int type; private static final int TYPE_CIRCLE = 0; private static final int TYPE_ROUND = 1; /** * 圆角大小的默认值 */ private static final int BODER_RADIUS_DEFAULT = 10; /** * 圆角的大小 */ private int mBorderRadius; /** * 绘图的Paint */ private Paint mBitmapPaint; /** * 圆角的半径 */ private int mRadius; /** * 3x3 矩阵,主要用于缩小放大 */ private Matrix mMatrix; /** * 渲染图像,使用图像为绘制图形着色 */ private BitmapShader mBitmapShader; /** * view的宽度 */ private int mWidth; private RectF mRoundRect; public RoundImageView(Context context, AttributeSet attrs) { super(context, attrs); mMatrix = new Matrix(); mBitmapPaint = new Paint(); mBitmapPaint.setAntiAlias(true); TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.RoundImageView); mBorderRadius = a.getDimensionPixelSize( R.styleable.RoundImageView_borderRadius, (int) TypedValue .applyDimension(TypedValue.COMPLEX_UNIT_DIP, BODER_RADIUS_DEFAULT, getResources() .getDisplayMetrics()));// 默认为10dp type = a.getInt(R.styleable.RoundImageView_type, TYPE_CIRCLE);// 默认为Circle a.recycle(); }可以看到我们的一些成员变量,基本都加了注释;然后在构造方法中获取了我们的自定义属性,以及部分变量的初始化。
3、onMeasure
@Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { Log.e("TAG", "onMeasure"); super.onMeasure(widthMeasureSpec, heightMeasureSpec); /** * 如果类型是圆形,则强制改变view的宽高一致,以小值为准 */ if (type == TYPE_CIRCLE) { mWidth = Math.min(getMeasuredWidth(), getMeasuredHeight()); mRadius = mWidth / 2; setMeasuredDimension(mWidth, mWidth); } }我们复写了onMeasure方法,主要用于当设置类型为圆形时,我们强制让view的宽和高一致。
接下来只剩下设置BitmapShader和绘制了
4、设置BitmapShader
/** * 初始化BitmapShader */ private void setUpShader() { Drawable drawable = getDrawable(); if (drawable == null) { return; } Bitmap bmp = drawableToBitamp(drawable); // 将bmp作为着色器,就是在指定区域内绘制bmp mBitmapShader = new BitmapShader(bmp, TileMode.CLAMP, TileMode.CLAMP); float scale = 1.0f; if (type == TYPE_CIRCLE) { // 拿到bitmap宽或高的小值 int bSize = Math.min(bmp.getWidth(), bmp.getHeight()); scale = mWidth * 1.0f / bSize; } else if (type == TYPE_ROUND) { // 如果图片的宽或者高与view的宽高不匹配,计算出需要缩放的比例;缩放后的图片的宽高,一定要大于我们view的宽高;所以我们这里取大值; scale = Math.max(getWidth() * 1.0f / bmp.getWidth(), getHeight() * 1.0f / bmp.getHeight()); } // shader的变换矩阵,我们这里主要用于放大或者缩小 mMatrix.setScale(scale, scale); // 设置变换矩阵 mBitmapShader.setLocalMatrix(mMatrix); // 设置shader mBitmapPaint.setShader(mBitmapShader); }在setUpShader中,首先对drawable转化为我们的bitmap;
然后初始化
接下来,根据类型以及bitmap和view的宽高,计算scale;
关于scale的计算:
(1)圆形时:取bitmap的宽或者高的小值作为基准,如果采用大值,缩放后肯定不能填满我们的圆形区域。然后,view的mWidth/bSize ; 得到的就是scale。
(2)圆角时:因为设计到宽/高比例,我们分别getWidth() * 1.0f / bmp.getWidth() 和 getHeight() * 1.0f / bmp.getHeight() ;最终取大值,因为我们要让最终缩放完成的图片一定要大于我们的view的区域,有点类似centerCrop;
(3)比如:view的宽高为10*20;图片的宽高为5*100 ; 最终我们应该按照宽的比例放大,而不是按照高的比例缩小;因为我们需要让缩放后的图片,自定大于我们的view宽高,并保证原图比例。
有了scale,就可以设置给我们的matrix;
然后使用mBitmapShader.setLocalMatrix(mMatrix);
最后将bitmapShader设置给paint。
关于drawable转bitmap的代码:
最后我们会在onDraw里面调用setUpShader(),然后进行绘制。
5、绘制
到此,就剩下最后一步绘制了,因为我们的范围,以及缩放都完成了,所以真的只剩下绘制了。
绘制就很简单了,画个圆,圆角矩形什么的。圆角矩形的限定范围mRoundRect在onSizeChanged里面进行了初始化。
6、状态的存储与恢复
当然了,如果内存不足,而恰好我们的Activity置于后台,不幸被重启,或者用户旋转屏幕造成Activity重启,我们的View应该也能尽可能的去保存自己的属性。
状态保存什么用处呢?比如,现在一个的圆角大小是10dp,用户点击后变成50dp;当用户旋转以后,或者长时间置于后台以后,返回我们的Activity应该还是50dp;
我们简单的存储一下,当前的type以及mBorderRadius
代码比较简单。我们文章中的demo中,第一个,第四个是可以点击的,点击后会发生变化,你可以点击后,然后旋转屏幕进行测试。
同时我们也对外公布了两个方法,用于动态修改圆角大小和type
最后贴一下我们的布局文件和MainActivity。
6、调用
布局文件:
没撒,ScrollView里面一个线性布局,里面一堆RoundImageView。
MainActivity
package com.zhy.variousshapeimageview; import android.app.Activity; import android.os.Bundle; import android.view.View; import android.view.View.OnClickListener; import com.zhy.view.RoundImageView; public class MainActivity extends Activity { private RoundImageView mQiQiu; private RoundImageView mMeiNv ; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); mQiQiu = (RoundImageView) findViewById(R.id.id_qiqiu); mMeiNv = (RoundImageView) findViewById(R.id.id_meinv); mQiQiu.setOnClickListener(new OnClickListener() { @Override public void onClick(View v) { mQiQiu.setType(RoundImageView.TYPE_ROUND); } }); mMeiNv.setOnClickListener(new OnClickListener() { @Override public void onClick(View v) { mMeiNv.setBorderRadius(90); } }); } }最后的效果图:
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
利用学过的BitmapShader渲染类,我们来实现一个带描边的圆角图片。具体实现:用来显示自定义的绘图类的布局文件res/layout/main.xml:打开
很多android应用都用到了圆角头像,或者一些圆角图片处理起来比较麻烦,直接上圆角图片工具类publicclassCircleImageViewextends
Android使用xml自定义图片实例详解实现效果图:白色圆角图片bg_round_rectangle_white.xml白色圆角虚线框bg_round_rec
带背景图像的固定宽度圆角框。这是最常用的圆角框做法,适用于各种对图片表现要求较高的圆角框。因为采用图片来表现,所以其圆角平滑、无任何锯齿现象,表现丰富,使得画面
本文实例讲述了Android生成带圆角的Bitmap图片。分享给大家供大家参考。具体如下:有时候我们在开发Android应用时,会遇到圆角图片的问题,那么,我们