android中圖片翻頁效果簡單的實現方法

來源:互聯網
上載者:User

複製代碼 代碼如下:public class PageWidget extends View {
private Bitmap foreImage;
private Bitmap bgImage;
private PointF touchPt;
private int screenWidth;
private int screenHeight;
private GradientDrawable shadowDrawableRL;
private GradientDrawable shadowDrawableLR;
private ColorMatrixColorFilter mColorMatrixFilter;
private Scroller mScroller;
private int lastTouchX;

public PageWidget(Context context) {
super(context);
// TODO Auto-generated constructor stub
touchPt = new PointF(-1,-1);

//ARGB A(0-透明,255-不透明)
int[] color = { 0xb0333333 ,0x00333333};
shadowDrawableRL = new GradientDrawable(GradientDrawable.Orientation.RIGHT_LEFT, color);
shadowDrawableRL.setGradientType(GradientDrawable.LINEAR_GRADIENT);

shadowDrawableLR = new GradientDrawable(GradientDrawable.Orientation.LEFT_RIGHT, color);
shadowDrawableLR.setGradientType(GradientDrawable.LINEAR_GRADIENT);

float array[] = { 0.55f, 0, 0, 0, 80.0f,
,0.55f, 0, 0, 80.0f,
, 0,0.55f, 0, 80.0f,
, 0, 0, 0.2f, 0};
ColorMatrix cm = new ColorMatrix();
cm.set(array);
/*
* |A*0.55 + 80|
* |R*0.55 + 80|
* |G*0.55 + 80|
* |B*0.2|
*/
// cm.setSaturation(0);
mColorMatrixFilter = new ColorMatrixColorFilter(cm);

//利用捲軸來實現接觸點放開後的動畫效果
mScroller = new Scroller(context);
}

@Override
public void computeScroll() {
// TODO Auto-generated method stub
if (mScroller.computeScrollOffset()) {
touchPt.x = mScroller.getCurrX();
touchPt.y = mScroller.getCurrY();

postInvalidate();
}
else{
// touchPt.x = -1;
// touchPt.y = -1;
}

super.computeScroll();
}

public void SetScreen(int screenWidth,int screenHeight){
this.screenWidth = screenWidth;
this.screenHeight = screenHeight;
}

public Bitmap getForeImage() {
return foreImage;
}

public void setForeImage(Bitmap foreImage) {
this.foreImage = foreImage;
}

public Bitmap getBgImage() {
return bgImage;
}

public void setBgImage(Bitmap bgImage) {
this.bgImage = bgImage;
}

@Override
protected void onDraw(Canvas canvas) {
// TODO Auto-generated method stub
drawPageEffect(canvas);
super.onDraw(canvas);
}

/**
* 畫前景圖片
* @param canvas
*/
private void drawForceImage(Canvas canvas) {
// TODO Auto-generated method stub
Paint mPaint = new Paint();

if (foreImage!=null) {
canvas.drawBitmap(foreImage, 0, 0, mPaint);
}
}

/**
* 畫背景圖片
* @param canvas
*/
private void drawBgImage(Canvas canvas,Path path) {
// TODO Auto-generated method stub
Paint mPaint = new Paint();

if (bgImage!=null) {
canvas.save();

//只在與路徑相交處畫圖
canvas.clipPath(path,Op.INTERSECT);
canvas.drawBitmap(bgImage, 0, 0, mPaint);
canvas.restore();
}
}

/**
* 畫翻頁效果
* @param canvas
*/
private void drawPageEffect(Canvas canvas) {
// TODO Auto-generated method stub
drawForceImage(canvas);
Paint mPaint = new Paint();
if (touchPt.x!=-1 && touchPt.y!=-1) {
//翻頁左側書邊
canvas.drawLine(touchPt.x, 0, touchPt.x,screenHeight, mPaint);

//左側書邊畫陰影
shadowDrawableRL.setBounds((int)touchPt.x - 20, 0 ,(int)touchPt.x, screenHeight);
shadowDrawableRL.draw(canvas);

//翻頁對摺處
float halfCut = touchPt.x + (screenWidth - touchPt.x)/2;
canvas.drawLine(halfCut, 0, halfCut, screenHeight, mPaint);

//對摺處左側畫翻頁頁圖片背面
Rect backArea = new Rect((int)touchPt.x,0,(int)halfCut,screenHeight);
Paint backPaint = new Paint();
backPaint.setColor(0xffdacab0);
canvas.drawRect(backArea, backPaint);

//將翻頁圖片正面進行處理水平翻轉並平移到touchPt.x點
Paint fbPaint = new Paint();
fbPaint.setColorFilter(mColorMatrixFilter);
Matrix matrix = new Matrix();

matrix.preScale(-1,1);
matrix.postTranslate(foreImage.getWidth() + touchPt.x,0);

canvas.save();
canvas.clipRect(backArea);
canvas.drawBitmap(foreImage, matrix, fbPaint);
canvas.restore();

//對摺處畫左側陰影
shadowDrawableRL.setBounds((int)halfCut - 50, 0 ,(int)halfCut, screenHeight);
shadowDrawableRL.draw(canvas);

Path bgPath = new Path();

//可以顯示背景圖的地區
bgPath.addRect(new RectF(halfCut,0,screenWidth,screenHeight), Direction.CW);

//對摺出右側畫背景
drawBgImage(canvas,bgPath);

//對摺處畫右側陰影
shadowDrawableLR.setBounds((int)halfCut, 0 ,(int)halfCut + 50, screenHeight);
shadowDrawableLR.draw(canvas);
}
}

@Override
public boolean onTouchEvent(MotionEvent event) {
// TODO Auto-generated method stub
if (event.getAction() == MotionEvent.ACTION_DOWN) {
touchPt.x = event.getX();
touchPt.y = event.getY();
}
else if(event.getAction() == MotionEvent.ACTION_MOVE){
lastTouchX = (int)touchPt.x;
touchPt.x = event.getX();
touchPt.y = event.getY();

postInvalidate();
}
else if(event.getAction() == MotionEvent.ACTION_UP){
int dx,dy;

dy = 0;

//向右滑動
if (lastTouchX<touchPt.x) {
dx = foreImage.getWidth() - (int)touchPt.x + 30;
}
else{
//向左滑動
dx = -(int)touchPt.x - foreImage.getWidth();
}

mScroller.startScroll((int)touchPt.x,(int)touchPt.y,dx,dy,1000);
postInvalidate();
}

//必須為true,否則無法擷取ACTION_MOVE及ACTION_UP事件
return true;
}
}

public class PageActivity extends Activity {
protected void onCreate(android.os.Bundle savedInstanceState) {
requestWindowFeature(Window.FEATURE_NO_TITLE);

PageWidget pageWidget = new PageWidget(this);

Display display = getWindowManager().getDefaultDisplay();
int width = display.getWidth();
int height = display.getHeight();

pageWidget.SetScreen(width, height);

Bitmap bm1 = BitmapFactory.decodeResource(getResources(), R.drawable.pre7);
Bitmap bm2 = BitmapFactory.decodeResource(getResources(), R.drawable.after7);

Bitmap foreImage = Bitmap.createScaledBitmap(bm1, width, height,false);
Bitmap bgImage = Bitmap.createScaledBitmap(bm2, width, height,false);

pageWidget.setBgImage(bgImage);
pageWidget.setForeImage(foreImage);

setContentView(pageWidget);

super.onCreate(savedInstanceState);
};
}

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.