实现左右两个页面,左边页面作为右边的附属页,并且可以拖动缩放左边的页面,左边的页面有纸张折叠的动画效果。
由于android系统的动画只有默认的4种,即:移动、缩放、旋转、拉伸(倾斜),无法满足折叠的要求。
这些动画都是一个时间段执行完的,动画开始后,无需再操作,直到动画完成,这里的折叠需要有点击屏幕拖动的折叠效果。
根据上述4种动画的原理(其中拉伸比较相仿),都是需要View对象重新执行onDraw方法重新画图。
我们可以获取右边页面的图片效果,再把这张图重新按需要重新画出来。但是对一张图的拉伸无法达到折叠效果,由于折叠效果图是对称的两个梯形组成的,我们可以分别画两个梯形来实现。
实际步骤:
1.获取左边页面的图形,把图形按左右两个分为两个图形。
2.在左边页面上面再添加一个View,设为V1,即覆盖一个View,用于画梯形。
3.在最顶层添加一个View,用于监听onTouch事件
4.当onTouch事件移动时,缩放左边的页面宽度,这时会自动触发V1的onDraw事件。
获取左边图形的方法,
private Bitmap getBitmap() {
int width = this.getWidth();
int height = this.getHeight();
Bitmap returnedBitmap = null;
if (width > 0 && height > 0)
returnedBitmap = getBitmapFromView(r1, width, height);
return returnedBitmap;
}
private Bitmap getBitmapFromView(View view, int width, int height) {
int widthSpec = View.MeasureSpec.makeMeasureSpec(width, View.MeasureSpec.EXACTLY);
int heightSpec = View.MeasureSpec.makeMeasureSpec(height, View.MeasureSpec.EXACTLY);
view.measure(widthSpec, heightSpec);
view.layout(0, 0, width, height);
Bitmap bitmap = new WeakReference<Bitmap>(Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888)).get();
Canvas canvas = new Canvas(bitmap);
view.draw(canvas);
return bitmap;
}
创建左右两个图形的方法
private Bitmap getBitmapLeftOrRight(Bitmap bitmap, boolean isLeft) {
Bitmap returnedBitmap = null;
if (bitmap == null)
return returnedBitmap;
int width = bitmap.getWidth();
int height = bitmap.getHeight();
returnedBitmap = Bitmap.createBitmap(bitmap, isLeft ? 0 : width / 2, 0, width / 2, height);
return returnedBitmap;
}
添加View,V1
view = new View(context) {
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
drawBitmap(canvas);
}
};
view.setBackgroundColor(Color.BLACK);
r1.addView(view);
顶层添加View,监听onTouch事件
l2 = new View(context);
l2.setOnTouchListener(new OnTouchListener() {
@Override
public boolean onTouch(View v, MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
isAutoMove = false;
isOpen = r1.getWidth() > 0;
lastX = event.getX();
resultMove = (isOpen && lastX > riwidth - 50) || (!isOpen && lastX < 100);
isMove = false;
break;
case MotionEvent.ACTION_MOVE:
isMove = true;
xvalue = event.getX() - lastX;
move();
break;
case MotionEvent.ACTION_UP:
autoMove();
break;
}
lastX = event.getX();
return resultMove;
}
});
addView(l2);
private void move() {
int width = r1.getWidth();
if (width <= riwidth && width >= 0) {
initeBitmap();
setView(true);
setR1Width();
}
}
private void drawBitmap(Canvas canvas) {
if (this.isMove) {
int width = r1.getWidth();
drawBitmap(canvas, true, width);
drawBitmap(canvas, false, width);
}
}
private void setR1Width() {
if (r1 == null || !isMove)
return;
int width = r1.getWidth() + (int) xvalue;
if (width < 0)
width = 0;
if (width > riwidth)
width = riwidth;
ViewGroup.LayoutParams param = r1.getLayoutParams();
param.width = width;
r1.setLayoutParams(param);
}
private void drawBitmap(Canvas canvas, boolean isLeft, int width) {
Bitmap image = isLeft ? bitmapLeft : bitmapRight;
if (image == null)
return;
int WIDTH = image.getWidth();
int HEIGHT = image.getHeight();
Matrix headingMatrix = new Matrix();
int p1x = 0;
int p1y = 0;
int p2x = WIDTH;
int p2y = p1y;
int p3x = p2x;
int p3y = HEIGHT;
int p4x = p1x;
int p4y = p3y;
float[] src = new float[]{p1x, p1y, p2x, p2y, p3x, p3y, p4x, p4y};
int flat_height = (int)(FLAT_HEIGHT * (1 - (double)width / riwidth));
p1x = isLeft ? 0 : width / 2;
p1y = isLeft ? 0 : flat_height;
p2x = isLeft ? width / 2 : width;
p2y = isLeft ? flat_height : 0;
p3x = p2x;
p3y = isLeft ? HEIGHT - flat_height : HEIGHT;
p4x = p1x;
p4y = isLeft ? HEIGHT : HEIGHT - flat_height;
float[] dst = new float[]{p1x, p1y, p2x, p2y, p3x, p3y, p4x, p4y};
headingMatrix.setPolyToPoly(src, 0, dst, 0, src.length >> 1);
canvas.drawBitmap(image, headingMatrix, solidPaint);
}