|
實現(xiàn)左右兩個頁面，左邊頁面作為右邊的附屬頁，并且可以拖動縮放左邊的頁面，左邊的頁面有紙張折疊的動畫效果。
由于android系統(tǒng)的動畫只有默認(rèn)的4種，即：移動、縮放、旋轉(zhuǎn)、拉伸（傾斜），無法滿足折疊的要求。
這些動畫都是一個時間段執(zhí)行完的，動畫開始后，無需再操作，直到動畫完成，這里的折疊需要有點擊屏幕拖動的折疊效果。
根據(jù)上述4種動畫的原理（其中拉伸比較相仿），都是需要View對象重新執(zhí)行onDraw方法重新畫圖。
我們可以獲取右邊頁面的圖片效果，再把這張圖重新按需要重新畫出來。但是對一張圖的拉伸無法達(dá)到折疊效果，由于折疊效果圖是對稱的兩個梯形組成的，我們可以分別畫兩個梯形來實現(xiàn)。
實際步驟：
1.獲取左邊頁面的圖形，把圖形按左右兩個分為兩個圖形。
2.在左邊頁面上面再添加一個View，設(shè)為V1，即覆蓋一個View，用于畫梯形。
3.在最頂層添加一個View，用于監(jiān)聽onTouch事件
4.當(dāng)onTouch事件移動時，縮放左邊的頁面寬度，這時會自動觸發(fā)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;
}
創(chuàng)建左右兩個圖形的方法
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，監(jiān)聽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="http://blogs.com/48347/new" rel="nofollow"/>
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);
}
|
