自定义抽屉

2017-06-02  本文已影响0人  isakyaki

主要的通过实现DrawerListener来实现抽屉划出后主屏幕的缩放效果的~

1.xml代码如下

<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/draw"
    android:background="@drawable/aa"
    tools:context=".MainActivity" >

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/home" >

        <Button
            android:onClick="onclick"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="点击" 
            android:layout_alignParentRight="true"/>
    </RelativeLayout>
    
    <fragment
        android:name="com.example.drawerlayoutqqdemo.FragmentLeft"
        android:layout_gravity="start"
        android:layout_width="200dp"
        android:layout_height="match_parent"
        android:tag="LEFT"/>
    <fragment
        android:name="com.example.drawerlayoutqqdemo.FragmentRight"
        android:layout_gravity="end"
        android:layout_width="100dp"
        android:layout_height="match_parent"
        android:tag="RIGHT"/>

</android.support.v4.widget.DrawerLayout>

其中的两个fragment是左右抽屉的两个布局,我是运用了fragment的写法,
其实写到这里就可以实现抽屉的侧拉功能了,不过我这里要展现的是侧拉抽屉时主页面缩放的效果,如下图

我的主页面放了一张图片和一个Button按钮:


content.png

左边的抽屉拉出来的效果:


left.png
右边的抽屉设置了不可拉出,点击Button按钮弹出:
right.png

2.其实代码也很简单了,MainActivity代码如下~

···
public class MainActivity extends FragmentActivity implements DrawerListener{

private DrawerLayout draw;

protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    draw=(DrawerLayout)findViewById(R.id.draw);
    draw.setDrawerListener(this);
    draw.setScrimColor(color.transparent);//抽屉滑出后的主页面透明
    draw.setDrawerLockMode(DrawerLayout.LOCK_MODE_LOCKED_CLOSED, Gravity.END);
}

//Button的onClick方法
public void onclick(View v){
    draw.openDrawer(Gravity.END);
    draw.setDrawerLockMode(DrawerLayout.LOCK_MODE_UNLOCKED, Gravity.END);
}
/**
 * DrawerListener实现的方法
 */
public void onDrawerClosed(View arg0) {
    //抽屉关闭时调用
    draw.setDrawerLockMode(DrawerLayout.LOCK_MODE_LOCKED_CLOSED, Gravity.END);
    draw.setDrawerLockMode(DrawerLayout.LOCK_MODE_UNLOCKED, Gravity.START);
}

public void onDrawerOpened(View arg0) {
    //抽屉打开后调用
    if(arg0.getTag().equals("RIGHT")){
        draw.setDrawerLockMode(DrawerLayout.LOCK_MODE_LOCKED_CLOSED, Gravity.START);
    }
}

public void onDrawerSlide(View arg0, float arg1) {//抽屉打开过程中调用
    //获得主视图的第一个
    View mContent=draw.getChildAt(0);
    //当前滑动的菜单
    View mMenu = arg0;
    //左菜单的的划出剩余比例   arg1:划出的长度,范围0-1
    float scale=1-arg1;
    //获得菜单的宽度
    int menuWidth=mMenu.getMeasuredWidth();
    //计算划出左菜单时主视图的缩放比例
    float leftScale=0.8f+scale*0.2f;
    //菜单滑出时缩放主页面
    ViewHelper.setScaleX(mContent, leftScale);
    ViewHelper.setScaleY(mContent, leftScale);
    //抽屉区域滑出时的缩放效果
    ViewHelper.setScaleX(mMenu, 0.7f + 0.3f * arg1);
    ViewHelper.setScaleY(mMenu, 0.7f + 0.3f * arg1);
    ViewHelper.setAlpha(mMenu, 0.6f + 0.4f * arg1);//透明度的渐变动画效果
    //位移动画效果
    if(arg0.getTag().equals("LEFT")){
        ViewHelper.setTranslationX(mContent, menuWidth * arg1);//位移动画效果
    } else {
        ViewHelper.setTranslationX(mContent, -menuWidth * arg1);
    }
}

public void onDrawerStateChanged(int arg0) {
    //抽屉状态改变后调用
}

}

···

最后,我是用eclipes写的,所以有引jar包。

上一篇下一篇

猜你喜欢

热点阅读