[转载] Android之遮罩功能的实现

最新推荐文章于 2025-04-10 00:15:00 发布

gexiaowu

最新推荐文章于 2025-04-10 00:15:00 发布

阅读量2.1k

点赞数

分类专栏： Android

Android 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一种在Android中实现圆形图片显示的方法，通过自定义组件和属性，利用遮罩技术将正方形图片转换为圆形。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

转载地址：http://bbs.51cto.com/thread-1031415-1.html 谢谢作者：xuzw13

上午有个哥们问我android有没有获取圆形图片的方法，就是要把正方形的图片变成圆形的来显示。最近也有再搞flash，所以第一反应就是遮罩，android里面自己也没搞过。google搜索“android mask“挺多资料的,这里把例子与大家分享。先上效果图：

未命名.jpg (21.63 KB)

2013-4-27 12:52

好了现在开始代码部分，这里使用了自定义组件以及自定义属性的方式来进行编码

。

1、添加资源文件：attrs.xml

复制内容到剪贴板

代码:

<?xml version="1.0" encoding="utf-8"?>
 < resources>
     <declare-styleable name="MaskImage">
         <!-- Identifier for the image that represents the Imageview's content. -->
         <attr name="image" format="reference" />
         <!-- crop Imageview's content same as mask -->
         <attr name="mask" format="reference" />
 
     </declare-styleable>
 < /resources>

2、创建自定义组件MaskImage.java

复制内容到剪贴板

代码:

package com.xzw.mask.widget;
 
 import android.content.Context;
 import android.content.res.TypedArray;
 import android.graphics.Bitmap;
 import android.graphics.Bitmap.Config;
 import android.graphics.BitmapFactory;
 import android.graphics.Canvas;
 import android.graphics.Paint;
 import android.graphics.PorterDuff;
 import android.graphics.PorterDuffXfermode;
 import android.util.AttributeSet;
 import android.widget.ImageView;
 
 import com.xzw.mask.R;
 
 public class MaskImage extends ImageView{
         int mImageSource=0;
         int mMaskSource=0; 
         RuntimeException mException;
 
         public MaskImage(Context context, AttributeSet attrs) {
                 super(context, attrs);
                 TypedArray typedArray = getContext().obtainStyledAttributes(attrs, R.styleable.MaskImage, 0, 0);
                 mImageSource = typedArray.getResourceId(R.styleable.MaskImage_image, 0);
                 mMaskSource = typedArray.getResourceId(R.styleable.MaskImage_mask, 0);
 
                 if (mImageSource == 0 || mMaskSource == 0) {
                         mException = new IllegalArgumentException(typedArray.getPositionDescription() + 
                                         ": The content attribute is required and must refer to a valid image.");
                 }
 
                 if (mException != null) 
                         throw mException;
        /**
         * 主要代码实现
         */
                 //获取图片的资源文件
                 Bitmap original = BitmapFactory.decodeResource(getResources(), mImageSource);
                 //获取遮罩层图片
                 Bitmap mask = BitmapFactory.decodeResource(getResources(), mMaskSource);
                 Bitmap result = Bitmap.createBitmap(mask.getWidth(), mask.getHeight(), Config.ARGB_8888);
              //将遮罩层的图片放到画布中
                 Canvas mCanvas = new Canvas(result);
                 Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
                 //设置两张图片相交时的模式 
                 paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_IN));
                 mCanvas.drawBitmap(original, 0, 0, null);
                 mCanvas.drawBitmap(mask, 0, 0, paint);
                 paint.setXfermode(null);
                 setImageBitmap(result);
                 setScaleType(ScaleType.CENTER); 
                 
                 typedArray.recycle();
         }
 }

3、在布局文件中添加

复制内容到剪贴板

代码:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:maskimage="http://schemas.android.com/apk/res/com.xzw.mask"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     android:orientation="vertical" >
 
     <TextView
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:text="以下为正常图片" />
     <!-- 无遮罩图片 -->
 
     <ImageView
         android:id="@+id/imageview1"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:src="@drawable/icon_t" />
 
     <TextView
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:text="以下为遮罩图片变成圆形的图片" />
     
     <!-- 有遮罩图片 --> 
     <com.xzw.mask.widget.MaskImage
         android:id="@+id/imageview_id"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         maskimage:image="@drawable/icon_t"
         maskimage:mask="@drawable/circle" />
 
 < /LinearLayout>