簡單實現QQ的側欄效果

從暑假開始將近搞了一個星期的比賽項目，現在終於有時間去學習一些新東西了，看了一天多屬性動畫方面的知識，爲了能更好理解，我嘗試自己去實現當前QQ的抽屜動畫。 仔細觀察，現在版本QQ滑動拉出側欄時並不像是拉出抽屜，而像是把一個佈局推開，然後露出側欄；

思考了以下，思路如下，根佈局用DrawerLayout，主界面用一個相對佈局，裏面再包含兩個佈局，因爲越靠上的佈局越在底部，所以上面一個佈局用左側欄，下面佈局用左主界面。

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/drawerlayout"
    tools:context=".MainActivity">
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">
        </LinearLayout>
        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">
        </RelativeLayout>
    </RelativeLayout>
    <fragment
        android:name="com.example.qqdrawer.Fragleft"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="left" />
</android.support.v4.widget.DrawerLayout>

接下來就是主函數，關鍵代碼如下

 

mDrawerLayout=(DrawerLayout)findViewById(R.id.drawerlayout);
mDrawerLayout.setScrimColor(Color.TRANSPARENT);//去除陰影
layout1=(LinearLayout) findViewById(R.id.layout_1);
layout2=(RelativeLayout)findViewById(R.id.layout_2);
layout1.measure(0,0);
final float width=layout1.getMeasuredWidth()*0.2f;//獲取佈局寬度，並獲得左移大小
layout1.setTranslationX(-width);                 //底佈局左移
mDrawerLayout.addDrawerListener(new DrawerLayout.DrawerListener() {
    @Override
    public void onDrawerSlide(View view, float v) {
        layout1.setTranslationX(-width+width*v);               //底佈局跟着移動
        layout2.setTranslationX(view.getMeasuredWidth()*v);   //主界面佈局移動，移動長度等於抽屜的移動長度
    }

 大功告成！這樣就簡單實現了

如果再利用setAlpha()和setScale()來對控件進行縮放和設置透明度，還能實現如下效果

話說幾乎沒用到屬性動畫的東西...