自定义控件 仿应用宝 管理界面的标题栏缩放效果

最近看到应用宝管理界面里面那个能缩能放的标题栏很有意思，所以自己尝试简单模仿下。

先上效果图:

实现原理:

在listview里面设置ontouch监听，判断滑动方向和蓝色区域的状态，如果蓝色区域状态是显示最大且滑动方向向上，那么缩小该区域，如果蓝色区域最小，且滑动方向向下，则放大该区域。如果区域既不最大 也不最小，那么即可放大也可缩小。

蓝色区域继承framelayout,小标题和大标题的visibile是相反设置的，也就是说只能显示一个标题。

结合代码：

开始做初始化：通过id获取两个标题栏View，并得到他们的高度和设置大标题View可见，小标题View不可见。这里需要注意一点：在绘制没有完成的情况下获取到的高度是0，那么就会出问题， 所以initData()函数要放在下面的地方执行。

http://stackoverflow.com/questions/11946424/getmeasuredheight-and-width-returning-0-after-measure
 这个网址做了详细解释

@Override    public void onWindowFocusChanged(boolean hasFocus) {        super.onWindowFocusChanged(hasFocus);        if(bigHeaderView == null && smallHeaderView == null){            initData();        }    }

private void initData() {        int bigHeaderViewId= getResources().getIdentifier("big_header_view", "id", getContext().getPackageName());        int smallHeaderViewId = getResources().getIdentifier("small_header_view", "id", getContext().getPackageName());//        System.out.println("bigHeaderViewId = " + bigHeaderViewId + "   smallHeaderViewId = " + smallHeaderViewId);        if (bigHeaderViewId != 0 && smallHeaderViewId != 0) {            bigHeaderView = findViewById(bigHeaderViewId);            smallHeaderView = findViewById(smallHeaderViewId);            heightBV = bigHeaderView.getMeasuredHeight();            currentHeightBV = heightBV;            heightSV = smallHeaderView.getMeasuredHeight();//            System.out.println("heightBV = " + heightBV + "   heightSV = " + heightSV);            bigHeaderView.setVisibility(VISIBLE);            smallHeaderView.setVisibility(INVISIBLE);            state = BIG_HEADER_VIEW_STATE;        } else {            Log.e("Error Inform", "没有设置HeaderView Id");        }    }

下面是改变蓝色区域大小的代码：

//根据滑动设置高度    public void setHeaderHeight(float dis) {        int height = (int)(currentHeightBV + dis);        if (height < heightSV) {            height = heightSV;        } else if (height > heightBV) {            height = heightBV;        }        if (bigHeaderView != null && bigHeaderView.getLayoutParams() != null) {            bigHeaderView.getLayoutParams().height = height;            System.out.println("height = " + height + "  currentHeight = " + currentHeightBV);            //计算缩放比，有了缩放比，你就可以做很多其他事情，比如控制alpha变化，控制scale变化            //像有些标题栏是根据手势移动，来改变透明度的.            float scalePercent = (height - heightSV)*1.0f / (heightBV - heightSV);            setTextViewHeight(scalePercent);            bigHeaderView.requestLayout();        } else {            Log.e(TAG, "bigHeaderView = null");        }        if(height <= heightSV){            smallHeaderView.setVisibility(VISIBLE);            bigHeaderView.setVisibility(INVISIBLE);            state = SMALL_HEADER_VIEW_STATE;        } else {            smallHeaderView.setVisibility(INVISIBLE);            bigHeaderView.setVisibility(VISIBLE);            if(height == heightBV)                state = BIG_HEADER_VIEW_STATE;            else                state = MID_HEADER_VIEW_STATE;        }    }

为了体验更好，在蓝色区域缩放到2/3以内大小的时候，自动缩小直到最小。我的实现方式是通过线程来慢慢改变高度，详见代码，注释很详细

/**     * 当位置大于heightSV 并且小于 heightBV*2/3的时候，执行平滑缩放     * 感觉自己用线程实现的平滑效果不是很好......     */    public void smoothSetHeaderHeight() {        currentHeightBV = bigHeaderView.getHeight();        final int timeCount = 1*200; //0.2秒钟 从heightBV*2/3 缩放到 heightSV        final float dis = -1 * (heightBV*2.0f/3.0f-heightSV)*1.0f/timeCount*10;//        System.out.println("currentHeightBV = " + currentHeightBV);        if(currentHeightBV > (heightBV*2 / 3) || currentHeightBV <= heightSV) {            return;        }//        System.out.println("dis = " + dis);        new Thread() {            @Override            public void run() {                for (int i = 0; i < timeCount/10; i++) {                    final float sumDis = i*dis + dis;                    post(new Runnable() {                        public void run() {                            setHeaderHeight(sumDis);                        }                    });                    try {                        sleep(10); //为了体验好点，慢慢缩放                    } catch (InterruptedException e) {                        e.printStackTrace();                    }                }            }        }.start();    }

下面贴上recycleview的事件监听代码

View.OnTouchListener onTouchListener = new View.OnTouchListener() {        @Override        public boolean onTouch(View v, MotionEvent event) {            int moveY = (int)event.getRawY();  //取得手指相对屏幕的Y坐标            if(event.getAction() == MotionEvent.ACTION_DOWN){                mDownY = event.getRawY();  //按下时候的坐标            }            if(event.getAction() == MotionEvent.ACTION_MOVE){                int dis = (int)(moveY - mDownY);     //移动距离//                System.out.println("move distance = " + dis);                int state = scrollerHeaderLayout.getState();  //当前滑动状态                //下滑时候 需要做如下操作                if(dis > 0 && !recycleView.canScrollVertically(-1)                        && (state == ScrollerHeaderLayout.SMALL_HEADER_VIEW_STATE                        || state == ScrollerHeaderLayout.MID_HEADER_VIEW_STATE)){//                    System.out.println("stateScrollerDir" + stateScrollerDir);                    /**                     * 这里逻辑是：如果你突然换方向移动，那么需要改变mDownY的坐标为"换方向的那个转折点"的Y标。                     * 并初始化当前 scrollerHeaderLayout的高度。                     */                    if(stateScrollerDir < 0) {                        mDownY = moveY;                        scrollerHeaderLayout.initCurrentHeightBV();                    }                    //改变移动状态                    stateScrollerDir = 1;                    dis = (int)(moveY - mDownY); //重新计算距离 :可能换方向移动了，原来计算的距离不对了.                    scrollerHeaderLayout.setHeaderHeight(dis); //设置高度                    return true;                }                //上滑 同下滑操作一样                if(dis < 0 && (state == ScrollerHeaderLayout.BIG_HEADER_VIEW_STATE                        || state == ScrollerHeaderLayout.MID_HEADER_VIEW_STATE)){                    if(stateScrollerDir > 0) {                        mDownY = moveY;                        scrollerHeaderLayout.initCurrentHeightBV();//                        System.out.println("mDownY = " + mDownY);                    }                    stateScrollerDir = -1;                    dis = (int)(moveY - mDownY);//                    System.out.println("-1 dis = " + dis);                    scrollerHeaderLayout.setHeaderHeight(dis);                    return true;                }                mDownY = event.getRawY();            }            if(event.getAction() == MotionEvent.ACTION_UP){                scrollerHeaderLayout.initCurrentHeightBV();                scrollerHeaderLayout.smoothSetHeaderHeight();            }            return false;        }    };

总结：这里通过线程方式实现的自动缩放致最小高度，因为是匀速的，效果有点不太好...