实现QQslidingMenu侧滑效果学习笔记

声明:只是自己的学习笔记,所以,只作为博友的参考,不喜勿喷

实现思路:

自定义继承HorizontalScrollView的控件

项目github地址:

https://github.com/ysnows/ysnowsSlidingMenu

视频教程:

http://www.imooc.com/learn/211

知识点:

1. 在没有自定义控件属性的时候,会调用两个参数的Constructor:

/**
	 * 未使用自定义属性时，调用
	 * 
	 * @param context
	 * @param attrs
	 */
	public SlidingMenu(Context context, AttributeSet attrs)
	{
		this(context, attrs, 0);
	}

2.OnMeasure():决定内部View的宽he高,以及,自己的宽和高.
3.onLayout():决定子View的放置he位置.
4.获得本机的屏幕宽度(像素):

//获得屏幕的宽度和计算设置的偏移量的像素值,并计算出menu的宽度
        WindowManager windowManager = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE);
        DisplayMetrics metrics=new DisplayMetrics();
        windowManager.getDefaultDisplay().getMetrics(metrics);
        mScreenWidth=metrics.widthPixels;//得到屏幕的宽度(像素)

5.利用typedValue进行dp/sp转换成px

mMenuWidth= (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,mMenuPadding,context.getResources().getDisplayMetrics());

6.自定义viewgroup型控件的时候的子view运用

            LinearLayout wrapper = (LinearLayout) getChildAt(0);
            wrapperMenu = (ViewGroup) wrapper.getChildAt(0);
            wrapperContent = (ViewGroup) wrapper.getChildAt(1);

            wrapperMenu.getLayoutParams().width = mMenuWidth;
            wrapperContent.getLayoutParams().width = mScreenWidth;

7.偏移到哪里:

this.scrollTo(mMenuWidth,0);

8.抽屉式菜单:

   @Override
    protected void onScrollChanged(int l, int t, int oldl, int oldt) {
        super.onScrollChanged(l, t, oldl, oldt);
        float scale=l*1.0f/mMenuWidth;
        ViewHelper.setTranslationX(wrapperMenu,mMenuWidth*scale);


    }

9.实现类似QQ的最终效果:

@Override
    protected void onScrollChanged(int l, int t, int oldl, int oldt) {
        super.onScrollChanged(l, t, oldl, oldt);
        float scale=l*1.0f/mMenuWidth;//取值范围1-0
        //菜单的动画
        ViewHelper.setTranslationX(wrapperMenu,mMenuWidth*scale*0.5f);
        //菜单的缩放-->0.7-1
         float scaleMenu=1- 0.3f*scale;
        ViewHelper.setScaleX(wrapperMenu,scaleMenu);
        ViewHelper.setScaleY(wrapperMenu,scaleMenu);
        //菜单的透明度-0.4-1
        float alphaMenu=1- 0.6f*scale;
        ViewHelper.setAlpha(wrapperMenu,alphaMenu);

        //内容的动画-->缩放--->1-0.8
       float scaleContent=0.8f+0.2f*scale;
        //设置缩放的中心点
        ViewHelper.setPivotX(wrapperContent,0);
        ViewHelper.setPivotY(wrapperContent,wrapperContent.getHeight()/2);
        ViewHelper.setScaleX(wrapperContent,scaleContent);
        ViewHelper.setScaleY(wrapperContent, scaleContent);

    }

10.属性动画:
scale=1-0;