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: