Android自定義View——從零開始實現書籍翻頁效果(二)

版權聲明:本文爲博主原創文章,未經博主允許不得轉載。
系列教程:Android開發之從零開始系列
源碼:github.com/AnliaLee/BookPage,歡迎star

大家要是看到有錯誤的地方或者有啥好的建議,歡迎留言評論

前言:在上篇Android自定義View——從零開始實現書籍翻頁效果(一)博客中,我們實現了 基本的上下翻頁效果右側最大翻頁距離的限制,這期我們要將這個view的翻頁效果以及動畫補齊

本篇只着重於思路和實現步驟,裏面用到的一些知識原理不會非常細地拿來講,如果有不清楚的api或方法可以在網上搜下相應的資料,肯定有大神講得非常清楚的,我這就不獻醜了。本着認真負責的精神我會把相關知識的博文鏈接也貼出來(其實就是懶不想寫那麼多哈哈),大家可以自行傳送。爲了照顧第一次閱讀系列博客的小夥伴,本篇會出現一些在之前系列博客就講過的內容,看過的童鞋自行跳過該段即可

國際慣例,先上效果圖,本次主要補全了翻頁效果以及增加取消翻頁的動畫

目錄
  • 完善右側最大翻頁距離的限制
  • 添加橫向翻頁效果
  • 增加取消翻頁的動畫

完善右側最大翻頁距離的限制

開講之前,我先把標識點的位置圖貼出來讓大家回顧一下

在上篇博客中我們講了如何限制翻頁的最大距離,也就是c點的x座標不能小於0,雖然目的達到了,但是用戶體驗並不好,可以很明顯地觀察到當c點x座標處於臨界值時,翻頁會靜止不動,如果此時觸摸點大範圍移動後,會出現翻頁“瞬移”,造成一種卡頓的感覺,如下圖

要消除這種“瞬移”的現象,我們要在c點x座標小於0的情況下,讓c點強制處於臨界位置(左下角),然後翻頁頁角繼續跟隨觸摸點移動的方向移動,要做到這一點得用到一些相似三角形的數學知識,重新計算出a點的位置繪製View,先來看下實現的原理(請無視我的渣畫工╮(╯▽╰)╭ )

圖中我們將觸摸點標爲a1,與a1對應的c點標爲c1,此時c1的x座標是小於0。而a2是我們重新計算得到的a點,也就是最後進行繪製的a點,其對應的c點標爲c2c2位於View的左下角(x座標爲0),容易觀察到直角三角形a1 c1 m1直角三角形a2 c2 m2相似,此時f點位於View的右下角(在右上角同理),因此我們可以通過相應的公式計算得到a2的座標爲(f.x-w2,f.y-h2),得到計算a2的方法後,我們修改原來的BookPageView

/**
 * 設置觸摸點
 * @param x
 * @param y
 * @param style
 */
public void setTouchPoint(float x, float y, String style){
    switch (style){
        case STYLE_TOP_RIGHT:
            f.x = viewWidth;
            f.y = 0;
            break;
        case STYLE_LOWER_RIGHT:
            f.x = viewWidth;
            f.y = viewHeight;
            break;
        default:
            break;
    }
    a.x = x;
    a.y = y;
    calcPointsXY(a,f);

    MyPoint touchPoint = new MyPoint(x,y);
    if(calcPointCX(touchPoint,f)<0){//如果c點x座標小於0則重新測量a點座標
        calcPointAByTouchPoint();
        calcPointsXY(a,f);
    }
    postInvalidate();
}

/**
 * 如果c點x座標小於0,根據觸摸點重新測量a點座標
 */
private void calcPointAByTouchPoint(){
    float w0 = viewWidth - c.x;

    float w1 = Math.abs(f.x - a.x);
    float w2 = viewWidth * w1 / w0;
    a.x = Math.abs(f.x - w2);

    float h1 = Math.abs(f.y - a.y);
    float h2 = w2 * h1 / w1;
    a.y = Math.abs(f.y - h2);
}

效果如圖


添加橫向翻頁效果

既然我們實現的是仿真的翻頁效果,翻頁除了從上下兩角翻,自然還能橫向水平進行翻頁。我們先將View劃分成上下左右中五個區域,如圖

我們根據觸摸起始的位置所位於的區域,定義五種不同的手勢操作,其中上下(top,low)對應的是上下角進行翻頁,左右(left,right)對應的橫向水平翻頁,中間(middle)則是爲了以後作爲呼出菜單而保留的區域。爲了提高代碼複用率和儘可能小的改動,我們實現橫向翻頁只需將a點的y座標強制等於View的高度減1即可(當然大家也可以根據自己的需要重新計算橫向翻頁時的繪製區域,我這裏就簡單實現了),修改我們的BookPageView

private String style;
public static final String STYLE_LEFT = "STYLE_LEFT";//點擊左邊區域
public static final String STYLE_RIGHT = "STYLE_RIGHT";//點擊右邊區域
public static final String STYLE_MIDDLE = "STYLE_MIDDLE";//點擊中間區域
public static final String STYLE_TOP_RIGHT = "STYLE_TOP_RIGHT";//f點在右上角
public static final String STYLE_LOWER_RIGHT = "STYLE_LOWER_RIGHT";//f點在右下角

/**
 * 設置觸摸點
 * @param x
 * @param y
 * @param style
 */
public void setTouchPoint(float x, float y, String style){
    MyPoint touchPoint = new MyPoint();
    a.x = x;
    a.y = y;
    this.style = style;
    switch (style){
        case STYLE_TOP_RIGHT:
            f.x = viewWidth;
            f.y = 0;
            calcPointsXY(a,f);
            touchPoint = new MyPoint(x,y);
            if(calcPointCX(touchPoint,f)<0){//如果c點x座標小於0則重新測量a點座標
                calcPointAByTouchPoint();
                calcPointsXY(a,f);
            }
            postInvalidate();
            break;
        case STYLE_LEFT:
        case STYLE_RIGHT:
            a.y = viewHeight-1;
            f.x = viewWidth;
            f.y = viewHeight;
            calcPointsXY(a,f);
            postInvalidate();
            break;
        case STYLE_LOWER_RIGHT:
            f.x = viewWidth;
            f.y = viewHeight;
            calcPointsXY(a,f);
            touchPoint = new MyPoint(x,y);
            if(calcPointCX(touchPoint,f)<0){//如果c點x座標小於0則重新測量a點座標
                calcPointAByTouchPoint();
                calcPointsXY(a,f);
            }
            postInvalidate();
            break;
        default:
            break;
    }
}

在Activity中監聽觸摸操作

public class PageActivity extends AppCompatActivity {
    private BookPageView bookPageView;
    private String style = null;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_page);

        bookPageView = (BookPageView) findViewById(R.id.view_book_page);
        bookPageView.setOnTouchListener(new View.OnTouchListener() {
            @Override
            public boolean onTouch(View v, MotionEvent event) {
                switch (event.getAction()){
                    case MotionEvent.ACTION_DOWN:
                        float x = event.getX();
                        float y = event.getY();
                        float width = bookPageView.getViewWidth();
                        float height = bookPageView.getViewHeight();
                        if(x<=width/3){//左
                            style = bookPageView.STYLE_LEFT;
//                            Toast.makeText(PageActivity.this,"點擊了左部",Toast.LENGTH_SHORT).show();
                            bookPageView.setTouchPoint(x,y,style);

                        }else if(x>width/3 && y<=height/3){//上
                            style = bookPageView.STYLE_TOP_RIGHT;
//                            Toast.makeText(PageActivity.this,"點擊了上部",Toast.LENGTH_SHORT).show();
                            bookPageView.setTouchPoint(x,y,style);

                        }else if(x>width*2/3 && y>height/3 && y<=height*2/3){//右
                            style = bookPageView.STYLE_RIGHT;
//                            Toast.makeText(PageActivity.this,"點擊了右部",Toast.LENGTH_SHORT).show();
                            bookPageView.setTouchPoint(x,y,style);

                        }else if(x>width/3 && y>height*2/3){//下
                            style = bookPageView.STYLE_LOWER_RIGHT;
//                            Toast.makeText(PageActivity.this,"點擊了下部",Toast.LENGTH_SHORT).show();
                            bookPageView.setTouchPoint(x,y,style);

                        }else if(x>width/3 && x<width*2/3 && y>height/3 && y<height*2/3){//中
                            style = bookPageView.STYLE_MIDDLE;
//                            Toast.makeText(PageActivity.this,"點擊了中部",Toast.LENGTH_SHORT).show();
//                            bookPageView.setTouchPoint(x,y,bookPageView.STYLE_MIDDLE);
                        }
                        break;
                    case MotionEvent.ACTION_MOVE:
                        bookPageView.setTouchPoint(event.getX(),event.getY(),style);
                        break;
                    case MotionEvent.ACTION_UP:
                        bookPageView.setDefaultPath();
                        break;
                }
                return false;
            }
        });
    }
}

效果如圖


增加取消翻頁的動畫

android scroller類的使用
Android學習之 Scroller的介紹與使用
 Android Scroller完全解析,關於Scroller你所需知道的一切
Android – Interpolator
android動畫 之Interpolator類

因爲我們還沒實現將書籍內容導入View中,所以我們先來實現取消翻頁的動畫效果。這裏我們結合ScrollerInterpolator插值器,實現當我們手指離開屏幕時,a點能自動滑落到右下角(右上角)的效果,有關ScrollerInterpolator方面的知識,我將相關博客鏈接貼出來了,大家可以相互對照着理解,我就不詳細闡述了。修改BookPageView

private Scroller mScroller;

private void init(Context context, @Nullable AttributeSet attrs){
    //省略部分代碼...
    mScroller = new Scroller(context,new LinearInterpolator());//以常量速率滑動即可
}

@Override
public void computeScroll() {
    if (mScroller.computeScrollOffset()) {
        float x = mScroller.getCurrX();
        float y = mScroller.getCurrY();

        if(style.equals(STYLE_TOP_RIGHT)){
            setTouchPoint(x,y,STYLE_TOP_RIGHT);
        }else {
            setTouchPoint(x,y,STYLE_LOWER_RIGHT);
        }
        if (mScroller.getFinalX() == x && mScroller.getFinalY() == y){
            setDefaultPath();//重置默認界面
        }
    }
}

/**
 * 取消翻頁動畫,計算滑動位置與時間
 */
public void startCancelAnim(){
    int dx,dy;
    //讓a滑動到f點所在位置,留出1像素是爲了防止當a和f重疊時出現View閃爍的情況
    if(style.equals(STYLE_TOP_RIGHT)){
        dx = (int) (viewWidth-1-a.x);
        dy = (int) (1-a.y);
    }else {
        dx = (int) (viewWidth-1-a.x);
        dy = (int) (viewHeight-1-a.y);
    }
    mScroller.startScroll((int) a.x, (int) a.y, dx, dy, 400);
}

在Activity中監聽手指擡起操作

case MotionEvent.ACTION_UP:
    bookPageView.startCancelAnim();
    break;

效果如圖

至此本篇教程就告一段落了,這期比較短,主要是對上期的補充。下期會實現書籍內容填充或者繪製陰影,看情況吧๑乛◡乛๑。如果大家看了感覺還不錯麻煩點個贊,你們的支持是我最大的動力~


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章