【转】Android 翻页效果 电子书

最新推荐文章于 2016-04-22 10:41:32 发布
最新推荐文章于 2016-04-22 10:41:32 发布
阅读量91 收藏
点赞数
分类专栏： android 文章标签： 移动开发 java ui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lijian_nhy/article/details/84002977
版权

先上个效果图：

 

效果还是很不错的，不过与ibook那个效果比起来，还是有差距的。应为这个没用到openGL做3D效果，只是用的2d的canvas画布去画的 view，添加了阴影效果，还是挺有立体感的。而且比较流畅。openGL实现肯定效果会更好，不过就我目前的技术实力，实现希望还是渺茫的。

废话少说，还是上代码吧：

这里需要两个UI的view类和一个使用方法的demo 。
第一个pageTurnerView.java ：


public class PageTurnerViewP1 extends RelativeLayout{
 
	  private static final int CORNER_RIGHT_MASK = 1;
	  private static final int CORNER_TOP_MASK = 2;
	  public static final int CORNER_BOTTOM_LEFT = 0;
	  public static final int CORNER_BOTTOM_RIGHT = 1;
	  public static final int CORNER_TOP_LEFT = 2;
	  public static final int CORNER_TOP_RIGHT = 3;
	  private static final int INVALIDATE = 1;
	  private static final int INITIAL_TIME_DELAY = 100;
	  private static final int TIME_DELAY = 10;
//	  private static final int TIME_STEPS = 30;
	  private boolean mPageTurning;
	  private boolean mStepping;
	  public long mNextTime;
	  private int mTimeStep;
	  private int mDrawnTimeStep;
	  private int mCorner;
	  private Drawable mBackPage;
	  private Drawable mPageBackground;
	  private Path mForegroundPath;
	  private Path mBackPagePath;
	  private Path mBackgroundPath;
	  private float mRotation;
	  private Rect mChildRect = new Rect();
	  private int mOuterOffsetX;
	  private int mOuterOffsetY;
	  public float mPivotX;
	  private int mPageId;
	  private PageViewP1 mPage;
	  private PointF mPageTurnCorner = new PointF();
	  private PointF mOppositeCorner = new PointF();
	  private PointF mPageDim = new PointF();
	  private int mStepLen = 1;
	  public static final int KEEP = 0;
	  public static final int NEXT = 1;
	  public static final int LAST = 2;
	  public int mWhere = KEEP;
	  public boolean isBgInit = true;
	  public boolean isBackInit = true;
	  private  float ax,ay,bx,by,cx,cy,dx,dy,ex,ey,c0x,c0y;
	  private int mMaxStep=30;
	  public final Handler mHandler = new Handler() {
		  public void handleMessage(Message msg) {
			  if (msg.what != 1) { return; }
//			  PageTurnerViewP1.this.invalidate();
			  refreshUI();
//			  PageTurnerViewP1.this.invalidate((int)bx, (int)ay, (int)dx, (int)dy);
			  if (PageTurnerViewP1.this.mStepping) { return; }
			  msg = obtainMessage(1);
			  long current = SystemClock.uptimeMillis();
			  if (PageTurnerViewP1.this.mNextTime < current) { 				  //PageTurnerViewP1.access$102(PageTurnerViewP1.this, current + 10L); 				 PageTurnerViewP1.this.mNextTime= current + 5L; 			  } 			  sendMessageAtTime(msg, PageTurnerViewP1.this.mNextTime); 			  //PageTurnerViewP1.access$114(PageTurnerViewP1.this, 10L); 				PageTurnerViewP1.this.mNextTime+= 5L; 		  } 	  }; 	 	  public PageTurnerViewP1(Context context) { 		  super(context); 		  Log.i("==================== PageTurnerViewP1(Context context) =================", "" + this); 	  } 	  public PageTurnerViewP1(Context context, AttributeSet attrs) { 		  super(context, attrs); 			 		  this.mPageId = -1; 			this.mCorner = -1; 	  } 	  protected void onFinishInflate() { 		  super.onFinishInflate(); 		  if (this.mPageId != -1) { 			  this.mPage = ((PageViewP1)findViewById(this.mPageId)); 			  if (this.mPage != null) 				  this.mPage.setPageTurner(this); 		  } 	  } 	  public void setPageId(int pageId) { 		  this.mPageId = pageId; 		  this.mPage = ((PageViewP1)findViewById(this.mPageId)); 		  if (this.mPage != null) 			  this.mPage.setPageTurner(this); 	  } 	  public int getPageId() { 		  return this.mPageId; 	  } 	  public void setPage(PageViewP1 pageViewP1) { 		  this.mPage = pageViewP1; 	  } 	  public PageViewP1 getPage() { 		  return this.mPage; 	  } 	  public void setCorner(int corner) { 		  this.mCorner = corner; 	  } 	  public int getCorner() { 		  return this.mCorner; 	  } 	  protected void dispatchDraw(Canvas canvas) { 		   			Log.v("log dispatchDraw:", "drawing back page"+mPageTurning); //		  if ((this.mPageTurning) && (this.mPage != null) && (computePageTurn())) { 		  if ((computePageTurn())&& (this.mPageTurning) && (this.mPage != null) ) { 			  this.mPage.setClipPath(this.mForegroundPath); 		  } 		  super.dispatchDraw(canvas); 		  if (this.mPageTurning) { 			  drawBackground(canvas); 			  drawBackPage(canvas); 			   			  if (!updateTimeStep()) { 				  this.mHandler.removeMessages(1); 				  if (this.mPage != null) { 					  this.mPage.onPageTurnFinished(canvas); 				  } 				  this.mPageTurning = false; 				  this.mStepping = false; 				  invalidate(); 			  } 		  } 	  } 	  public void startPageTurn(int mTimeStep) { 		  if ((this.mPage == null) && (this.mPageId != -1)) { 			  this.mPage = ((PageViewP1)findViewById(this.mPageId)); 		  } 		  if (this.mPage == null) { 			  return; 		  } 		  this.mPage.setPageTurner(this); 		  Drawable d = this.mPage.getPageBackground(); 		  if (d != null) { 			  this.mPageBackground = d; 		  } 		  d = this.mPage.getBackPage(); 		  if (d != null) { 			  this.mBackPage = d; 		  } 		  int corner = this.mPage.getCorner(); 		  if (corner != -1) { 			  this.mCorner = corner; 		  } //		  this.mStepping=false; 		  this.mPageTurning = true; 		  this.mTimeStep = mTimeStep; 		  this.mDrawnTimeStep = -1; 		  Message msg = this.mHandler.obtainMessage(1); 		  this.mNextTime = (SystemClock.uptimeMillis() + 5L); 		  this.mHandler.sendMessageAtTime(msg, this.mNextTime); 	  } 	  public void stepPageTurn() { 		  if (!this.mStepping) { 			  this.mStepping = true; 			  startPageTurn(this.mTimeStep); 		  } else { //			 			  refreshUI(); 		  } 	  } 	  public void refreshUI(){ 		  computePageTurn(); //		  		  this.invalidate(); 	  } 	  private void sendUIhandler(){ 		  Message msg = this.mHandler.obtainMessage(1); 		  this.mNextTime = (SystemClock.uptimeMillis() + 30L); 		  this.mHandler.sendMessageAtTime(msg, this.mNextTime); 	  } 	  private boolean updateTimeStep() { 		  if (this.mTimeStep >mMaxStep || this.mTimeStepthis.mMaxStep)) {
		  if ( (this.mTimeStep this.mMaxStep)) {
			  return false;
		  }
		  if (this.mPage == null) {
			  return false;
		  }
		  this.mDrawnTimeStep = this.mTimeStep;
		  View child = this.mPage.getChildAt(0);
		  child.getDrawingRect(this.mChildRect);
//		  this.mOuterOffsetX = (child.getLeft() - getLeft());
//		  this.mOuterOffsetY = (child.getTop() - getTop());
		  this.mOuterOffsetX = 0;
		  this.mOuterOffsetY = 0;
 
		  float width = this.mChildRect.right;
		  float height = this.mChildRect.bottom;
		  if(!mStepping){
			  this.mPivotX = (this.mTimeStep / 30.0f * width);
		  }
		  this.mForegroundPath = new Path();
		  this.mBackPagePath = new Path();
		  this.mBackgroundPath = new Path();
		  float slope = width / (this.mPivotX - width);
		  float y = this.mPivotX * slope;
 
		  this.mPageTurnCorner.x = 0.0F;
		  this.mPageTurnCorner.y = height;
		  this.mOppositeCorner.x = width;
		  this.mOppositeCorner.y = 0.0F;
		  float x0 = this.mPivotX;
		  float cornerIntersect = height * width / (height + width);
		  if ((this.mCorner & 0x1) != 0) {
			  this.mPageTurnCorner.x = width;
			  this.mOppositeCorner.x = 0.0F;
			  x0 = width - x0;
		  }
 
		  if ((this.mCorner & 0x2) != 0) {
			  this.mPageTurnCorner.y = 0.0F;
			  this.mOppositeCorner.y = height;
		  }
 
		  this.mPageDim.x = width;
		  this.mPageDim.y = height;
		  float page_slope;
 
		  if (this.mPivotX 2){
			LinearGradient grad = new LinearGradient(
					ex,ey,ex+(dx-ex)/4,ey+(dy-ey)/4,R.color.gray3,Color.TRANSPARENT,Shader.TileMode.CLAMP);
			Paint p=new Paint();
		    p.setShader(grad);
//		    p.setAlpha(120);
		    canvas.drawPath(this.mBackgroundPath,p);
		    //end test
		  	}
		  canvas.restore();
 
	  }
 
	  private void drawBackPage(Canvas canvas) {
		  float width = this.mChildRect.right;
		  float height = this.mChildRect.bottom;
		  canvas.save();
//		  canvas.setDrawFilter(new PaintFlagsDrawFilter(0, Paint.ANTI_ALIAS_FLAG|Paint.FILTER_BITMAP_FLAG));
		  canvas.clipPath(this.mBackPagePath, Region.Op.INTERSECT);
		  float xShift = 2.0F * this.mPivotX - width;
		  float xRotate = width - this.mPivotX;
		  float yRotate = height;
		  if ((this.mCorner & 0x1) != 0) {
			  xShift = width - 2.0F * this.mPivotX;
			  xRotate = this.mPivotX;
		  }
		  if ((this.mCorner & 0x2) != 0) {
			  yRotate = 0.0F;
		  }
		  canvas.translate(this.mOuterOffsetX + xShift, this.mOuterOffsetY);
		  canvas.rotate(this.mRotation, xRotate, yRotate);
 
		  //画原本的背面
		  if (this.mBackPage != null) {
			  this.mBackPage.setBounds(0, 0, this.mChildRect.right, this.mChildRect.bottom);
			  this.mBackPage.draw(canvas);
		  }
		  //画回调函数中的画背面
		  if (this.mPage != null) {
				Log.v("log2 drawBackPage2:", "drawing back page");
			  this.mPage.drawBackPage(canvas);
		  }
 
		  canvas.restore();
		  canvas.save();
//
		    LinearGradient grad = new LinearGradient(
					ex,ey,ex-(ex-bx)/4,ey-(ey-by)/4,R.color.gray3,0xC9C9C9,Shader.TileMode.CLAMP);
			Paint p=new Paint();
		    p.setShader(grad);
//		    p.setAlpha(120);
		    canvas.drawPath(this.mBackPagePath,p);
		    canvas.restore();
		    //中间阴影问题，起点蓝色-》 白色-》 蓝色终点，这样起点前和终点后的区域也为蓝色了。
		    canvas.save();
//		    canvas.setDrawFilter(new PaintFlagsDrawFilter(0, Paint.ANTI_ALIAS_FLAG|Paint.FILTER_BITMAP_FLAG));
		    LinearGradient grad1 = new LinearGradient(
		    		ex-(ex-bx)/4,ey-(ey-by)/4,bx,by,0xC9C9C9,R.color.gray3,Shader.TileMode.CLAMP);
			Paint p1=new Paint();
			p1.setShader(grad1);
//			p1.setAlpha(120);
		    canvas.drawPath(this.mBackPagePath,p1);
		    canvas.restore();
//		   
 
	  }
 
	  public int getmTimeStep(){
 
		  return mTimeStep;
	  }
	  public void setmTimeStep(int mTimeStep ){
 
		  this.mTimeStep= mTimeStep;
	  }
	  public boolean getmStepping(){
 
		  return mStepping;
	  }
	  public void setmStepping(boolean mStepping ){
 
		  this.mStepping= mStepping;
	  }
 
	  public void setmStepLen(int mStepLen){
		  this.mStepLen=mStepLen;
	  }
	  public int getmStepLen(){
		  return this.mStepLen;
	  }
 
	  public void setmMaxStep(int mMaxStep){
		  this.mMaxStep=mMaxStep;
	  }
	  public int getmMaxStep(){
		  return this.mMaxStep;
	  }
 
	public void setPreStart(int where)
	{
		switch (where)
		{
			case NEXT:
			case LAST:
				mWhere = where;
				break;
 
			default:
				mWhere = KEEP;
				break;
		}
 
		isBgInit = true;
		isBackInit = true;
 
	}
 
}

 

第二个view类pageView.java ：

public

 class

 PageViewP1 extends

 RelativeLayout {


	public

 static

 final

 int

 CORNER_BOTTOM_LEFT =

 0

;


	public

 static

 final

 int

 CORNER_BOTTOM_RIGHT =

 1

;


	public

 static

 final

 int

 CORNER_TOP_LEFT =

 2

;


	public

 static

 final

 int

 CORNER_TOP_RIGHT =

 3

;


	private

 Path mClipPath;


	private

 PageTurnerViewP1 mPageTurner;


	private

 Callback mCallback;


	private

 int

 mCorner;


	private

 Drawable mBackPage;


	private

 Drawable mPageBackground;


 
	public

 PageViewP1(

Context

 context)

 {


		super

(

context)

;


	}


 
	public

 PageViewP1(

Context

 context, AttributeSet

 attrs )

 {


		super

(

context, attrs )

;


 
		this

.mBackPage

 =

this

.getBackground

(

)

;


		this

.mCorner

 =

 -

1

;


	}


 
	void

 setPageTurner(

PageTurnerViewP1 pageTurnerViewP1)

 {


		this

.mPageTurner

 =

 pageTurnerViewP1;


	}


 
	void

 setClipPath(

Path clipPath)

 {


		this

.mClipPath

 =

 clipPath;


	}


 
	public

 void

 setCallback(

Callback callback)

  {


		this

.mCallback

 =

 callback;


	}


 
	void

 drawBackPage(

Canvas

 canvas)

 {


	   if

 (

this

.mCallback

 !=

 null

)


		   this

.mCallback

.onDrawBackPage

(

canvas)

;


	}


 
	void

 drawBackground(

Canvas

 canvas)

 {


		if

 (

this

.mCallback

 !=

 null

)


			this

.mCallback

.onDrawBackground

(

canvas)

;


	}


 
	public

 void

 startPageTurn(

)

 {


		if

 (

this

.mPageTurner

 !=

 null

)


			this

.mPageTurner

.startPageTurn

(

0

)

;


	}


 
	void

 onPageTurnFinished(

Canvas

 canvas)

 {


		this

.mCallback

.onPageTurnFinished

(

canvas)

;


		this

.mClipPath

 =

 null

;


	}


 
	protected

 void

 dispatchDraw(

Canvas

 canvas)

 {


		if

 (

this

.mClipPath

 !=

 null

)

 {


			canvas.save

(

)

;


			canvas.clipPath

(

this

.mClipPath

, Region.Op

.INTERSECT

)

;


		}


		super

.dispatchDraw

(

canvas)

;


		if

 (

this

.mClipPath

 !=

 null

)


			canvas.restore

(

)

;


	}


 
	public

 void

 setCorner(

int

 corner)

 {


		this

.mCorner

 =

 corner;


	}


 
	public

 int

 getCorner(

)

 {


		return

 this

.mCorner

;


	}


 
	public

 void

 setBackPage(

Drawable backPage)

 {


		this

.mBackPage

 =

 backPage;


	}


 
	public

 Drawable getBackPage(

)

 {


		return

 this

.mBackPage

;


	}


 
	public

 void

 setPageBackground(

Drawable background)

 {


		this

.mPageBackground

 =

 background;


	}


 
	public

 Drawable getPageBackground(

)

 {


		return

 this

.mPageBackground

;


	}


 
	public

 static

 abstract

 class

 Callback {


		public

 void

 onDrawBackPage(

Canvas

 canvas)

 {


			Log.v

(

"Callback"

, "drawing back page"

)

;


		}


		public

 void

 onDrawBackground(

Canvas

 canvas)

 {


			Log.v

(

"Callback2"

, "drawing back page"

)

;


		}


		public

 void

 onPageTurnFinished(

Canvas

 canvas)

 {


			Log.v

(

"Callback3"

, "drawing back page"

)

;


		}


	}


}
lijian_nhy
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
android酷炫翻页效果+图形分析
jianchibuxie5的专栏
09-20 488
public class PageWidget extends View {  private static final String TAG = "hmg";  private int mWidth = 480;  private int mHeight = 800;
Android 实现书籍翻页效果----升级篇
weixin_34247032的博客
03-07 56
自从之前发布了《Android 实现书籍翻页效果----完结篇 》之后，收到了很多朋友给我留言，前段时间由于事情较多，博客写得太匆忙很多细节地方没有描述清楚。所以不少人对其中的地方有不少不明白之处，也有不少人 对其中出现的Bug进行了反馈。今天终于找出了段时间对这段时间的一些问题做个简单的总结。      之前给出的例子只是能使书籍进行简单的拖拽，没有实现翻页的动画效果，很多人希望我能加上这一个...
android电子书翻页效果
07-17
翻页 android电子书 电子书 翻页效果 android android平台下优秀的电子书翻页效果，美观，逼真
Android仿照iReader电子书翻页效果实现
10-29
本例子详细讲解怎么在Android中使用java实现翻页效果，就像电子阅读器那样。翻页效果在Android日常开发中已经非常普遍，机密不再是机密，现在来展示两年前写的Demo程序，希望对大家理解这篇文章有一定帮助
Android翻页电子书效果
07-27
Android 翻页 电子书 效果 很不错，适合初学者看的源码
Android电子书翻页效果
xiang279416228的专栏
10-08 805
现在智能手机上看电子书越来越流行，前段时间也像做个类似的应用，但是翻页效果不知道如何做，于是网上收罗了一番，发现了一个比较好的电子书翻页效果，发出来与大家一起分享。 截图如下： 源码下载地址：http://www.iwapzone.com/html/app/xinwenyuedu/2012/0919/472.html
Android 电子书翻页效果(增强了翻页效果，算法可以参考)
08-30
Android平台上的电子书翻页效果，翻页效果非常好，有图参考，注释易懂。 已实现：实现了翻书效果，可点击翻页或拖动翻页
安卓翻页效果相关-android用opengl实现电子书翻书效果代码.rar
07-30
android用opengl实现电子书翻书效果代码.rar,太多无法一一验证是否可用，程序如果跑不起来需要自调，部分代码功能进行参考学习。
Android 实现书籍翻页效果TXT阅读器
08-04
NULL 博文链接：https://technicalsearch.iteye.com/blog/2008558
Android 使用OpenGL ES实现类似书本翻页效果的示例程序：android_page_curl
10-16
原地址： //http://www.open-open.com/lib/view/open1368327471219.html //https://github.com/harism/android_page_curl
android_page_curl翻书效果.zip
07-10
android_page_curl翻书效果是一个在 Android 上用opengl实现了电子书翻书效果的代码，做的比较逼真
Android电子书翻页效果实现
热门推荐
随手记两笔
04-22 1万+
Android电子书翻页效果实现
Android 翻页效果 电子书 (转)
09-25 169
转载请注明来自： 5进制空间-android区 相信做电子书的同学，都遇到过翻页动画的需求吧，如果你不满足与点击滑动翻页的话，这边文章应该能够帮助到你。 先上个效果图： [img]http://www.91dota.com/wp-content/uploads/2011/07/46868_1305273411StiA.png[/img] [img]http://www.91...
Android实现书籍翻页效果
倔强的晓奇
06-14 2370
原文By 何明桂（http://blog.csdn.net/hmg25） 转载请注明出处 Android 实现书籍翻页效果----原理篇 之前看到像ipad上的ibook的模拟书籍翻页的特效感觉很炫，在android上也有像laputa和ireader等应用实现有这个特效，在网上搜索了一下好像也没有现成的例子，所以自己动手实现了一个，现在将实现的过程记录下来。           By
Android电子书翻书效果(一)
u012202641的专栏
09-22 510
package Rong; import android.content.Context; import android.graphics.Bitmap; import android.graphics.BitmapFactory; import android.graphics.Canvas; import android.graphics.ColorMatrix; import android
基于Android安卓的电子书阅读器课程毕业设计
最新发布
02-04
基于Android安卓的电子书阅读器课程毕业设计是一个针对Android平台的电子书阅读软件的开发项目。该设计的目的是为了满足用户对于便捷阅读电子书的需求，提供一个界面友好、功能丰富、操作流畅的阅读器应用。本设计的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值