1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > android 布局圆变椭圆 Android实现自定义圆形 圆角和椭圆ImageView(使用Xfermode

android 布局圆变椭圆 Android实现自定义圆形 圆角和椭圆ImageView(使用Xfermode

时间:2022-02-25 11:18:42

相关推荐

android 布局圆变椭圆 Android实现自定义圆形 圆角和椭圆ImageView(使用Xfermode

一:简介:

在上一篇

这样可以省很多事情,比如测量步骤,以及不需要自己去写设置图片的方法,本文使用Xfermode模式中的DST_IN模式来实现要达到的效果,当然大家也可以采用其他的模式,比如SRC_IN等都可以实现该效果。

(照例完整源代码在文章的最后给出下载地址哈)

二:效果图:

三、Xfermode渲染模式简介:

xfermode影响在Canvas已经有的图像上绘制新的颜色的方式

* 正常的情况下,在图像上绘制新的形状,如果新的Paint不是透明的,那么会遮挡下面的颜色.

* 如果新的Paint是透明的,那么会被染成下面的颜色

下面的Xfermode子类可以改变这种行为:

AvoidXfermode 指定了一个颜色和容差,强制Paint避免在它上面绘图(或者只在它上面绘图)。

PixelXorXfermode 当覆盖已有的颜色时,应用一个简单的像素XOR操作。

PorterDuffXfermode 这是一个非常强大的转换模式,使用它,可以使用图像合成的16条Porter-Duff规则的任意一条来控制Paint如何与已有的Canvas图像进行交互。

这里不得不提到那个经典的图:

上面的16种模式的说明如下:

从上面我们可以看到PorterDuff.Mode为枚举类,一共有16个枚举值:

1.PorterDuff.Mode.CLEAR

所绘制不会提交到画布上。

2.PorterDuff.Mode.SRC

显示上层绘制图片

3.PorterDuff.Mode.DST

显示下层绘制图片

4.PorterDuff.Mode.SRC_OVER

正常绘制显示,上下层绘制叠盖。

5.PorterDuff.Mode.DST_OVER

上下层都显示。下层居上显示。

6.PorterDuff.Mode.SRC_IN

取两层绘制交集。显示上层。

7.PorterDuff.Mode.DST_IN

取两层绘制交集。显示下层。

8.PorterDuff.Mode.SRC_OUT

取上层绘制非交集部分。

9.PorterDuff.Mode.DST_OUT

取下层绘制非交集部分。

10.PorterDuff.Mode.SRC_ATOP

取下层非交集部分与上层交集部分

11.PorterDuff.Mode.DST_ATOP

取上层非交集部分与下层交集部分

12.PorterDuff.Mode.XOR

异或:去除两图层交集部分

13.PorterDuff.Mode.DARKEN

取两图层全部区域,交集部分颜色加深

14.PorterDuff.Mode.LIGHTEN

取两图层全部,点亮交集部分颜色

15.PorterDuff.Mode.MULTIPLY

取两图层交集部分叠加后颜色

16.PorterDuff.Mode.SCREEN

取两图层全部区域,交集部分变为透明色

四、自定义圆形、圆角和椭圆的ImageView的实现

1、测量View的大小,对圆形作特殊处理

/*** 测量view的大小*/@Overrideprotected void onMeasure(int widthMeasureSpec, intheightMeasureSpec) {//TODO Auto-generated method stub

super.onMeasure(widthMeasureSpec, heightMeasureSpec);//如果类型是圆形,则强制设置view的宽高一致,取宽高的较小值

if(mType ==TYPE_CIRCLE){int width =Math.min(getMeasuredWidth(),getMeasuredHeight());

setMeasuredDimension(width, width);

}

}

2、绘制不同图形的Bitmap,供onDraw()绘制的时候用

/*** 绘制不同的图形Bitmap*/

privateBitmap getDrawBitmap(){

Bitmap bitmap=Bitmap.createBitmap(getWidth(), getHeight(),

Bitmap.Config.ARGB_8888);

Canvas canvas= newCanvas(bitmap);

Paint paint= newPaint(Paint.ANTI_ALIAS_FLAG);

paint.setColor(Color.BLACK);if(mType ==TYPE_CIRCLE)

{//绘制圆形

canvas.drawCircle(getWidth() / 2, getWidth() / 2, getWidth() / 2,

paint);

}else if(mType ==TYPE_ROUND)

{//绘制圆角矩形

canvas.drawRoundRect(new RectF(0, 0, getWidth(), getHeight()),

mRoundBorderRadius, mRoundBorderRadius, paint);

}else if(mType ==TYPE_OVAL ){//绘制椭圆

canvas.drawOval(new RectF(0, 0, getWidth(), getHeight()), mPaint);

}returnbitmap;

}

3、在onDraw()中绘制出来

/*** 绘制view的内容*/@Overrideprotected voidonDraw(Canvas canvas) {//TODO Auto-generated method stub//从缓存中取出bitmap

Bitmap bmp = (mBufferBitmap == null ? null:mBufferBitmap.get());if(bmp == null ||bmp.isRecycled()){//如果没有缓存存在的情况//获取drawable

Drawable drawable =getDrawable();//获取drawable的宽高

int dwidth =drawable.getIntrinsicWidth();int dheight =drawable.getIntrinsicHeight();

Log.v("czm","dwidth="+dwidth+",width="+getWidth());if(null !=drawable){

bmp=Bitmap.createBitmap(getWidth(), getHeight(),

Config.ARGB_8888);float scale = 1.0f;//创建画布

Canvas drawCanvas = newCanvas(bmp);//按照bitmap的宽高,以及view的宽高,计算缩放比例;因为设置的src宽高//比例可能和imageview的宽高比例不同,这里我们不希望图片失真;

if(mType ==TYPE_CIRCLE)

{//如果是圆形

scale = getWidth() * 1.0F /Math.min(dwidth, dheight);

}else if (mType == TYPE_ROUND || mType ==TYPE_OVAL)

{//如果是圆角矩形或椭圆//如果图片的宽或者高与view的宽高不匹配,计算出需要缩放的比例;//缩放后的图片的宽高,一定要大于我们view的宽高;所以我们这里取大值;

scale = Math.max(getWidth() * 1.0f /dwidth, getHeight()* 1.0f /dheight);

}

Log.v("czm","scale="+scale);//根据缩放比例,设置bounds,即相当于做缩放图片

drawable.setBounds(0, 0, (int)(scale * dwidth), (int)(scale *dheight));

drawable.draw(drawCanvas);//获取bitmap,即圆形、圆角或椭圆的bitmap

if(mMaskBitmap == null ||mMaskBitmap.isRecycled()){

mMaskBitmap=getDrawBitmap();

}//为paint设置Xfermode 渲染模式

mPaint.reset();

mPaint.setFilterBitmap(false);

mPaint.setXfermode(mXfermode);//绘制不同形状

drawCanvas.drawBitmap(mMaskBitmap, 0, 0,mPaint);

mPaint.setXfermode(null);//将准备好的bitmap绘制出来

canvas.drawBitmap(bmp, 0, 0, null);//bitmap缓存起来,避免每次调用onDraw,分配内存

mBufferBitmap = new WeakReference(bmp);

}

}else{//如果缓存还存在的情况

mPaint.setXfermode(null);

canvas.drawBitmap(bmp,0.0f, 0.0f, mPaint);return;

}

}

4、因为使用了弱引用的缓存技术,所以需要在重写invalidate()方法中做些释放回收资源等处理:

/*** 因为使用了缓存技术,所以需要在invalidate中做些回收释放资源的处理*/@Overridepublic voidinvalidate() {//TODO Auto-generated method stub

mBufferBitmap = null;if(mMaskBitmap != null){

mMaskBitmap.recycle();

mMaskBitmap= null;

}super.invalidate();

}

五、视图布局的实现:

>

android:layout_width="match_parent"android:layout_height="wrap_content"android:gravity="center_horizontal"android:layout_marginTop="10dp"android:layout_marginBottom="55dp"android:orientation="vertical" >

android:id="@+id/cicleImageView"android:layout_width="150dp"android:layout_height="150dp"android:src="@drawable/img1" />

android:id="@+id/roundRectImageView"android:layout_width="125dp"android:layout_height="145dp"android:layout_marginTop="15dp"android:src="@drawable/img2" />

android:id="@+id/ovalImageView"android:layout_width="140dp"android:layout_height="184dp"android:layout_marginTop="15dp"android:src="@drawable/img3" />

六、使用和测试自定义ImageView

上面直接绘制的自定义ImageView写完了,下面就是使用这个自定义的ImageView了,使用方法和普通的ImageView一样,当作普通控件使用即可。

packagecom.czm.myroundimageview;importandroid.app.Activity;importandroid.os.Bundle;public class MainActivity extendsActivity {private XCRoundImageViewByXfermode circleImageView;//圆形图片

private XCRoundImageViewByXfermode roundRectImageView;//圆角矩形图片

private XCRoundImageViewByXfermode ovalImageView;//椭圆图片

@Overrideprotected voidonCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

initViews();

}/*** 初始化Views*/

private voidinitViews(){

circleImageView=(XCRoundImageViewByXfermode)findViewById(R.id.cicleImageView);

roundRectImageView=(XCRoundImageViewByXfermode)findViewById(R.id.roundRectImageView);

ovalImageView=(XCRoundImageViewByXfermode)findViewById(R.id.ovalImageView);

roundRectImageView.setType(XCRoundImageViewByXfermode.TYPE_ROUND);

roundRectImageView.setRoundBorderRadius(100);

ovalImageView.setType(XCRoundImageViewByXfermode.TYPE_OVAL);

ovalImageView.setRoundBorderRadius(50);

}

}

七、照例,最后提供完整源码下载

android 布局圆变椭圆 Android实现自定义圆形 圆角和椭圆ImageView(使用Xfermode图形渲染方法)...

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。