QQ5.0左側滑動顯示效果，QQ5.0滑動顯示效果

QQ5.0左側滑動顯示效果，QQ5.0滑動顯示效果

　　前三篇為大家介紹了如何?簡單的類QQ5.0左側的側滑效果，本篇我將帶領大家一起探討一下如何真正實現QQ5.0左側的側滑效果，對於本篇的內容與之前的三篇關聯性很強，如果前三篇你已經完全掌握，對於這一篇相信也沒有什麼難處，本篇的重點在於通過Android3.0以後提供的屬性動畫實現上述顯示特效。

　　開始之前首先給大家說句抱歉，前三篇由於我自己的編碼問題，導致如果你還是以之前的代碼設計時，會出現Menu的背景圖沒有填充整個螢幕，這個怎麼解決呢？

　　在left_menu.xml中，將background修改為android:background="#0000"；

　　activity_main.xml代碼：

<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/activity_horizontal_margin"    android:paddingRight="@dimen/activity_horizontal_margin"    android:paddingTop="@dimen/activity_vertical_margin"    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="切換按鈕"                    />            </LinearLayout>                    </LinearLayout>    </com.example.menu.SlidingMenu>    </RelativeLayout>

　　將背景圖片添加藍色標註處。

　　其他部分無需改變，下面我們開始分析如何通過屬性動畫來實現上述效果：

　　/**     * 實現抽屜式側滑效果     */    @Override    protected void onScrollChanged(int l, int t, int oldl, int oldt) {//l相當於getScrollX()表示Menu左側的位移量        super.onScrollChanged(l, t, oldl, oldt);                /**         * 區別1：內容地區1.0~0.7 縮放的效果 scale : 1.0~0.0 0.7 + 0.3 * scale         *          * 區別2：菜單的位移量需要修改         *          * 區別3：菜單的顯示時有縮放以及透明度變化 縮放：0.7 ~1.0 1.0 - scale * 0.3 透明度 0.6 ~ 1.0          * 0.6+ 0.4 * (1- scale) ;         *          */                //設定Menu的顯示OR隱藏動畫        float scroll = l * 1.0f /mMenuWidth;//1~0        ViewHelper.setTranslationX(mMenu, mMenuWidth*scroll*0.7f);                //設定Menu的透明度變化        float leftScale = 0.6f+ 0.4f * (1- scroll);        ViewHelper.setScaleX(mMenu, leftScale);        ViewHelper.setScaleY(mMenu, leftScale);        //設定Menu的縮放比例        float leftAlpha = 1.0f - scroll * 0.3f;        ViewHelper.setAlpha(mMenu, leftAlpha);                //設定Content的縮放中心        ViewHelper.setPivotX(mContent, 0);        ViewHelper.setPivotY(mContent, mContent.getHeight()/2);        //設定Content的透明度變化        float rightScale = 0.7f + 0.3f * scroll;        ViewHelper.setScaleX(mContent, rightScale);        ViewHelper.setScaleY(mContent, rightScale);            }

　　需要提示的就是對於Android3.0以下的系統，不支援屬性動畫效果，在這裡我匯入了一個包，大家如果需要可以留言。好了，到這裡我們的側滑效果就完全為大家實現了，請欣賞：