自定义View实现导航栏与主面板交互效果

      利用自定义View实现导航栏与主面板的拉伸交互效果

      
     先上图：

     

  首先我们先分析这个效果

    1 手指在靠左位置向右拉的时候，导航栏会被逐步拉出，右边主面板会向向右逐步移走至屏幕一半位置

    2 导航栏的高度逐步占满屏幕，主面板高度逐步缩小

    3 导航栏透明度逐步增加，主面板透明度逐步减小

    右向左移侧是相反，就不再重复描述了

好，下面开始进入正题：

 第一步 ：首先我们明白，这个效果它是一个容器ViewGroup , 这个容器中有两个子布局，一个是导航栏，一个是主面板，为了增加灵动性，导航栏/主面板我们让它在使用这个自定义View的时候的布局文件中声明，而不是直接在绘制这个View中去实例化 ；

写一个类继承ViewGroup ,实现它的两个构造方法，注意是两个，一个是无参数的，一个是两个参数的

public class SlidingMenu extends ViewGroup {
 public SlidingMenu(Context context) {
        this(context, null);
    }
   
    public SlidingMenu(Context context, AttributeSet attrs) {
        super(context, attrs);
        init(context);
    }
}

那么我们先把容器的布局内容规定下来，在

然后再这个类中重写onFinishInflate()

方法 

 //导航栏
    private ViewGroup naviContainer;
    //内容显示区域
    private ViewGroup contentContainer;
    @Override
    protected void onFinishInflate() {
        //获取导航栏和内容显示容器
        int childCount = getChildCount();
        if (childCount != 2) {
            throw new IllegalArgumentException("本容器必须只能有2个容器作为直接Child");
        }

        View child = getChildAt(0);
        if (!(child instanceof ViewGroup)) {
            throw new IllegalArgumentException("本容器的直接Child，必须是ViewGroup!");
        }
        //实例化导航栏
        naviContainer = (ViewGroup) child;

        child = getChildAt(1);
        if (!(child instanceof ViewGroup)) {
            throw new IllegalArgumentException("本容器的直接Child，必须是ViewGroup!");
        }
       //实例化内容显示区域
        contentContainer = (ViewGroup) child;
    }

第二步，导航栏最多只会显示到屏幕的一半，所以我们在onMeasure(）方法中重新测量到导航栏和主面板的宽高

 //导航栏宽度
    private int naviWidth;
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        naviWidth = (int) (getMeasuredWidth() >> 1);
        //测量导航栏,导航栏占本容器宽度的一半
        naviContainer.measure(MeasureSpec.makeMeasureSpec(naviWidth, MeasureSpec.EXACTLY), heightMeasureSpe