It's a man's next layer 100 [sixth layer] -- high imitation Douban client, 100 Layer High imitation

It's a man's next layer 100 [sixth layer] -- high imitation Douban client, 100 Layer High imitation

Some time ago, sunshine Xiaoqiang installed a Douban client. The first time it was opened, it was attracted by this interface style. This morning, when I started Douban to listen to music, I suddenly had a thought, to achieve this effect, open the client and analyze it to find that the implementation of this effect is not as difficult as imagined. Next I will first analyze the Implementation ideas of this effect, next, I will explain the implementation process step by step. I hope you can put forward comments and suggestions and exchange and learn together.

Let's show you my achievements first:

In fact, there are other texts and menus on the interface of the Douban client, but the implementation effects of these two are similar to those of other ones, which can be used as representatives, so there are not so many components to draw.

Reprint please explain the source: http://blog.csdn.net/dawanganban

I. Structure of the analysis interface

There are two views of the same size as the screen size of our mobile phone (which are the background and main interface with gray transparency changes). Assume that the width and height of the screen are w and h, and the coordinate origin of the screen is in the upper left corner, the coordinates of the two views relative to the screen are

Coordinates at the beginning:

Gray background: left 0 right w top-h bottom 0

Main Interface: left 0 right w top 0 bottom h

Slide to the bottom (d is the height that slides to the bottom)

Gray background: left 0 right w top-d bottom h-d

Main Interface: left 0 right w top h-d bottom 2h-d

Next, we will analyze two major problems:

1. Implementation of sliding

As shown in the preceding figure, we need to consider how to slide the interface up and down, observe the sliding gesture of the Douban client and find that sliding acceleration detection is supported (sliding from one end to the other when the speed is greater than a certain value) the center of the Y-axis that allows the screen to slide with its fingers and the screen to be restored is a critical point.

From the above analysis, we can basically know the following technologies used:

(1) Listen to the Event_Move event, and implement real-time movement (with fingers) through scorllBy ).

(2) determine the finger position at Event_Up to determine whether to restore to the original position.

(3) When sliding, determine the speed at which the finger slides to determine whether to slide directly to the other end (the upper and lower ends ).

2. scaling and transparency changes of elements on the Interface

The transparency changes on the interface are roughly the same. When sliding, the gray background transparency gradient (sliding from top to bottom to transparent, sliding from bottom to gray) is displayed ), the text transparency changes on the main interface.

The zoom control has a circular image on the main interface and a menu at the bottom (the menu at the bottom is similar, which is not discussed here), and moves from the center horizontally to the left and decreases as the sliding position.

The implementation of transparency changes is actually very simple. You only need to know the ratio of the current position to the whole screen coordinate to calculate it. What is more difficult now is how to scale and move the center circular image.

We can simply see the approximate variation. We need to refer to the TOP and LEFT of the screen to determine the position of the circle.

Ii. Detailed implementation process

First, we add two views (gray interface and main interface)

private void addChild(){addTopView();addCenterView();}

private void addTopView(){View view = new View(context);view.setBackgroundColor(Color.GRAY);mTopView = view;addView(mTopView);}private void addCenterView(){View view = new CustomCenterVIew(context);view.setBackgroundColor(Color.WHITE);mCenterView = view;addView(mCenterView);}

Override ViewGroup, and then layout the two views in onLayout (initial layout)

@Overrideprotected void onLayout(boolean changed, int l, int t, int r, int b) {mTopView.layout(0, -mViewHeight, mViewWidth, 0);mCenterView.layout(0, 0, mViewWidth, mViewHeight);}

Let's take a look at the processing of screen events. The following is the method to override onTouchEvent.

private float mOldY;private VelocityTracker vTracker;@Overridepublic boolean onTouchEvent(MotionEvent event) {int disY;int vTrackY;float eventY = event.getY();obtainVelocityTracker(event);switch (event.getAction()) {case MotionEvent.ACTION_DOWN:mOldY = eventY;break;case MotionEvent.ACTION_MOVE:disY = (int)(eventY - mOldY);if(disY > 0 && Util.getCenterViewPointY(mCenterView) >= mViewHeight){return true;}if(disY < 0 && Util.getCenterViewPointY(mCenterView) <= mViewPointY){return true;}mOldY = eventY;scrollBy(0, -disY);break;case MotionEvent.ACTION_UP:vTracker.computeCurrentVelocity(1000);vTrackY = (int) vTracker.getYVelocity();Log.e(TAG, "vTrack = " + vTrackY);if(Math.abs(vTrackY) > 6000){if(vTrackY > 0){moveToBottom();}else{moveToTop();}}else{int disPointY = Util.getCenterViewPointY(mCenterView) - mViewPointY;if(disPointY > mViewHeight / 2){moveToBottom();}else{moveToTop();}}break;}return true;}

In the ACTION_MOVE event, we made two conditions to prevent sliding to the top or to the bottom to continue sliding (a sliding range is limited ), then use scrollBy to slide the response distance (mobile phone sliding.

ACTION_UP mainly involves two tasks. One is to judge whether the Sliding Speed of the user's finger has exceeded a critical value. If the sliding speed exceeds a critical value, it indicates that the user wants to slide to the end. The other is to determine whether the finger slides beyond the boundary of the screen to process the sliding or restore to the original position.

To achieve smooth sliding, we use the computerScroll method in moveToBottom and moveToTop to achieve smooth sliding. For detailed usage please refer to my another blog: http://blog.csdn.net/dawanganban/article/details/23998781
Next, let's take a look at the implementation of the View on the main interface. This View is actually a custom View, I have rewritten the onDraw method to change the transparency and size (system animation cannot achieve the effect of real-time changes with fingers moving). The specific implementation is as follows:

@Overrideprotected void onDraw(Canvas canvas) {super.onDraw(canvas);int currentNum = Util.getCenterViewPointY(this);Log.e(TAG, "currentNum = " + currentNum);int alpha = 255 - (int)((float)500 * (currentNum - CustomView.BOTTOM_MENU_HEIGHT) / maxNum);if(alpha > 0){titleTextPaint.setAlpha(alpha);float titleWidth = titleTextPaint.measureText(title);canvas.drawText(title, (mViewWidth - titleWidth) / 2, TITLE_TOP_MARGIN, titleTextPaint);}int beginX = (int)((mViewWidth - mCenterIconBitmap.getWidth()) / 2 - (float)CENTER_ICON_LEFT_GAP * (currentNum - CustomView.BOTTOM_MENU_HEIGHT) / maxNum);int beginY = (int)(CENTER_ICON_MARGIN - (float)CENTER_ICON_MARGIN * currentNum / maxNum);canvas.save();float scale = 1.6f - (float)currentNum / maxNum;canvas.scale(scale, scale, beginX + mCenterIconBitmap.getWidth() / 2, beginY + mCenterIconBitmap.getHeight() / 2);rectf.set(beginX, beginY, beginX + mCenterIconBitmap.getWidth(), beginY + mCenterIconBitmap.getHeight());canvas.drawBitmap(mCenterIconBitmap, null, rectf, bitmapPaint);canvas.restore();}

In the above plot, we mainly calculate the size and transparency to achieve the effect of drawing the circle and text in the middle. Now we can see that we don't want to achieve what we want when we run it, this onDraw method won't be called with sliding at all. What should I do? We can notify you of the re-painting of the custom View when sliding (some optimizations can be made here ).

@Overridepublic void computeScroll() {super.computeScroll();if(mScroller.computeScrollOffset()){scrollTo(mScroller.getCurrX(), mScroller.getCurrY());postInvalidate();}centerViewUpdate();}

We can see that in the last row of computeScroll, we call a centerViewUpdate method to repaint the transparency of the custom View and the gray interface above. The Code is as follows:

private void centerViewUpdate(){mCenterView.postInvalidate();float alpha = 1 - (float)(Util.getCenterViewPointY(mCenterView) - mViewPointY) / mViewHeight;if(alpha < 0){mTopView.setVisibility(View.GONE);}else{mTopView.setVisibility(View.VISIBLE);mTopView.setAlpha(alpha);mTopView.postInvalidate();}}

At this point, the entire work has been basically completed. For the complete source code, please click the dancing villain in the lower right corner, add the group and get it in group sharing, or click here to download