啦啦啦.....,先上效果图:
效果的概述:上下分屏,随着滑动,响应的调整上下布局的高度。
现在我们来理下实现思路:
- 从布局上来看,是上下布局即纵向布局,我们很容易就想到使用 线性布局 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,¬_¬