防分屏UI动画

啦啦啦.....，先上效果图：

2016-10-12_18_30_20.mp4_1476285425.gif

效果的概述：上下分屏，随着滑动，响应的调整上下布局的高度。

现在我们来理下实现思路：

从布局上来看，是上下布局即纵向布局，我们很容易就想到使用线性布局 LinearLayout，使之 orientation="vertical" 。
随着手指的上下滑动，改变了上下布局的高度。我们可以在父布局的touch 事件中监听滑动事件，然后动态的该变上下子布局的高度。可以看到的是，上下子布局的高度和就是整个父View的高度，所以设置上布局的高度为Y，下布局的高度 = 父布局高度 - Y 。
滑动的回弹效果，我们可以在ACTION_UP 事件中开启一个动画，执行未完成的滑动距离。

ok ，思路讲完，我们开始撸代码吧，写写写，写代码······

xml 布局：

布局很简单，自定义了一个线性布局 HalfLinearLayout ，包裹了两个FrameLayout，初始两个FrameLayout 高度1:1。当然FrameLayout中可以随意布局。

HalfLinearLayout

HalfLinearLayout 是我们的主角，我们在这其中主要实现了两大功能，滑动监听和动态改变子布局高度。

动态改变子布局的高度代码：

/**
 *   upPercent：上子布局的高度占比 
 *   1 - upPercent ：下子布局高度的占比 
 */
private void updateChildViewSize() { 
   int childCount = this.getChildCount(); 
   for (int i = 0; i < childCount; i++) { 
       View child = this.getChildAt(i); 
       ViewGroup.LayoutParams lp = child.getLayoutParams(); 
       lp.width = width; 
       if (i == 0) { 
           lp.height = (int) (height * upPercent); 
       } else { 
           lp.height = (int) (height * (1 - upPercent)); 
       } 
       child.setLayoutParams(lp); 
   }
}

很简单的几行代码，就是根据上子布局的高度占比 upPercent （相对父布局的高度，这里我们 upPercent 默认 0.5，因为初始是等分高度）,设置上下子布局的高度。

滑动事件监听

 //记录按下的 Y 坐标点
private float oldY;
//滑动时的Y坐标点
private float newY;
/** 
 * basePercent 表示滑动前 upPercent的值
 *
 * 如果，滑动前，布局是 上布局隐藏，下布局全屏，则 basePercent = 0；
 * 如果，滑动前，布局是 上布局全屏，下布局隐藏，则 basePercent = 1；
 * 如果，滑动前，布局是 上布局 和 下布局都是显示，则 basePercent = 0.5；
 */
private float basePercent = 0.5f;
@Override
public boolean onTouchEvent(MotionEvent event) { 
   Log.i(TAG,"onTouchEvent -- event.getAction()="+event.getAction()); 
   switch (event.getAction()){ 
       case MotionEvent.ACTION_DOWN: 
           //记录按下的 Y 坐标点 
           oldY = event.getY(); 
           break; 
       case MotionEvent.ACTION_MOVE: 
           if(oldY == 0) oldY = event.getY(); 
           //滑动时的Y坐标点 
           newY = event.getY(); 
           Log.i(TAG,"newY - oldY = "+ (newY - oldY)); 
           //主要防止误触 
           if(Math.abs(newY - oldY) > 8) { 
               //计算滑动的高度 占整个布局高度的占比 
               float percent = (newY - oldY) / getHeight(); 
               //根据滑动前，布局的状态，来修正 滑动距离的高度占比值 
               percent += basePercent; 
               Log.i(TAG, "percent = " + percent); 
               //防止越界 
               if (percent < 0) { 
                   percent = 0; 
               } 
               if (percent > 1) { 
                   percent = 1.0f; 
               } 
               //赋值 上布局高度占比值 
               upPercent = percent; 
               Log.i(TAG, "onTouchEvent--upPercent=" + upPercent); 
               //动态修改子布局的高度 
               updateChildViewSize(); 
           } 
           break; 
       case MotionEvent.ACTION_UP: 
       case MotionEvent.ACTION_CANCEL: 
           //滑动操作结束时 
           int type; 
           if(upPercent <= 0.35){ 
               //下布局展示状态，向上底部滑动动画 
               type = 1; 
               basePercent = 0; 
           }else if(upPercent <= 0.5 && upPercent > 0.35){ 
               //上下布局都展示，从上向中回弹动画 
               type = 2; 
               basePercent = 0.5f; 
           }else if(upPercent <= 0.65 && upPercent > 0.5 ){ 
               //上下布局都展示，从下向中回弹动画 
               type = 3; 
               basePercent = 0.5f; 
           }else { 
               //上布局都展示，向下底部滑动动画 
               type = 4; 
               basePercent = 1.0f; 
           }  
          //执行动画 
           animation(type); 
           oldY = 0; 
           break;
    } 
   return true;
}

在滑动监听事件中，我们主要对 ACTION_MOVE 方法监听，主要的逻辑已经在代码的注释中写的很详细了。其实，我们主要要考虑三种状态：第一种，只有上子布局显示；第二种，只有下子布局显示；第三种，上下子布局都显示。
我们需要注意的一点的是：LinearLayout的TouchEvent 的事件默认是不消费的，所以，我们要直接消费掉，返回 true。

回弹动画

private void animation(final int type){ 
   ValueAnimator anim = ValueAnimator.ofFloat(0,1); 
   anim.setDuration(500); 
   anim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {  
      @Override 
       public void onAnimationUpdate(ValueAnimator valueAnimator) { 
           if(type == 1){ 
               //下布局展示状态，向上底部滑动动画 
               //上子布局高度占比 = 未完成的滑动高度占比 - 动画消耗的高度占比 
               //未完成的高度占比 = 之前的上子布局高占比 
               upPercent -= upPercent * valueAnimator.getAnimatedFraction(); 
           }else if(type == 2){  
              //上下布局都展示，从上向中回弹动画  
              //上子布局高度占比 = 未完成的滑动高度占比 + 动画消耗的高度占比  
              //未完成的高度占比 = 0.5 - 之前的上子布局高占比   
             upPercent += (0.5 - upPercent)*valueAnimator.getAnimatedFraction();  
          }else if(type == 3){     
           //上下布局都展示，从下向中回弹动画 
               //上子布局高度占比 = 未完成的滑动高度占比 - 动画消耗的高度占比 
               //未完成的高度占比 = 之前的上子布局高占比 - 0.5  
              upPercent -= (upPercent - 0.5)*valueAnimator.getAnimatedFraction(); 
           }else{  
              //上布局都展示，向下底部滑动动画  
              //上子布局高度占比 = 未完成的滑动高度占比 + 动画消耗的高度占比 
               //未完成的高度占比 =  1- 之前的上子布局高占比  
              upPercent += (1 - upPercent) * valueAnimator.getAnimatedFraction(); 
           }  
          //动态改变子View的高度 
           updateChildViewSize();  
      } 
   }); 
   anim.start();
}

从Touch事件的监听代码中，我们可以看到，回弹动画有四种模式：第一种，下布局展示状态，向上底部滑动动画；第二种，上下布局都展示，从上向中回弹动画；第三种，上下布局都展示，从下向中回弹动画；第四种，上布局都展示，向下底部滑动动画。我们主要定义了一个属性动画，动态的改变 upPercent 值，从而改变子布局的搞度。上面代码详细介绍了四种模式的逻辑情况。

总结

好啦，我们的代码撸到这里就撸完啦。当然，代码还有许多要扩展的，比如 HalfLinearLayout 的 Touch事件与子布局内事件的冲突解决，动态的修改子布局高度的性能问题等。性能问题，我目前还没发现什么问题，不过没有测试复杂子布局的情况。Touch事件冲突问题：我想的是当上下子布局都显示时，HalfLinearLayout的可以直接消费掉事件；当只有一个子布局显示时，我们可以参考Viewpager的设计方法，对touch 的位置做判断，是否从边缘开始滑动，从而决定是否拦截和消费事件。
欢迎大家提出问题，一起探讨想法，谢谢！！！ ^_

源码在这里，喜欢的话，求star，¬_¬