Android自定义View——从零开始实现覆盖翻页效果
版权声明：本文为博主原创文章，未经博主容许不得转载php
系列教程：Android开发之从零开始系列html
源码：AnliaLee/BookPage，欢迎starjava
你们要是看到有错误的地方或者有啥好的建议，欢迎留言评论android
前言：以前讲了仿真书籍翻页效果，效果如图git
咱们从原理分析、功能实现到性能优化完整地过了一遍，反响不错，因而有小伙伴私信让我把 覆盖翻页效果也讲了，因此这期的主角就是它了 ~github
本篇只着重于思路和实现步骤，里面用到的一些知识原理不会很是细地拿来说，若是有不清楚的api或方法能够在网上搜下相应的资料，确定有大神讲得很是清楚的，我这就不献丑了。本着认真负责的精神我会把相关知识的博文连接也贴出来（其实就是懒不想写那么多哈哈），你们能够自行传送。为了照顾第一次阅读系列博客的小伙伴，本篇可能会出现一些在以前系列博客就讲过的内容，看过的童鞋自行跳过该段便可canvas
国际惯例，先上效果图api
建立页面内容工厂类
在Android自定义View——从零开始实现书籍翻页效果（三）一文中提到了向View填充内容实际上就是将全部页面元素绘制到一个bitmap上，而后再将这个bitmap绘制到View中。咱们把绘制页面内容bitmap的过程封装起来，方便用户调用，建立PageFactory抽象类，在内部实现绘制页面内容的抽象方法性能优化
public abstract class PageFactory {
public boolean hasData = false;//是否含有数据
public int pageTotal = 0;//页面总数
public PageFactory(){}
/** * 绘制上一页bitmap * @param bitmap * @param pageNum */
public abstract void drawPreviousBitmap(Bitmap bitmap, int pageNum);
/** * 绘制当前页bitmap * @param bitmap * @param pageNum */
public abstract void drawCurrentBitmap(Bitmap bitmap, int pageNum);
/** * 绘制下一页bitmap * @param bitmap * @param pageNum */
public abstract void drawNextBitmap(Bitmap bitmap, int pageNum);
/** * 经过索引在集合中获取相应内容 * @param index * @return */
public abstract Bitmap getBitmapByIndex(int index);
}
复制代码
咱们以纯图像内容的绘制为例，建立PicturesPageFactory继承PageFactory，除了实现内容绘制的具体逻辑之外，设置多种初始化方法，方便用户使用不一样路径下的图像集合架构
public class PicturesPageFactory extends PageFactory {
private Context context;
public int style;//集合类型
public final static int STYLE_IDS = 1;//drawable目录图片集合类型
public final static int STYLE_URIS = 2;//手机本地目录图片集合类型
private int[] picturesIds;
/** * 初始化drawable目录下的图片id集合 * @param context * @param pictureIds */
public PicturesPageFactory(Context context, int[] pictureIds){
this.context = context;
this.picturesIds = pictureIds;
this.style = STYLE_IDS;
if (pictureIds.length > 0){
hasData = true;
pageTotal = pictureIds.length;
}
}
private String[] picturesUris;
/** * 初始化本地目录下的图片uri集合 * @param context * @param picturesUris */
public PicturesPageFactory(Context context, String[] picturesUris){
this.context = context;
this.picturesUris = picturesUris;
this.style = STYLE_URIS;
if (picturesUris.length > 0){
hasData = true;
pageTotal = picturesUris.length;
}
}
@Override
public void drawPreviousBitmap(Bitmap bitmap, int pageNum) {
Canvas canvas = new Canvas(bitmap);
canvas.drawBitmap(getBitmapByIndex(pageNum-2),0,0,null);
}
@Override
public void drawCurrentBitmap(Bitmap bitmap, int pageNum) {
Canvas canvas = new Canvas(bitmap);
canvas.drawBitmap(getBitmapByIndex(pageNum-1),0,0,null);
}
@Override
public void drawNextBitmap(Bitmap bitmap, int pageNum) {
Canvas canvas = new Canvas(bitmap);
canvas.drawBitmap(getBitmapByIndex(pageNum),0,0,null);
}
@Override
public Bitmap getBitmapByIndex(int index) {
if(hasData){
switch (style){
case STYLE_IDS:
return getBitmapFromIds(index);
case STYLE_URIS:
return getBitmapFromUris(index);
default:
return null;
}
}else {
return null;
}
}
/** * 从id集合获取bitmap * @param index * @return */
private Bitmap getBitmapFromIds(int index){
return BitmapUtils.drawableToBitmap(
context.getResources().getDrawable(picturesIds[index]),
ScreenUtils.getScreenWidth(context),
ScreenUtils.getScreenHeight(context)
);
}
/** * 从uri集合获取bitmap * @param index * @return */
private Bitmap getBitmapFromUris(int index){
return null;//这个有空再写啦，你们可自行补充完整
}
}
复制代码
基本架构就是这样（BitmapUtils和ScreenUtils两个工具类你们本身去看下源码吧，就不在这展开说了~），至于小说文本类的解析比较复杂，之后可能会出一个番外篇专门讲这个。下面咱们开始介绍如何在自定义View中使用这个工厂类
使用工厂类获取页面内容并绘制
建立CoverPageView，提供一个对外的接口用以设置工厂类
public class CoverPageView extends View {
private int defaultWidth;//默认宽度
private int defaultHeight;//默认高度
private int viewWidth;
private int viewHeight;
private int pageNum;//当前页数
private PageFactory pageFactory;
private Bitmap currentPage;//当前页bitmap
public CoverPageView(Context context) {
super(context);
init(context);
}
public CoverPageView(Context context, @Nullable AttributeSet attrs) {
super(context, attrs);
init(context);
}
private void init(Context context){
defaultWidth = 600;
defaultHeight = 1000;
pageNum = 1;
}
/** * 设置工厂类 * @param factory */
public void setPageFactory(final PageFactory factory){
//保证View已经完成了测量工做，各页bitmap已初始化
getViewTreeObserver().addOnPreDrawListener(new ViewTreeObserver.OnPreDrawListener() {
@Override
public boolean onPreDraw() {
getViewTreeObserver().removeOnPreDrawListener(this);
if(factory.hasData){
pageFactory = factory;
pageFactory.drawCurrentBitmap(currentPage,pageNum);
postInvalidate();
}
return true;
}
});
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
int height = ViewUtils.measureSize(defaultHeight, heightMeasureSpec);
int width = ViewUtils.measureSize(defaultWidth, widthMeasureSpec);
setMeasuredDimension(width, height);
viewWidth = width;
viewHeight = height;
currentPage = Bitmap.createBitmap(viewWidth, viewHeight, Bitmap.Config.RGB_565);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
if(pageFactory !=null){
drawCurrentPage(canvas);
}
}
/** * 绘制当前页 * @param canvas */
private void drawCurrentPage(Canvas canvas){
canvas.drawBitmap(currentPage, 0, 0,null);
}
}
复制代码
在Activity中进行初始化，这里我用了drawable目录下的一些图片做为页面内容
int[] pIds = new int[]{R.drawable.test1,R.drawable.test2,R.drawable.test3};
coverPageView = (CoverPageView) findViewById(R.id.view_cover_page);
coverPageView.setPageFactory(new PicturesPageFactory(this,pIds));
复制代码
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:splitMotionEvents="false">
<com.anlia.pageturn.view.CoverPageView android:id="@+id/view_cover_page" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_margin="10dp"/>
</RelativeLayout>
复制代码
CoverPageView设置了工厂类对象后便会绘制出当前页内容，效果如图
实现页面滑动效果
页面滑动效果的原理其实很简单，以前咱们调用了canvas.drawBitmap方法将当前页内容绘制到View中，要实现页面滑动，只须要设置drawBitmap方法中的left值（bitmap的左边界值）便可。也就是说，咱们能够经过记录手指在X轴上的滑动距离，计算出left值，从而改变当前页内容bitmap的起始位置，实现滑动效果，如图
修改CoverPageView，监听触摸事件
public class CoverPageView extends View {
//省略部分代码...
private float xDown;//记录初始触摸的x坐标
private float scrollPageLeft;//滑动页左边界
private MyPoint touchPoint;//触摸点
private Bitmap nextPage;//下一页bitmap
private int touchStyle;//触摸类型
public static final int TOUCH_MIDDLE = 0;//点击中间区域
public static final int TOUCH_LEFT = 1;//点击左边区域
public static final int TOUCH_RIGHT = 2;//点击右边区域
private void init(Context context){
//省略部分代码...
scrollPageLeft = 0;
touchStyle = TOUCH_RIGHT;
touchPoint = new MyPoint(-1,-1);
}
/** * 设置工厂类 * @param factory */
public void setPageFactory(final PageFactory factory){
记得使用pageFactory.drawNextBitmap(nextPage,pageNum)绘制下一页的内容，否则滑动当前页时会出现背景空白没有内容
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
if(pageFactory !=null){
if(touchPoint.x ==-1 && touchPoint.y ==-1){
drawCurrentPage(canvas);
}else{
drawNextPage(canvas);
drawCurrentPage(canvas);
}
}
}
/** * 绘制当前页 * @param canvas */
private void drawCurrentPage(Canvas canvas){
canvas.drawBitmap(currentPage, scrollPageLeft, 0,null);//修改left值
}
/** * 绘制下一页 * @param canvas */
private void drawNextPage(Canvas canvas){
canvas.drawBitmap(nextPage, 0, 0, null);
}
@Override
public boolean onTouchEvent(MotionEvent event) {
super.onTouchEvent(event);
float x = event.getX();
float y = event.getY();
switch (event.getAction()){
case MotionEvent.ACTION_DOWN:
xDown = x;
if(x<=viewWidth/3){//左
touchStyle = TOUCH_LEFT;
}else if(x>viewWidth*2/3){//右
touchStyle = TOUCH_RIGHT;
}else if(x>viewWidth/3 && x<viewWidth*2/3){//中
touchStyle = TOUCH_MIDDLE;
}
break;
case MotionEvent.ACTION_MOVE:
scrollPage(x,y);
break;
case MotionEvent.ACTION_UP:
break;
}
return true;
}
/** * 计算滑动页面左边界位置，实现滑动当前页效果 * @param x * @param y */
private void scrollPage(float x, float y){
touchPoint.x = x;
touchPoint.y = y;
if(touchStyle == TOUCH_RIGHT){
scrollPageLeft = touchPoint.x - xDown;
}else if(touchStyle == TOUCH_LEFT){
scrollPageLeft =touchPoint.x - xDown - viewWidth;
}
if(scrollPageLeft > 0){
scrollPageLeft = 0;
}
postInvalidate();
}
}
复制代码
效果如图
实现上下翻页
相关博文连接
要实现上下翻页效果咱们需从两个方面入手，一是使用scroller和Interpolator插值器方面的知识完成自动翻页的效果；二是在恰当的时机更新上页、当前页、下页的内容，使得整个翻页衔接更为流畅
先说第一点，自动翻到上页和下页区别在于页面滑动的方向不一样，咱们以滑动页的右边界（由于左边界在View的范围以外，因此选取右边界做为参考，方便你们理解）的位置变化为例，翻到上页时上一页的内容右边界从左向右滑动，逐渐覆盖当前页内容，而翻到下页时，则是当前页内容右边界从右向左滑动，逐渐显示出下页内容，具体计算的方法以下
/** * 自动完成翻到下一页操做 */
private void autoScrollToNextPage(){
pageState = PAGE_NEXT;
int dx,dy;
dx = (int) -(viewWidth+scrollPageLeft);
dy = (int) (touchPoint.y);
int time =(int) ((1+scrollPageLeft/viewWidth) * scrollTime);//按已滑动的距离占比计算实际的动画时间
mScroller.startScroll((int) (viewWidth+scrollPageLeft), (int) touchPoint.y, dx, dy, time);
}
/** * 自动完成返回上一页操做 */
private void autoScrollToPreviousPage(){
pageState = PAGE_PREVIOUS;
int dx,dy;
dx = (int) -scrollPageLeft;
dy = (int) (touchPoint.y);
int time =(int) (-scrollPageLeft/viewWidth * scrollTime);
mScroller.startScroll((int) (viewWidth+scrollPageLeft), (int) touchPoint.y, dx, dy, time);
}
复制代码
第二点，关于更新页面内容的时机。前文咱们提到更新页面内容须要调用pageFactory.drawXxxBitmap方法从新绘制页面内容，内容数据太大时，绘制速度就会变慢，若是在View的onDraw方法内执行此操做，就会形成卡顿。所以，咱们须要在onDraw以前绘制好内容bitmap。View什么时候重绘和触摸操做有关，因此在监听到ACTION_DOWN时就应该要开始更新内容了。举个例子，若是当前页数为2，执行翻到下页的操做，既然要提早更新页面内容，那么当手指落下的区域为右区域（touchStyle == TOUCH_RIGHT）时，第2页的内容就要绘制到previousPage（上页）中，第3页的内容绘制到currentPage（当前页）中，具体代码实现以下
pageNum++;
pageFactory.drawPreviousBitmap(previousPage,pageNum);
pageFactory.drawCurrentBitmap(currentPage,pageNum);
pageNum--;
复制代码
最后在View的computeScroll()方法中判断滑动页的位置，若是滑动页到了指定的位置（离开View），执行页数增长的操做。具体代码以下（文字分析理解不清楚的能够对照着代码一步步看）
public class CoverPageView extends View {
//省略部分代码...
private int scrollTime;//滑动动画时间
private Scroller mScroller;
private int pageState;//翻页状态，用于限制翻页动画结束前的触摸操做
public static final int PAGE_STAY = 0;//处于静止状态
public static final int PAGE_NEXT = 1;//翻至下一页
public static final int PAGE_PREVIOUS = 2;//翻至上一页
private void init(Context context){
//省略部分代码...
pageState = PAGE_STAY;
mScroller = new Scroller(context,new LinearInterpolator());
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
if(pageFactory !=null){
if(touchPoint.x ==-1 && touchPoint.y ==-1){
drawCurrentPage(canvas);
pageState = PAGE_STAY;
}else{
if(touchStyle == TOUCH_RIGHT){
drawCurrentPage(canvas);
drawPreviousPage(canvas);
}else {
drawNextPage(canvas);
drawCurrentPage(canvas);
}
}
}
}
/** * 绘制上一页 * @param canvas */
private void drawPreviousPage(Canvas canvas){
canvas.drawBitmap(previousPage, scrollPageLeft, 0,null);
}
/** * 绘制当前页 * @param canvas */
private void drawCurrentPage(Canvas canvas){
//注意上下翻页时的滑动页的内容不同
if(touchStyle == TOUCH_RIGHT){
canvas.drawBitmap(currentPage, 0, 0,null);
}else if(touchStyle == TOUCH_LEFT){
canvas.drawBitmap(currentPage, scrollPageLeft, 0,null);
}
}
@Override
public boolean onTouchEvent(MotionEvent event) {
super.onTouchEvent(event);
float x = event.getX();
float y = event.getY();
if(pageState == PAGE_STAY){
switch (event.getAction()){
case MotionEvent.ACTION_DOWN:
xDown = x;
if(x<=viewWidth/3){//左
touchStyle = TOUCH_LEFT;
if(pageNum>1){
pageNum--;
pageFactory.drawCurrentBitmap(currentPage,pageNum);
pageFactory.drawNextBitmap(nextPage,pageNum);
pageNum++;
}
}else if(x>viewWidth*2/3){//右
touchStyle = TOUCH_RIGHT;
if(pageNum<pageFactory.pageTotal){
pageNum++;
pageFactory.drawPreviousBitmap(previousPage,pageNum);
pageFactory.drawCurrentBitmap(currentPage,pageNum);
pageNum--;
}
}else if(x>viewWidth/3 && x<viewWidth*2/3){//中
touchStyle = TOUCH_MIDDLE;
}
break;
case MotionEvent.ACTION_MOVE:
if(touchStyle == TOUCH_LEFT){
if(pageNum>1){
scrollPage(x,y);
}
}else if(touchStyle == TOUCH_RIGHT){
if(pageNum<pageFactory.pageTotal){
scrollPage(x,y);
}
}
break;
case MotionEvent.ACTION_UP:
autoScroll();
break;
}
}
return true;
}
@Override
public void computeScroll() {
if (mScroller.computeScrollOffset()) {
float x = mScroller.getCurrX();
float y = mScroller.getCurrY();
scrollPageLeft = 0 - (viewWidth - x);
if (mScroller.getFinalX() == x && mScroller.getFinalY() == y){//滑动页到达指定位置
if(touchStyle == TOUCH_RIGHT){
pageNum++;
}else if(touchStyle == TOUCH_LEFT){
pageNum--;
}
resetView();
}
postInvalidate();
}
}
/** * 计算滑动页面左边界位置，实现滑动当前页效果 * @param x * @param y */
private void scrollPage(float x, float y){
touchPoint.x = x;
touchPoint.y = y;
if(touchStyle == TOUCH_RIGHT){
scrollPageLeft = touchPoint.x - xDown;
}else if(touchStyle == TOUCH_LEFT){
scrollPageLeft =touchPoint.x - xDown - viewWidth;
}
if(scrollPageLeft > 0){
scrollPageLeft = 0;
}
postInvalidate();
}
/** * 自动完成滑动操做 */
private void autoScroll(){
switch (touchStyle){
case TOUCH_LEFT:
if(pageNum>1){
autoScrollToPreviousPage();
}
break;
case TOUCH_RIGHT:
if(pageNum<pageFactory.pageTotal){
autoScrollToNextPage();
}
break;
}
}
/** * 自动完成翻到下一页操做 */
private void autoScrollToNextPage(){
pageState = PAGE_NEXT;
int dx,dy;
dx = (int) -(viewWidth+scrollPageLeft);
dy = (int) (touchPoint.y);
int time =(int) ((1+scrollPageLeft/viewWidth) * scrollTime);
mScroller.startScroll((int) (viewWidth+scrollPageLeft), (int) touchPoint.y, dx, dy, time);
}
/** * 自动完成返回上一页操做 */
private void autoScrollToPreviousPage(){
pageState = PAGE_PREVIOUS;
int dx,dy;
dx = (int) -scrollPageLeft;
dy = (int) (touchPoint.y);
int time =(int) (-scrollPageLeft/viewWidth * scrollTime);
mScroller.startScroll((int) (viewWidth+scrollPageLeft), (int) touchPoint.y, dx, dy, time);
}
/** * 重置操做 */
private void resetView(){
scrollPageLeft = 0;
touchPoint.x = -1;
touchPoint.y = -1;
}
}
复制代码
效果如图
绘制页面阴影
在Android自定义View——从零开始实现书籍翻页效果（四）一文中咱们详细介绍了如何绘制页面的阴影，主要用到了GradientDrawable方面的知识。这里的阴影绘制比仿真翻页的要简单许多，咱们不须要考虑如何截取和旋转阴影区域，只须要绘制到滑动页右边界处就行，代码以下
public class CoverPageView extends View {
//省略部分代码...
private GradientDrawable shadowDrawable;
private void init(Context context){
//省略部分代码...
int[] mBackShadowColors = new int[] { 0x66000000,0x00000000};
shadowDrawable = new GradientDrawable(GradientDrawable.Orientation.LEFT_RIGHT, mBackShadowColors);
shadowDrawable.setGradientType(GradientDrawable.LINEAR_GRADIENT);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
if(pageFactory !=null){
if(touchPoint.x ==-1 && touchPoint.y ==-1){
drawCurrentPage(canvas);
pageState = PAGE_STAY;
}else{
if(touchStyle == TOUCH_RIGHT){
drawCurrentPage(canvas);
drawPreviousPage(canvas);
drawShadow(canvas);
}else {
drawNextPage(canvas);
drawCurrentPage(canvas);
drawShadow(canvas);
}
}
}
}
/** * 绘制阴影 * @param canvas */
private void drawShadow(Canvas canvas){
int left = (int)(viewWidth + scrollPageLeft);
shadowDrawable.setBounds(left, 0, left + 30 , viewHeight);
shadowDrawable.draw(canvas);
}
}
复制代码
效果如图
至此本篇教程到此结束，若是你们看了感受还不错麻烦点个赞，大家的支持是我最大的动力~