慕课学习笔记之侧滑菜单的实现

主要思路是通过自定义的HrizontalScrollView 

放了两个布局：

<LinearLayout 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:background="@drawable/img_frame_background"   
    >


    <com.imooc.qq.SlidingMenu
        android:layout_width="match_parent"
        android:layout_height="match_parent" 
       
        >


        <LinearLayout
            android:layout_width="match_parent"
            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" >
            </LinearLayout>
        </LinearLayout>
    </com.imooc.qq.SlidingMenu>


</LinearLayout>

然后：在自定义的SlidingView中

：

package com.imooc.qq;


import android.R;
import android.R.bool;
import android.content.Context;
import android.util.AttributeSet;
import android.util.DisplayMetrics;
import android.util.TypedValue;
import android.view.Display;
import android.view.MotionEvent;
import android.view.View;
import android.view.ViewGroup;
import android.view.WindowManager;
import android.widget.HorizontalScrollView;
import android.widget.LinearLayout;
import android.widget.TextView;
import android.widget.ViewAnimator;


public class SlidingMenu extends HorizontalScrollView {
boolean once = false;
LinearLayout mWrapper;
ViewGroup mMenu;
ViewGroup mContent;
int mScreenWidth;
int mMenuPadding = 150;
int mMenuRightPadding;
int mMenuWidth;


TextView item;

public SlidingMenu(Context context, AttributeSet attrs) {
super(context, attrs);
// TODO Auto-generated constructor stub
WindowManager wm = (WindowManager) context.getSystemService(context.WINDOW_SERVICE);
DisplayMetrics outMetrics = new DisplayMetrics();
wm.getDefaultDisplay().getMetrics(outMetrics);
mScreenWidth = outMetrics.widthPixels;
// 把dp轉化成PX
mMenuRightPadding = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 50,
context.getResources().getDisplayMetrics());


}


@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
// TODO Auto-generated method stub

if (!once) {
mWrapper = (LinearLayout) getChildAt(0);
mMenu = (ViewGroup) mWrapper.getChildAt(0);
mContent = (ViewGroup) mWrapper.getChildAt(1);
mMenuWidth =mMenu.getLayoutParams().width = mScreenWidth - mMenuPadding;

mContent.getLayoutParams().width = mScreenWidth;
   once=true;
   
}

super.onMeasure(widthMeasureSpec, heightMeasureSpec);
}


@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
// TODO Auto-generated method stub
super.onLayout(changed, l, t, r, b);
if (changed) {
this.scrollTo(mMenuWidth, 0);
}
}
@Override
public boolean onTouchEvent(MotionEvent ev) {
// TODO Auto-generated method stub
int action = ev.getAction();

switch (action) {
case MotionEvent.ACTION_UP:
int scrollX = getScrollX();

if (scrollX >= mMenuWidth/2) {
this.smoothScrollTo(mMenuWidth, 0);

} else {
this.smoothScrollTo(0, 0);
}
return true;
}
return super.onTouchEvent(ev);
}
@Override
protected void onScrollChanged(int l, int t, int oldl, int oldt) {
// TODO Auto-generated method stub
super.onScrollChanged(l, t, oldl, oldt);
//l的值是从1--0
float scale=(float)l*(1.0f)/mMenuWidth;
float rightScale=0.8f+0.2f*scale;
float leftScale=1.0f-scale*0.3f;
float leftAlpha=0.6f+(1-scale)*0.4f;
//设置缩放的中心点
mContent.setPivotX(0);
mContent.setPivotY(mContent.getHeight()/2);

mContent.setScaleX(rightScale);
mContent.setScaleY(rightScale);
//侧滑菜单的动画：
mMenu.setAlpha(leftAlpha);

mMenu.setScaleX(leftScale);
mMenu.setScaleY(leftScale);
   mMenu.setTranslationX(mMenuWidth*scale*0.8f);



}
}


import android.R;
import android.R.bool;
import android.content.Context;
import android.util.AttributeSet;
import android.util.DisplayMetrics;
import android.util.TypedValue;
import android.view.Display;
import android.view.MotionEvent;
import android.view.View;
import android.view.ViewGroup;
import android.view.WindowManager;
import android.widget.HorizontalScrollView;
import android.widget.LinearLayout;
import android.widget.TextView;
import android.widget.ViewAnimator;


public class SlidingMenu extends HorizontalScrollView {

//用来判断是否获取了屏幕的值与布局的初始化
boolean once = false;

LinearLayout mWrapper;
ViewGroup mMenu;
ViewGroup mContent;

int mScreenWidth;
int mMenuPadding = 150;
int mMenuRightPadding;
int mMenuWidth;


TextView item;

public SlidingMenu(Context context, AttributeSet attrs) {
super(context, attrs);
// TODO Auto-generated constructor stub
WindowManager wm = (WindowManager) context.getSystemService(context.WINDOW_SERVICE);
DisplayMetrics outMetrics = new DisplayMetrics();
wm.getDefaultDisplay().getMetrics(outMetrics);
mScreenWidth = outMetrics.widthPixels;
// 把dp轉化成PX
mMenuRightPadding = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 50,
context.getResources().getDisplayMetrics());


}


@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
// TODO Auto-generated method stub

if (!once) {

mWrapper = (LinearLayout) getChildAt(0);
mMenu = (ViewGroup) mWrapper.getChildAt(0);
mContent = (ViewGroup) mWrapper.getChildAt(1);

//菜单的宽度是屏幕的宽度 - 右边界距离
mMenuWidth =mMenu.getLayoutParams().width = mScreenWidth - mMenuPadding;
mContent.getLayoutParams().width = mScreenWidth;

       once=true;
   
}

super.onMeasure(widthMeasureSpec, heightMeasureSpec);
}


@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
// TODO Auto-generated method stub
super.onLayout(changed, l, t, r, b);
if (changed) {

this.scrollTo(mMenuWidth, 0);
}
}
@Override
public boolean onTouchEvent(MotionEvent ev) {
// TODO Auto-generated method stub
int action = ev.getAction();

switch (action) {
case MotionEvent.ACTION_UP:
int scrollX = getScrollX();
//当滑动的距离大于mMenuWidth的一半时
if (scrollX >= mMenuWidth/2) {
this.smoothScrollTo(mMenuWidth, 0);

} else {
this.smoothScrollTo(0, 0);
}
return true;
}
return super.onTouchEvent(ev);
}
@Override
protected void onScrollChanged(int l, int t, int oldl, int oldt) {
// TODO Auto-generated method stub
super.onScrollChanged(l, t, oldl, oldt);
//l的值是从1--0

float scale=(float)l*(1.0f)/mMenuWidth;

//设置mContent 的大小是从1-0.8；
float rightScale=0.8f+0.2f*scale;

//设置菜单的大小从0.7-1
float leftScale=1.0f-scale*0.3f;

//菜单的透明度从0.6-1
float leftAlpha=0.6f+(1-scale)*0.4f;
//设置缩放的中心点
mContent.setPivotX(0);
mContent.setPivotY(mContent.getHeight()/2);

mContent.setScaleX(rightScale);
mContent.setScaleY(rightScale);
//侧滑菜单的动画：
mMenu.setAlpha(leftAlpha);

mMenu.setScaleX(leftScale);
mMenu.setScaleY(leftScale);
       mMenu.setTranslationX(mMenuWidth*scale*0.8f);



}
}

在自定义的SlidingView 中实现了四个方法

：

onMeasure(): 决定了view的宽与高

onlayout():决定了View 的位置

onTouchEvent(): 监控滑动