啦啦啦.....，先上效果图：
2016-10-12_18_30_20.mp4_1476285425.gif
效果的概述：上下分屏，随着滑动，响应的调整上下布局的高度。
现在我们来理下实现思路：
- 从布局上来看，是上下布局即纵向布局，我们很容易就想到使用 线性布局 LinearLayout，使之 orientation="vertical" 。
- 随着手指的上下滑动，改变了上下布局的高度。我们可以在父布局的touch 事件中监听滑动事件，然后动态的该变上下子布局的高度。可以看到的是，上下子布局的高度和就是整个父View的高度，所以 设置 上布局的高度为Y，下布局的高度 = 父布局高度 - Y 。
- 滑动的回弹效果，我们可以在ACTION_UP 事件中开启一个动画，执行未完成的滑动距离。
ok ，思路讲完，我们开始撸代码吧，写写写，写代码······
xml 布局：
<?xml version="1.0" encoding="utf-8"?>
<com.ys.yoosir.nestedscrolldemo.widgets.HalfLinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="@android:color/holo_green_dark"
tools:context="com.ys.yoosir.nestedscrolldemo.SwitchActivity">
<FrameLayout
android:id="@+id/up_screen"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="@android:color/holo_blue_light">
<ImageView
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_gravity="center"
android:src="@mipmap/ic_launcher"/>
</FrameLayout>
<FrameLayout
android:id="@+id/down_screen"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="@android:color/holo_red_light">
<ImageView
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_gravity="center"
android:src="@mipmap/avatar"/>
</FrameLayout>
</com.ys.yoosir.nestedscrolldemo.widgets.HalfLinearLayout>
布局很简单，自定义了一个线性布局 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，¬_¬
网友评论