L遷客

Android 自定義控件 eBook 翻書效果

效果圖：

 

Book.java文件：

package com.book;import android.app.Activity;

import android.os.Bundle;

import android.util.Log;

import android.view.View;

import android.widget.ImageView;public class Book extends Activity {

    /** Called when the activity is first created. */

eBook mBook;

    public void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.main);

        mBook = (eBook)findViewById(R.id.my_book);

        mBook.addLayoutRecForPage(R.layout.page,21);

        mBook.setListener(new eBook.Listener() {

    public void onPrevPage() {

     updateContent();

    }

    public void onNextPage() {

     updateContent();

    }

    public void onInit() {

     updateContent();

   }

   });

    }

    private void updateContent(){

    int index = mBook.getIndexForLeftPage();

    View left = mBook.getLeftPage(),right = mBook.getRightPage();

        View next1 = mBook.getNextPage1(),next2 = mBook.getNextPage2();

        View prev1 = mBook.getPrevPage1(),prev2 = mBook.getPrevPage2();

        if(left != null)setImg(left,index);

        if(right != null)setImg(right,index+1);

        if(next1 != null)setImg(next1,index+2);

        if(next2 != null)setImg(next2,index+3);

        if(prev1 != null)setImg(prev1,index-1);

        if(prev2 != null)setImg(prev2,index-2);

        mBook.invalidate();

    }

private void setImg(View v , int index){

   if(index >= 0 && index < 20){

    ImageView img = (ImageView)v.findViewById(R.id.book_img);

    if(img == null)return;

    Log.d("eBook","set Img");

    switch(index%6){

    case 0:

     img.setImageResource(R.drawable.p1);

     break;

    case 1:

     img.setImageResource(R.drawable.p2);

     break;

    case 2:

     img.setImageResource(R.drawable.p3);

     break;

    case 3:

     img.setImageResource(R.drawable.p4);

     break;

    case 4:

     img.setImageResource(R.drawable.p5);

     break;

    case 5:

     img.setImageResource(R.drawable.p6);

     break;

    default:

     break;

    }

   }

}

}main.xml文件：<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:orientation="vertical"

    android:layout_width="fill_parent"

    android:layout_height="fill_parent">

<com.book.eBook android:id="@+id/my_book"

    android:layout_width="fill_parent"

    android:layout_height="fill_parent"/>

</LinearLayout>page.xml文件：<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:orientation="vertical"

    android:layout_width="fill_parent"

    android:layout_height="fill_parent"

    android:padding="20dip"

    android:background="#FFFFDD">

    <ImageView android:layout_width="fill_parent" android:id="@+id/book_img"

    android:layout_height="fill_parent" android:layout_weight="1"

    android:scaleType="fitXY" android:src="@drawable/p1"/>

    <com.book.TelEdit

    android:id="@+id/book_text"

    android:layout_width="fill_parent"

    android:background="#ffffdd"

    android:gravity="top"

    android:typeface="sans"

    android:capitalize="sentences"

    android:lineSpacingExtra="5dip"

    android:textSize="15dip"

    android:textColor="#000000"

    android:layout_height="fill_parent"

    android:paddingTop="30dip"

    android:layout_weight="1"/>

</LinearLayout>eBook.java文件部分代碼：package com.book;import java.util.ArrayList;

import java.util.Date;

import java.util.List;import android.content.Context;

import android.graphics.Bitmap;

import android.graphics.Canvas;

import android.graphics.Color;

import android.graphics.LinearGradient;

import android.graphics.Paint;

import android.graphics.Path;

import android.graphics.Point;

import android.graphics.PorterDuffXfermode;

import android.graphics.Shader;

import android.graphics.PorterDuff.Mode;

import android.util.AttributeSet;

import android.util.Log;

import android.view.GestureDetector;

import android.view.LayoutInflater;

import android.view.MotionEvent;

import android.view.View;

import android.view.GestureDetector.OnGestureListener;

import android.widget.FrameLayout;

import android.widget.LinearLayout;public class eBook extends FrameLayout{

public static final String LOG_TAG = "eBook";

List<Integer> myRecPages;

int totalPageNum;

Context mContext;

boolean hasInit = false;

final int defaultWidth = 600 , defaultHeight = 400;

int contentWidth = 0;

int contentHeight = 0;

View leftPage,rightPage,llPage,lrPage,rrPage,rlPage;

LinearLayout mView;

bookView mBookView;

boolean closeBook = false;

private enum Corner {

   LeftTop,

   RightTop,

   LeftBottom,

   RightBottom,

   None

};

private Corner mSelectCorner;

final int clickCornerLen = 250*250; //50dip

float scrollX = 0,scrollY = 0;

int indexPage = 0;

private enum State {

   ABOUT_TO_ANIMATE,

   ANIMATING,

   ANIMATE_END,

   READY,

   TRACKING

};

private State mState;

private Point aniStartPos;

private Point aniStopPos;

private Date aniStartTime;

private long aniTime = 2000;

private long timeOffset = 900;

Listener mListener;

private GestureDetector mGestureDetector;

private BookOnGestureListener mGestureListener;

public eBook(Context context) {

   super(context);

   Init(context);

}public eBook(Context context, AttributeSet attrs) {

   super(context, attrs);

   Init(context);

}...省略}

 

 

 

該控件大致實現方法：

eBook繼承FrameLayout，好處在于FrameLayout有圖層效果，后添加的View類能覆蓋前面的View。

初始化：定義一個LinearLayout的成員變量mView，將page.xml inflate 成View分別用leftPage，rightPage引用，并初始化其數據，將leftPage，rightPage通過addView添加到mView，然后將mView添加到eBook。在eBook里定義一個私有類BookView extends View。 并定義成員變量 BookView mBookView； 最后將mBookView添加的eBook中，這樣，mView中的內容為書面內容，mBookView中的內容為特效內容。

后續手勢動作：可將各種手勢的特效動作畫于mBookView的畫布中。

效果圖, 效果, Android, activity, created