Android high imitation QQ5.0 sliding menu effect custom control incoming, androidqq5.0

Android high imitation QQ5.0 sliding menu effect custom control incoming, androidqq5.0

Reprinted please indicate the source: bytes]

The previous blog showed you how to use the Android custom control to create the simplest slide menu in history. After reading it, a brother said that you are sliding the menu out of date ~ The effect of QQ5.0 is good ~~ Well, indeed, the previous article promised to slightly modify the code of the previous article to implement the QQ5.0 slide menu ~~ Now, we will show you how easy it is to write a QQ-like slide ~!

1. Principle Analysis

First, compare the implementation of the previous Article to the effect of QQ:

The gap is quite big.

Difference 1. The content area of QQ is reduced along with the appearance of menus

Difference 2. QQ's slide menu gives people the feeling of hiding behind the content, rather than dragging it out.

Difference 3. QQ's slide menu has a zoom and transparency effect ~

How can we achieve this:

For difference 1: This is easy to handle. We can constantly change the size of the content area while sliding. How can we change it? During the menu appearance process, we constantly record the ratio of the display width to the total width of the menu, which is a process from 0 to 1, and then ~ 1 to 1 ~ 0.7 (assuming the content area is reduced to 0.7); The content area is constantly reduced;

For the difference 3: It's easy to do. Now we can get the value from 0 to 1, so the animation of scaling and transparency will be closed;

Difference 2: We use HorizontalScrollView and place menus and content horizontally. How can we hide menus behind the content? In fact, it is also relatively simple. When a menu appears, the x-direction offset of the menu is constantly set; When 0 is used, it is completely hidden; When 0.3 is used, the x-direction offset is hidden to 0.7 widths, and so on ~~~

Well, after analysis, what is the best implementation of these animations?

You don't need to think about it. Attribute Animation. If you don't know about attribute Animation, you can take the following arguments: Full parsing of Property Animation (Android) and Property Animation (Android) full resolution (lower)

2. Implementation
1. Preliminary code

The layout file is exactly the same as the previous one. Here we will not repeat the Code. If you don't understand it, read the previous one first;

Let's take a look at the complete code we have implemented in the previous article:

Package com. example. zhy_slidingmenu; import android. content. context; import android. content. res. typedArray; import android. util. attributeSet; import android. util. typedValue; import android. view. motionEvent; import android. view. viewGroup; import android. widget. horizontalScrollView; import android. widget. linearLayout; import com. zhy. utils. screenUtils; public class SlidingMenu extends HorizontalScrollView {/*** Screen width */private int mScreenWidth;/*** dp */private int mMenuRightPadding;/*** menu width */private int mMenuWidth; private int mHalfMenuWidth; private boolean isOpen; private boolean once; public SlidingMenu (Context context, AttributeSet attrs) {this (context, attrs, 0);} public SlidingMenu (Context context Context, AttributeSet attrs, int defStyle) {super (context, attrs, defStyle); mScreenWidth = ScreenUtils. getScree NWidth (context); TypedArray a = context. getTheme (). obtainStyledAttributes (attrs, R. styleable. slidingMenu, defStyle, 0); int n =. getIndexCount (); for (int I = 0; I <n; I ++) {int attr =. getIndex (I); switch (attr) {case R. styleable. slidingMenu_rightPadding: // The default value is 50 mMenuRightPadding =. getDimensionPixelSize (attr, (int) TypedValue. applyDimension (TypedValue. COMPLEX_UNIT_DIP, 50f, getResources (). getDisplayMe Trics (); // The default value is 10 DPbreak;}. recycle ();} public SlidingMenu (Context context) {this (context, null, 0);} @ Overrideprotected void onMeasure (int widthMeasureSpec, int heightMeasureSpec) {/*** set a display width */if (! Once) {LinearLayout wrapper = (LinearLayout) getChildAt (0); ViewGroup menu = (ViewGroup) wrapper. getChildAt (0); ViewGroup content = (ViewGroup) wrapper. getChildAt (1); mMenuWidth = mScreenWidth-mMenuRightPadding; mHalfMenuWidth = mMenuWidth/2; menu. getLayoutParams (). width = mMenuWidth; content. getLayoutParams (). width = mScreenWidth;} super. onMeasure (widthMeasureSpec, heightMeasureSpec);} @ Overrideprotected void onLayout (boolean changed, int l, int t, int r, int B) {super. onLayout (changed, l, t, r, B); if (changed) {// hide the menu this. scrollTo (mMenuWidth, 0); once = true ;}@overridepublic boolean onTouchEvent (MotionEvent ev) {int action = ev. getAction (); switch (action) {// Up, make a judgment. If the display area is greater than half of the menu width, it is completely displayed; otherwise, hide case MotionEvent. ACTION_UP: int scrollX = getScrollX (); if (scrollX> mHalfMenuWidth) {this. smoothScrollTo (mMenuWidth, 0); isOpen = false;} else {this. smoothScrollTo (0, 0); isOpen = true;} return super. onTouchEvent (ev);}/*** Open menu */public void openMenu () {if (isOpen) return; this. smoothScrollTo (0, 0); isOpen = true;}/*** close menu */public void closeMenu () {if (isOpen) {this. smoothScrollTo (mMenuWidth, 0); isOpen = false;}/*** switch menu status */public void toggle () {if (isOpen) {closeMenu ();} else {openMenu ();}}}

HorizontalScrollView is used to listen to ACTION_UP events. When a user raises his finger, the system determines whether to scale back or expand completely based on the width value displayed in the current menu. A rightPadding attribute is provided to the user, it is used to set the distance between the menu and the right screen. It also provides several methods for opening, closing, and switching externally. For more information, see the previous blog;

2. Implementation ideas

Now let's start to solve the three differences. We have already chosen to use Attribute animation. Now, where should we add the animation effect?

Needless to say, I think it should all be in ACTION_MOVE. Yes, ACTION_MOVE does. I can get the current getScrollX/mMenuWidth continuously, changing the menu transparency and scaling, the offset in the direction of X. The width and height of the content area are constantly changed;

At first, I was doing this in MOVE, but there were two problems:

1. The animation effect is not smooth, especially the menu, with jitters;

2. After the user raises the video, he needs to continue the unfinished animation in the "UP" mode. That is to say, your transparency and zooming will automatically change when the user raises the video;

As a result, I started to change the direction. Since it is SrollView, there must be a ScrollChanged method. It is a hard nut to crack. I really believe this method:

@Overrideprotected void onScrollChanged(int l, int t, int oldl, int oldt){}

This method will be triggered as long as scrollChanged. l is the scrollX we need, which is awesome ~~~

3. Calculation of animation proportions

In onScrollChanged, we get l, that is, getScrollX, that is, the width value displayed in the menu;

float scale = l * 1.0f / mMenuWidth;

Perform Division operations on the menu width and hide the menu to display the entire process. The result is 1.0 ~ 0.0 such a change interval;

With this interval, you can set an animation based on this interval;

1. First, calculate the scale ratio of the content area:

We are going to make the content area from 1.0 ~ 0.8 changes ~~

So how can we set 1.0 ~ 0.0 to 1.0 ~ 0.8 is actually very simple:

Float rightScale = 0.8f + scale * 0.2f; (scale from 1 to 0), right ~

There are three more animations:

2. Menu zoom ratio calculation

After carefully observing QQ, the menu size changes by around 0.7 ~ 1.0

Float leftScale = 1-0.3f * scale;

3. Menu transparency ratio:

We set it to 0.6 ~ 1.0; that is, 0.6f + 0.4f * (1-scale)

4. Menu x offset:

Let's take a look at QQ, which is not completely covered by the content area. We still feel a little dragged out, so our offset settings are as follows:

TranlateX = mMenuWidth * scale * 0.6f; At the beginning, let it hide a little bit ~~~

4. Complete implementation

Speaking of this, in fact, the simplest slide in the history of the previous article, to the effect of the change to QQ5.0, only a few lines of code ~~

@Overrideprotected void onScrollChanged(int l, int t, int oldl, int oldt){super.onScrollChanged(l, t, oldl, oldt);float scale = l * 1.0f / mMenuWidth;float leftScale = 1 - 0.3f * scale;float rightScale = 0.8f + scale * 0.2f;ViewHelper.setScaleX(mMenu, leftScale);ViewHelper.setScaleY(mMenu, leftScale);ViewHelper.setAlpha(mMenu, 0.6f + 0.4f * (1 - scale));ViewHelper.setTranslationX(mMenu, mMenuWidth * scale * 0.6f);ViewHelper.setPivotX(mContent, 0);ViewHelper.setPivotY(mContent, mContent.getHeight() / 2);ViewHelper.setScaleX(mContent, rightScale);ViewHelper.setScaleY(mContent, rightScale);}

Just a few lines. Here nineoldandroids used for property animation are used to maintain downward compatibility. They are mainly used to set various animations, which are described in detail above ~~~
Then, remember to declare our menu and content layout separately as our mMenu and mContent ~ No, just a few changes ~

3,

It's a scorpion, a horse, and a slide.

The drag of the ListView on the menu bar will not conflict. The previous article has been tested;

About the animation attribute range: the scope described above is particularly clear. For example, if the content is displayed at a minimum of 0.8, you can modify it if you like 0.6, including the offset and transparency;

Because the previous article has already written about how to extract attributes into custom attributes, there will be no extraction here, otherwise it will always be repeated ~

Well, there is a slide of APP writing recently. It is like this, that is, the menu bar is completely hidden in the content area. If you need this:

In fact, I still like this effect.

Implementation:

@Overrideprotected void onScrollChanged(int l, int t, int oldl, int oldt){super.onScrollChanged(l, t, oldl, oldt);float scale = l * 1.0f / mMenuWidth;//float leftScale = 1 - 0.3f * scale;//float rightScale = 0.8f + scale * 0.2f;////ViewHelper.setScaleX(mMenu, leftScale);//ViewHelper.setScaleY(mMenu, leftScale);//ViewHelper.setAlpha(mMenu, 0.6f + 0.4f * (1 - scale));ViewHelper.setTranslationX(mMenu, mMenuWidth * scale );//ViewHelper.setPivotX(mContent, 0);//ViewHelper.setPivotY(mContent, mContent.getHeight() / 2);//ViewHelper.setScaleX(mContent, rightScale);//ViewHelper.setScaleY(mContent, rightScale);}

Well, although the final implementation looks very simple, it looks like, um ~~ However, this process is not easy from scratch ~~ Various attempts, can I tell you that I have been sliding through the QQ menu ~ Haha, I have a smile. I also wrote some failed attempts in my blog, hoping to help you learn useful things ~~ YEAH !! So far, leave a message if it's okay ~~~ If you don't leave a message, please leave an email for the source code. Hey hey, make a joke ~

Download source code

Finally, I created a QQ Group for your convenience. Group Number:55032675

How to add the number of unread messages to the icon of the android QQ 50 program

The native of the custom Launcher does not have this effect.
Currently, many Android systems have been customized.

How can I know the qq tutorial at the first time?

Now, if you press the menu key for Versions later than Android, there will be a help and feedback point.
Hope to adopt