Android 背景图片的缩放

ONE Goal ,ONE Passion !

我们看到一些效果,控件中的背景图片会慢慢变大,但是控件不会随着图片的放大而变大.效果如下:

分析:

想让图片变大,而且控件本身大小不能改变,那么就要改变图片自身大小,而不能改变控件大小.

实现原理:

1,首先拿到我们要放大的图片bitmap.

2,使用Bitmap.createBitmap().创建一个bitmap的副本.

3,使用matrix去改变图片副本本身大小

4,使用ValueAnimator去根据变化率将副本绘制出来.

自定义View

public class ScaleImage extends View {

/**

* 设置的背景图片

*/

private Drawable background;

/**

* 画布的背景图片

*/

private Bitmap bitmapCopy;

/**

* 跟随动画实时更新的 放大比例

*/

float scal = 1f;

/**

* 让原图放大 1.3倍,这个值可以随意更改.目的是让原图填充满控件

*/

private float orgFrac = 1.3f;

/**

* 控件宽

*/

private int widthSize;

/**

* 控件高

*/

private int heightSize;

private float downY;

private float downX;

public ScaleImage(Context context) {

this(context, null);

}

public ScaleImage(Context context, AttributeSet attrs) {

this(context, attrs, 0);

}

public ScaleImage(Context context, AttributeSet attrs, int defStyleAttr) {

super(context, attrs, defStyleAttr);

}

@Override

protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {

super.onMeasure(widthMeasureSpec, heightMeasureSpec);

widthSize = MeasureSpec.getSize(widthMeasureSpec);

heightSize = MeasureSpec.getSize(heightMeasureSpec);

}

@Override

protected void onDraw(final Canvas canvas) {

super.onDraw(canvas);

if (background != null) {

BitmapDrawable bd = (BitmapDrawable) background;

final Bitmap bitmap = bd.getBitmap();

final Matrix matrix = new Matrix();

bitmapCopy = Bitmap.createBitmap(bitmap, 0, 0,

bitmap.getWidth(), bitmap.getHeight(),

matrix, true);

/**

* float sx, float sy, float px, float py

*

* sx,sy x,y方向缩放比例

* px,py 以px py为轴心进行缩放

* 放大比例加了默认的orgFrac.是为了在还没有开始缩放时

* 放图片能够填充控件.如果图片过小的话,可能控件和图片

* 之间会有边界空白

*

* 注意: 这里的px py :matrix作用于哪个对象上,那么px,py就是对象上的坐标点

* 如 : 这里就是 bitmapCopy 上的px,py坐标点.

*/

matrix.setScale(orgFrac + scal, 1, bitmapCopy.getWidth() / 2, bitmapCopy.getHeight() / 2);

canvas.drawBitmap(bitmapCopy, matrix, null);

}

}

/**

* 开始缩放

*

* @param drawableId 需要放大的背景图片

*/

public void startScale(int drawableId) {

background = getResources().getDrawable(drawableId);

if (background == null) {

throw new RuntimeException("background must not null");

} else {

ValueAnimator animator = ValueAnimator.ofFloat(0, 1);

animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {

@Override

public void onAnimationUpdate(ValueAnimator animation) {

float fraction = (float) animation.getAnimatedValue();

scal = (float) (0.5 * fraction);

invalidate();

}

});

animator.setDuration(5000);

animator.setInterpolator(new BounceInterpolator());

animator.start();

}

}

@Override

public boolean onTouchEvent(MotionEvent event) {

switch (event.getAction()) {

case MotionEvent.ACTION_DOWN:

downY = event.getY();

downX = event.getX();

break;

case MotionEvent.ACTION_UP:

float upY = event.getY();

float upX = event.getX();

if (Math.abs(upY - downY) < 5 && Math.abs(upX - downX) < 5) {

listener.backgroundClick();

}

break;

}

return true;

}

OnBackgroundCilckListener listener;

/**

* 点击事件的监听

*

* @param listener

*/

public void addBackgroundCilckListener(OnBackgroundCilckListener listener) {

this.listener = listener;

}

public interface OnBackgroundCilckListener {

void backgroundClick();

}

}

跑起来

image = (ScaleImage) findViewById(R.id.image);

image.startScale(R.drawable.parallax_img);

image.addBackgroundCilckListener(new ScaleImage.OnBackgroundCilckListener() {

@Override

public void backgroundClick() {

}

});

小提琴家

matrix使用待续

好了.直接使用控件,我们将资源文件中的Drawable传入就可以了.

感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！