QQ5.0 sliding display on the left side and QQ5.0 sliding display

Source: Internet
Author: User

QQ5.0 sliding display on the left side and QQ5.0 sliding display

The first three articles show you how to implement the slide effect on the left side of QQ. In this article, I will show you how to implement the slide effect on the left side of QQ, the content in this article is highly correlated with the previous three articles. If you have mastered the first three articles, there is no difficulty in believing this article, the focus of this article is to achieve the above display effect through the property animation provided after Android3.0.

Before you begin, I would like to say sorry to you. The first three articles, due to my own coding problems, will cause the background image of the Menu to be not filled with the entire screen if you still design the code before, how can this be solved?

In left_menu.xml, modify background to android: background = "#0000 ";

Activity_main.xml code:

<RelativeLayout xmlns: android = "http://schemas.android.com/apk/res/android" xmlns: tools = "http://schemas.android.com/tools" xmlns: hyman = "http://schemas.android.com/apk/res/com.example.android_qq_view" android: layout_width = "match_parent" android: layout_height = "match_parent" android: paddingBottom = "@ dimen/activity_vertical_margin" android: paddingLeft = "@ dimen/plugin" android: paddingRight = "@ dimen/plugin" android: paddingTop = "@ dimen/plugin" tools: context = ". mainActivity "> <com. example. menu. slidingMenu android: id = "@ + id/slidingMenu" android: layout_width = "match_parent" android: layout_height = "match_parent" android: background = "@ drawable/img_frame_background" hyman: rightPadding = "100dp"> <LinearLayout android: layout_width = "wrap_content" android: layout_height = "match_parent" android: orientation = "horizontal"> <include layout = "@ layout/left_menu"/> "<LinearLayout android: layout_width =" match_parent "android: layout_height =" match_parent "android: background = "@ drawable/qq"> <Button android: id = "@ + id/button" android: layout_width = "wrap_content" android: layout_height = "wrap_content" android: text = "switch button"/> </LinearLayout> </com. example. menu. slidingMenu> </RelativeLayout>

Add a blue mark to the background image.

The other parts do not need to be changed. Next we will analyze how to achieve the above effect through property Animation:

/*** Implement drawer slide effect */@ Override protected void onScrollChanged (int l, int t, int oldl, int oldt) {// l is equivalent to getScrollX () the offset super on the left of the Menu. onScrollChanged (l, t, oldl, oldt);/*** difference 1: content area 1.0 ~ 0.7 scale: 1.0 ~ 0.0 0.7 + 0.3 * scale ** difference 2: menu offset needs to be modified ** difference 3: There are scaling and transparency changes in the menu display ZOOM: 0.7 ~ 1.0 1.0-scale * 0.3 transparency 0.6 ~ 1.0*0.6 + 0.4 * (1-scale); ** // set the display OR hide animation float scroll = l * 1.0f/mMenuWidth of the Menu; // 1 ~ 0 ViewHelper. setTranslationX (mMenu, mMenuWidth * scroll * 0.7f); // set float leftScale = 0.6f + 0.4f * (1-scroll); ViewHelper. setScaleX (mMenu, leftScale); ViewHelper. setScaleY (mMenu, leftScale); // set the Menu zoom ratio float leftAlpha = 1.0f-scroll * 0.3f; ViewHelper. setAlpha (mMenu, leftAlpha); // sets the Content's Zoom center ViewHelper. setmediatx (mContent, 0); ViewHelper. setequalty (mContent, mContent. getHeight ()/2); // set float rightScale = 0.7f + 0.3f * scroll; ViewHelper. setScaleX (mContent, rightScale); ViewHelper. setScaleY (mContent, rightScale );}

You need to note that property animation effects are not supported for systems below Android3.0. Here I have imported a package, so you can leave a message if necessary. Well, here we have achieved the smooth side effect for everyone. Please enjoy the following:

  

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.