Android moji 3.0 features introduction effect implementation-implement a rolling Layout

Moji.com the new version of the boot introduction is very beautiful, scroll up and down pages, after turning the page, the elements will have an Animation effect, analysis of the Animation elements are basic Animation, did not use the latest attribute Animation; android does not provide the control for Scrolling up and down pages. Only the horizontal Viewpager is provided. Here is an implementation-> click to open the link and use the open-source control ViewPager-Android, here we try to manually implement a page flip control that is scroll up or down.

Preparations

First, we use apktool to decompress the installation package of moji weather and extract the image resources and layout files. There are four la s in total.

Page flip control implementation

To implement custom layout, you must inherit ViewGroup and then implement the onMeasure and onLayout methods. <喎?http: www.bkjia.com kf ware vc " target="_blank" class="keylink"> VcD4KPHA + PC9wPgo8cHJlIGNsYXNzPQ = "brush: java;"> @ Overrideprotected void onLayout (boolean changed, int l, int t, int r, int B) {int count = getChildCount (); int height = getMeasuredHeight (); int top = 0; for (int I = 0; I <count; ++ I) {View childView = getChildAt (I); if (childView. getVisibility ()! = View. GONE) {childView. layout (l, top, r, top + height); top + = height ;}} mTotalHeight = height * (count-1); mTolerance = height/2 ;} @ Overrideprotected void onMeasure (int widthMeasureSpec, int heightMeasureSpec) {super. onMeasure (widthMeasureSpec, heightMeasureSpec); int count = getChildCount (); for (int I = 0; I <count; ++ I) {View childView = getChildAt (I ); measureChild (childView, widthMeasureSpec, heightMeasureSpec );}}
In the onLayout method, the page is arranged vertically. The content of each page is filled with controls.

At this time, if you add the View inflate in the activity and add it to the control through addview, you will see the content on the first page, but you cannot slide at this time. Next we will slide the pages up and down.

To respond to the gesture operation on the control, you need to implement the onTouchEvent method:

@ Overridepublic boolean onTouchEvent (MotionEvent event) {if (mVelocityTracker = null) {mVelocityTracker = VelocityTracker. obtain ();} mVelocityTracker. addMovement (event); switch (event. getAction () {case MotionEvent. ACTION_DOWN: if (! MScroller. isFinished () {mScroller. abortAnimation ();} mLastY = (int) event. getY (); mStartYPosition = getScrollY (); break; case MotionEvent. ACTION_MOVE: int y = (int) event. getY (); int distance = mLastY-y; int scrollY = getScrollY (); // if (distance <0 & scrollY + distance <0) {distance = 0-scrollY;} else if (distance> 0 & scrollY + distance> mTotalHeight) {distance = mTotalHeight-scrollY;} scrollBy (0, distance ); mLastY = y; break; case MotionEvent. ACTION_UP: mEndYPosition = getScrollY (); int posDiff = mEndYPosition-mStartYPosition; mVelocityTracker. computeCurrentVelocity (1000); int velocityY = (int) mVelocityTracker. getYVelocity (); mVelocityTracker. recycle (); mVelocityTracker = null; if (Math. abs (velocityY) >=600 | Math. abs (posDiff)> mTolerance) {int dis = 0; if (posDiff> 0) {dis = getMeasuredHeight ()-posDiff;} else if (posDiff <0) {dis =-(getMeasuredHeight () + posDiff);} mScroller. startScroll (0, 0, 0, dis);} else {mScroller. startScroll (0, 0, 0,-posDiff);} postInvalidate (); break; default: break;} return true ;}

The above operations include scrolling, border check (to avoid sliding out the boundary), and page flip. In the beginning, this was actually the case.

@Overridepublic boolean onTouchEvent(MotionEvent event) {switch (event.getAction()) {case MotionEvent.ACTION_DOWN:mLastY = (int) event.getY();break;case MotionEvent.ACTION_MOVE:int y = (int) event.getY();int distance = mLastY - y;scrollBy(0, distance);mLastY = y;break;case MotionEvent.ACTION_UP:break;default:break;}return true;}

The page can scroll up and down with the finger, but it will go beyond the boundary, and then add the upper boundary check, that is, modify ACTION_MOVE,

Case MotionEvent. ACTION_MOVE: int y = (int) event. getY (); int distance = mLastY-y; int scrollY = getScrollY (); // if (distance <0 & scrollY + distance <0) {distance = 0-scrollY;} else if (distance> 0 & scrollY + distance> mTotalHeight) {distance = mTotalHeight-scrollY;} scrollBy (0, distance ); mLastY = y; break;

At this time, when you scroll, you will find that you can no longer slide when you reach the boundary. Next, you can add the sliding half screen to automatically complete the page flip function, which is the complete code at the top, scroller is used in it to calculate the remaining rolling distance when lifting the finger, and then start to scroll. scroller is only responsible for calculating the position of the rolling process. What truly controls the page is in computeScroll () method:

@Overridepublic void computeScroll() {if (mScroller.computeScrollOffset()) {int scroll = mScroller.getCurrY();if (scroll > 0 && mEndYPosition + scroll > mTotalHeight) {scroll = mTotalHeight - mEndYPosition;} else if (scroll < 0 && mEndYPosition + scroll < 0) {scroll = -mEndYPosition;}scrollTo(0, mEndYPosition + scroll);mIsScrolling = true;postInvalidate();} else if (mIsScrolling) {if (mPageScrollListener != null) {int position = getScrollY() / getMeasuredHeight();if (position != mCurrentPage) {mCurrentPage = position;mPageScrollListener.onPageChanged(mCurrentPage);}}mIsScrolling = false;}}

The computeScroll method is called for every page re-painting. Then, the scroler is used to obtain the scroll value at this time and re-paint it again until the scroll ends. The bottom boundary detection is also done here to prevent overhead rolling.

After scrolling, the user of the control must be notified that page turning is complete. Therefore, an interface for page turning is defined.

public void setOnPageScrollListener(OnPageScrollListener listener) {mPageScrollListener = listener;}public interface OnPageScrollListener {public void onPageChanged(int position);}

In computeScroll (), you can call this interface when page turning is complete.

The rest is to load the animation in the activity. At the end of each page turning, the animation of the corresponding page is played and the animation effect of the previous page is cleared.

class MyPageScrollListener implements OnPageScrollListener {@Overridepublic void onPageChanged(int position) {switch (position) {case 0:layout1AnimStart();break;case 1:layout2AnimStart();break;case 2:layout3AnimStart();break;case 3:layout4AnimStart();break;}}}

Demo Effect

Code here-> http://download.csdn.net/detail/xu_fu/7185403