你可能学到的一些知识
- 从文件解码时降低采样率节省内存
- 从原图片生成center_crop的目标图片
- BitmapShader的使用
- Matrix的使用
- 和一些transition小技巧理解坐标原点很重要
效果图
Talk is Cheap , Show You Code
采样率计算
private int downSample(int sourceWidth, int sourceHeight, int targetWidth, int targetHeight) {
int sample = 0;
while (true) {
if (sourceWidth / Math.pow(2, sample + 1) > targetWidth && sourceHeight / Math.pow(2, sample + 1) > targetHeight) {
sample++;
} else {
return (int) Math.pow(2, sample);
}
}
}
根据计算出的采样率解码出图片并以center_crop模式生成目标图片
private Bitmap decodeBitmap(int resourceId) {
BitmapFactory.Options options = new BitmapFactory.Options();
options.inJustDecodeBounds = true;
BitmapFactory.decodeResource(douYinView.get().getResources(), R.drawable.test1, options);
int sourceWidth = options.outWidth;
int sourceHeight = options.outHeight;
int sample = downSample(sourceWidth, sourceHeight, targetWidth, targetHeight);
options.inJustDecodeBounds = false;
options.inSampleSize = sample;
options.inPreferredConfig = Bitmap.Config.RGB_565;
Bitmap bitmap = BitmapFactory.decodeResource(douYinView.get().getResources(), resourceId, options);
sourceWidth = bitmap.getWidth();
sourceHeight = bitmap.getHeight();
//以center_crop模式生成目标图片
float targetWidth = this.targetWidth;
float targetHeight = this.targetHeight;
float wRatio = targetWidth / sourceWidth;
float hRatio = targetHeight / sourceHeight;
float scale = Math.max(wRatio, hRatio);
int startX = 0;
int startY = 0;
if (wRatio > hRatio) {
startY = (int) ((sourceHeight - targetHeight / scale) * 0.5f);
} else if (wRatio < hRatio) {
startX = (int) ((sourceWidth - targetWidth / scale) * 0.5f);
}
matrix.setScale(scale, scale);
bitmap = Bitmap.createBitmap(bitmap, startX, startY, (int) (targetWidth / scale), (int) (targetHeight / scale), matrix, true);
return bitmap;
}
准备工作做好了我们开始让这些图片显示出来吧因为我们是自定义view且是wrap_content的所以我们来看下两个比较重要的方法
我们来看下onMeasure 根据当前数量计算出这个控件的width
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
setMeasuredDimension(count * circleRadius * 2 - (count - 1) * overlay, circleRadius * 2);
}
在看onDraw逻辑之前我们先来看看控制动画的参数expandRatio
valueAnimator = ValueAnimator.ofFloat(0f, 1f);
valueAnimator.setDuration(800);
valueAnimator.setInterpolator(new AccelerateDecelerateInterpolator());
valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
expandRatio = (Float) animation.getAnimatedValue();
invalidate();
}
});
valueAnimator.addListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationRepeat(Animator animation) {
super.onAnimationRepeat(animation);
currentCount++;
}
@Override
public void onAnimationStart(Animator animation) {
super.onAnimationStart(animation);
currentCount++;
}
});
valueAnimator.setRepeatMode(ValueAnimator.RESTART);
valueAnimator.setRepeatCount(count - 1);
onDraw 根据expandRatio进行绘制从而实现动画效果,这里有bitmapShader的使用Matrix的使用还有一些绘制小技巧通过canvas.save(),canvas.restore()会使得我们的逻辑清晰许多
protected void onDraw(Canvas canvas) {
for (int i = 0; i < currentCount; i++) {
paint.setShader(bitmapShaders[currentCount - 1 - i]);
if (i == 0) {
canvas.translate(getWidth() - circleRadius, circleRadius);
canvas.save();
canvas.translate(-circleRadius, -circleRadius);
matrix.setScale(expandRatio, expandRatio, circleRadius * 2, circleRadius);
paint.getShader().setLocalMatrix(matrix);
canvas.drawCircle(circleRadius * 2 - circleRadius * expandRatio, circleRadius, circleRadius * expandRatio, paint);
canvas.restore();
} else {
canvas.save();
paint.getShader().setLocalMatrix(null);
canvas.translate(-((i - 1) * (circleRadius * 2 - overlay) + (circleRadius * 2 - overlay) * expandRatio), 0);
canvas.translate(-circleRadius, -circleRadius);
canvas.drawCircle(circleRadius, circleRadius, circleRadius, paint);
canvas.restore();
}
}
}
查看源码
