美文网首页
自定义抽屉

自定义抽屉

作者: isakyaki | 来源:发表于2017-06-02 14:56 被阅读0次

    主要的通过实现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包。

    相关文章

      网友评论

          本文标题:自定义抽屉

          本文链接:https://www.haomeiwen.com/subject/gokufxtx.html