This is a library for making custom shape for your image on your image view. If you want to make a custom shape for your image you need to pass two image, first one is original image and second one is for your shape. First one is your actual image, this image will get the shape as like second image.
简单介绍它的功能即是,第一张图片为显示的图片,第二张图片作为整体显示内容的裁剪图形。源码地址
运行效果如下:

源码分析:
public class Shaper {
/**
* @param context you need to pass the context (ex: Your current activity's instance)
* @param shapedImage pass an image from your drawable folder (Ex: R.drawable.sample_image_name)
* which is shaped for your real image.Your expected image will look like this.
* @param originalImage pass your image from your drawable (Ex: R.drawable.your_image_name).
* This is your original image.
* @param imgView pass an ImageView in which you want to set your expected image.
* @param expectedHeight (int value) this is expected height for your image.
* @param expectedWidth (int value) this is expected width for your image.
*
* ***YOUR SHAPED IMAGE SIZE WILL BE FOR YOUR MDPI DEVICE.
* IF YOUR SHAPED IMAGE SIZE IS 100PX THEN YOU
* NEED TO PASS HEIGHT AND WIDTH 100 FOR YOUR MDPI DEVICE.
* ***100X1.5 FOR YOUR HDPI DEVICE
* ***100X2 FOR YOUR XHDPI DEVICE
* ***100X3 FOR YOUR XXHDPI DEVICE
* ***100X4 FOR YOUR XXXHDPI DEVICE
* ######## height and width can be different ########
* ***
* */
public static void shape(Context context, int originalImage, int shapedImage, ImageView imgView, int expectedHeight, int expectedWidth) {
Bitmap original = BitmapFactory.decodeResource(context.getResources(), originalImage);
Bitmap bitmap = BitmapFactory.decodeResource(context.getResources(), shapedImage);
Bitmap mask = bitmap;
// original = getResizedBitmap(original, expectedHeight, expectedWidth);
original = getResizedBitmap(original, dipToPixels(context, expectedHeight), dipToPixels(context, expectedWidth));
// 获取背景图形的大小
int bitmapHeight = bitmap.getHeight();
int bitmapWidth = bitmap.getWidth();
// 创建背景画布大小为背景图片的大小
Bitmap result = Bitmap.createBitmap(mask.getWidth(), mask.getHeight(), Bitmap.Config.ARGB_8888);
final Canvas mCanvas = new Canvas(result);
// 画笔抗锯齿
Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_IN));
int widthMask = mask.getWidth();
int heightMask = mask.getHeight();
// 绘制显示图片时的偏移量
float centerX = (widthMask - original.getWidth()) * 0.5f;
float centerY = (heightMask - original.getHeight()) * 0.5f;
mCanvas.drawBitmap(original, centerX, centerY, null);
mCanvas.drawBitmap(mask, 0, 0, paint);
paint.setXfermode(null);
imgView.getLayoutParams().height = bitmapHeight;
imgView.getLayoutParams().width = bitmapWidth;
imgView.setScaleType(ImageView.ScaleType.CENTER_CROP);
imgView.setImageBitmap(result);
// 调整ImageView的边界并保持drawable的宽高比
imgView.setAdjustViewBounds(true);
}
/**
* By using this method you can resize your image
*
* @param image pass a bitmap image for resizing.
* @param newHeight pass your expected new height in px (int value).
* @param newWidth pass your expected new width in px (int value).
* */
public static Bitmap getResizedBitmap(Bitmap image, float newHeight, float newWidth) {
int width = image.getWidth();
int height = image.getHeight();
float scaleWidth = ((float) newWidth) / width;
float scaleHeight = ((float) newHeight) / height;
// Matrix类用于对图像进行变换,如:平移、错切
Matrix matrix = new Matrix();
// 对图像进行缩放
matrix.postScale(scaleWidth, scaleHeight);
Bitmap resizedBitmap = Bitmap.createBitmap(image, 0, 0, width, height, matrix, false);
return resizedBitmap;
}
public static float dipToPixels(Context context, float dipValue) {
DisplayMetrics metrics = context.getResources().getDisplayMetrics();
// TypedValue.applyDimesion可以将dp、sp转换成px
// 参数1为转换的单位,参数2要转换的具体数值,参数3为屏幕密度
return TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, dipValue, metrics);
}
}
首先按照用户指定的宽高来裁剪原始图片
original = getResizedBitmap(original,
dipToPixels(context, expectedHeight),
dipToPixels(context, expectedWidth));
- getResizedBitmap()方法中使用了Matrix类具体介绍大家自行移步,Matrix类可以对图片进行变换,包括:
Translate————平移变换
Scale————缩放变换
Rotate————旋转变换
Skew————错切变换
所以学到了一种新的缩放图片的方法
Matrix matrix = new Matrix();
// 对图像进行缩放
matrix.postScale(scaleWidth, scaleHeight);
Bitmap resizedBitmap =
Bitmap.createBitmap(image, 0, 0, width, height, matrix, false);
接下来我们回到主方法再看这段代码
Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
paint.setXfermode(
new PorterDuffXfermode(PorterDuff.Mode.DST_IN));
第一句代码设置画笔的方锯齿标志,第二句代码setXfermode(Xfermode xfermode)该方法用来设置两张图片相交时的模式,系统已经实现的Xfermode子类有以下三个:
1、AvoidXfermode 指定了一个颜色和容差,强制Paint避免在它上面绘图(或者只在它上面绘图)。
2、PixelXorXfermode 当覆盖已有的颜色时,应用一个简单的像素XOR操作。
3、PorterDuffXfermode 这是一个非常强大的转换模式,使用它,可以使用图像合成的16条Porter-Duff规则的任意一条来控制Paint如何与已有的Canvas图像进行交互
即Canvas的图像作为背景,在它上面绘制时显示的效果。
canvas原有的图片 可以理解为背景 就是dst
新画上去的图片 可以理解为前景 就是src
不同的模式效果如下:
所以该框架的源码采用了DstIn的模式,它的绘制图片的具体方法:
mCanvas.drawBitmap(original, centerX, centerY, null);
mCanvas.drawBitmap(mask, 0, 0, paint);
paint.setXfermode(null);
先绘制背景既要显示的original图片,在绘制需要裁减时使用的图形图片。
最后即是对ImageView的布局了,代码如下:
imgView.getLayoutParams().height = bitmapHeight;
imgView.getLayoutParams().width = bitmapWidth;
imgView.setScaleType(ImageView.ScaleType.CENTER_CROP);
imgView.setImageBitmap(result);
// 调整ImageView的边界并保持drawable的宽高比
imgView.setAdjustViewBounds(true);
使用方式也很简单Demo中就有它的使用方法我这里也将代码贴出来,XML视图布局:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context="com.mafstech.imagelibrary.MainActivity">
<ImageView
android:id="@+id/ivOne"
android:layout_width="150dp"
android:layout_height="150dp"/>
<ImageView
android:id="@+id/ivTwo"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_marginTop="114dp"
android:layout_alignParentTop="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:layout_marginRight="16dp"
android:layout_marginEnd="16dp" />
<ImageView
android:id="@+id/ivThree"
android:layout_width="150dp"
android:layout_height="150dp"
android:layout_below="@+id/ivOne"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_marginTop="66dp" />
</RelativeLayout>
MainActivity:
public class MainActivity extends AppCompatActivity {
ImageView ivOne, ivTwo, ivThree;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ivOne = (ImageView) findViewById(R.id.ivOne);
ivTwo = (ImageView) findViewById(R.id.ivTwo);
ivThree = (ImageView) findViewById(R.id.ivThree);
/**
* This tasks are only for HDPI device. You need to convert all height and width to any other dpi as your expectation
* */
Shaper.shape(MainActivity.this, R.drawable.flag, R.drawable.tri, ivOne, 150, 150);
Shaper.shape(MainActivity.this, R.drawable.flag, R.drawable.pro_pic, ivTwo, 100, 100);
Shaper.shape(MainActivity.this, R.drawable.flag, R.drawable.shape2, ivThree, 150, 150);
}
}
好了学习该框架的源码即到这里,希望有一天开发当中能够使用。