高级UI<第四十七篇>：NestedScrolling扩展（添加头和尾）

在上一篇文章中，我使用NestedScrollingParent和NestedScrollingChild并结合辅助类NestedScrollingParentHelper和NestedScrollingChildHelper实现了以下效果：

49.gif

UI界面由三个部分组成，分别是图片、标题、主体，但是一般在现实需求中，标题默认是最上面的，那么，有没有办法让界面默认显示标题和主体，当下滑时才会显示图片，图片作为头部，顺便添加下尾部。

答案是必须有，下面开始分步骤说明。

首先看一下布局实现

<?xml version="1.0" encoding="utf-8"?>
<com.zyc.hezuo.aaademo.MyCustomNestedScrollingParent
    android:id="@+id/nestedparent"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    xmlns:android="http://schemas.android.com/apk/res/android">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:textSize="20sp"
        android:gravity="center"
        android:background="#E9A8E9"
        android:text="我是标题"/>


    <com.zyc.hezuo.aaademo.MyCustomNestedScrollingChild
        android:id="@+id/nestedchild"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">


        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="#FFFFFF"
            android:text="意内容我是任容我是任意内容我是任意内容我是任意内容我是任意内容我是任意内容我是任意内容我是任意内容我是任意内容意内容我是任容我是任意内容我是任意内容我是任意内容我是任意内容我是任意内容我是任意内容我是任意内容我是任意内容"
            android:textSize="26sp"/>

    </com.zyc.hezuo.aaademo.MyCustomNestedScrollingChild>

</com.zyc.hezuo.aaademo.MyCustomNestedScrollingParent>

使用自定义NestedScrollingParent和自定义NestedScrollingChild完成嵌套布局，这两个类的完整代码稍后贴出。

该布局的效果如下：

图片.png

然后贴出自定义NestedScrollingChild的实现代码

public class MyCustomNestedScrollingChild extends LinearLayout implements NestedScrollingChild {

    private NestedScrollingChildHelper mNestedScrollingChildHelper;
    private final int[] offset = new int[2]; //偏移量
    private final int[] consumed = new int[2]; //消费
    private int lastY;

    public MyCustomNestedScrollingChild(Context context) {
        super(context);
    }

    public MyCustomNestedScrollingChild(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
    }

    public MyCustomNestedScrollingChild(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                //记录触摸时的Y轴方向
                lastY = (int) event.getRawY();
                startNestedScroll(ViewCompat.SCROLL_AXIS_VERTICAL);
                break;
            case MotionEvent.ACTION_MOVE:
                int y = (int) (event.getRawY());
                int dy = y - lastY;//dy为屏幕上滑动的偏移量
                lastY = y;
                dispatchNestedPreScroll(0, dy, consumed, offset);

                break;
        }

        return true;
    }

    //初始化helper对象
    private NestedScrollingChildHelper getScrollingChildHelper() {
        if (mNestedScrollingChildHelper == null) {
            mNestedScrollingChildHelper = new NestedScrollingChildHelper(this);
            mNestedScrollingChildHelper.setNestedScrollingEnabled(true);
        }
        return mNestedScrollingChildHelper;
    }

    @Override
    public void setNestedScrollingEnabled(boolean enabled) {        //设置滚动事件可用性
        getScrollingChildHelper().setNestedScrollingEnabled(enabled);
    }

    @Override
    public boolean isNestedScrollingEnabled() {//是否可以滚动
        return getScrollingChildHelper().isNestedScrollingEnabled();
    }

    @Override
    public boolean startNestedScroll(int axes) {//开始滚动
        Log.d("yunchong", "child ---- startNestedScroll");

        return getScrollingChildHelper().startNestedScroll(axes);
    }

    @Override
    public void stopNestedScroll() {//停止滚动，清空滚动状态
        getScrollingChildHelper().stopNestedScroll();
    }

    @Override
    public boolean hasNestedScrollingParent() {//判断是否含有对应的NestedScrollingParent
        return getScrollingChildHelper().hasNestedScrollingParent();
    }

    @Override
    public boolean dispatchNestedScroll(int dxConsumed, int dyConsumed, int dxUnconsumed, int dyUnconsumed, int[] offsetInWindow) {
        //在子view进行滚动之后调用此方法，询问父view是否还要进行余下(unconsumed)的滚动。
        //前四个参数为输入参数，用于告诉父view已经消费和尚未消费的距离，最后一个参数为输出参数，用于子view获取父view位置的偏移量。
        //如果父view接收了它的滚动参数，进行了部分消费，则这个函数返回true，否则为false
        return getScrollingChildHelper().dispatchNestedScroll(dxConsumed, dyConsumed, dxUnconsumed, dyUnconsumed, offsetInWindow);
    }

    @Override
    public boolean dispatchNestedPreScroll(int dx, int dy, int[] consumed, int[] offsetInWindow) {
        //在子view自己进行滚动之前调用此方法，询问父view是否要在子view之前进行滚动。
        //此方法的前两个参数用于告诉父View此次要滚动的距离；而第三第四个参数用于子view获取父view消费掉的距离和父view位置的偏移量。
        return getScrollingChildHelper().dispatchNestedPreScroll(dx, dy, consumed, offsetInWindow);
    }

    @Override
    public boolean dispatchNestedFling(float velocityX, float velocityY, boolean consumed) {
        return getScrollingChildHelper().dispatchNestedFling(velocityX, velocityY, consumed);
    }

    @Override
    public boolean dispatchNestedPreFling(float velocityX, float velocityY) {
        return getScrollingChildHelper().dispatchNestedPreFling(velocityX, velocityY);
    }

}

这段代码的核心都在onTouchEvent这个方法里，dispatchNestedPreScroll方法将滑动偏移量传递给父view，startNestedScroll确定父view是否会配合子view实现滑动。

最后，开始来自定义NestedScrollingParent，代码如下：

public class MyCustomNestedScrollingParent extends LinearLayout implements NestedScrollingParent {

    //头部图片最大高度
    private static final int MAX_HEIGHT = 500;

    //头
    private ImageView headerView;
    //尾
    private View footerView;
    //目标view
    private View childView;


    public MyCustomNestedScrollingParent(Context context) {
        this(context, null);
    }

    public MyCustomNestedScrollingParent(Context context, AttributeSet attrs) {
        super(context, attrs);
        //默认方向为垂直
        setOrientation(LinearLayout.VERTICAL);

        //头
        headerView = new ImageView(context);
        headerView.setScaleType(ImageView.ScaleType.CENTER_CROP);
        headerView.setImageDrawable(getResources().getDrawable(R.mipmap.demo));

        //尾
        footerView = LayoutInflater.from(getContext()).inflate(R.layout.footer_layout, null, false);
    }


    //当前视图完全加载完毕，显示在屏幕上后执行
    @Override
    protected void onFinishInflate() {
        super.onFinishInflate();

        //找出目标view
        for(int index = 0;index < getChildCount();index ++){
            if(getChildAt(index) instanceof MyCustomNestedScrollingChild){
                childView = getChildAt(index);
            }
        }

        LayoutParams layoutParams = new LayoutParams(LayoutParams.MATCH_PARENT, MAX_HEIGHT);
        //添加头
        addView(headerView, 0, layoutParams);
        //添加尾
        addView(footerView, getChildCount());
        // 上移，即隐藏header
        scrollBy(0, MAX_HEIGHT);

    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        ViewGroup.LayoutParams params = childView.getLayoutParams();
        //标题高度
        int titleHeight = (int) (50 * getContext().getResources().getDisplayMetrics().density + 0.5);
        params.height = getMeasuredHeight() - titleHeight;

    }

    @Override
    public boolean onStartNestedScroll(View child, View target, int nestedScrollAxes) {
        //如果当前触摸的view是MyCustomNestedScrollingChild则返回true
        if (target instanceof MyCustomNestedScrollingChild) {
            return true;
        }
        return false;
    }

    @Override
    public void onStopNestedScroll(View target) {

    }

    //先于child滚动
    //前3个为输入参数，最后一个是输出参数
    @Override
    public void onNestedPreScroll(View target, int dx, int dy, int[] consumed) {
        // 如果在自定义ViewGroup之上还有父View交给我来处理
        getParent().requestDisallowInterceptTouchEvent(true);

        //滑动父view
        scrollBy(0, -dy);

        consumed[1] = dy;
    }

    //后于child滚动
    @Override
    public void onNestedScroll(View target, int dxConsumed, int dyConsumed, int dxUnconsumed, int dyUnconsumed) {

    }

    @Override
    public boolean onNestedPreFling(View target, float velocityX, float velocityY) {
        //是否消费了手指滑动事件
        return false;
    }

    @Override
    public boolean onNestedFling(View target, float velocityX, float velocityY, boolean consumed) {
        //是否消费了手指滑动事件
        return false;
    }

    /**
     * 限制滑动 移动y轴不能超出最大范围
     */
    @Override
    public void scrollTo(int x, int y) {

        footerView.getLayoutParams().height = (int) (100 * getContext().getResources().getDisplayMetrics().density + 0.5);

        if (y < 0) {
            y = 0;
        } else if (y > MAX_HEIGHT + footerView.getHeight()) {
            y = MAX_HEIGHT + footerView.getHeight();
        }
        super.scrollTo(x, y);
    }

}

最终效果如下：

50.gif

MyCustomNestedScrollingParent的实现我大致说明一下：

（1）当屏幕中的MyCustomNestedScrollingParent加载完成时（包括所有的子视图），会执行onFinishInflate方法，所以，在这个方法里动态添加头和尾最为合适，计算头布局的高度（假设为y），最后将MyCustomNestedScrollingParent向上滑动距离为y的偏移量。代码如下：

//当前视图完全加载完毕，显示在屏幕上后执行
@Override
protected void onFinishInflate() {
    super.onFinishInflate();

    //找出目标view
    for(int index = 0;index < getChildCount();index ++){
        if(getChildAt(index) instanceof MyCustomNestedScrollingChild){
            childView = getChildAt(index);
        }
    }

    LayoutParams layoutParams = new LayoutParams(LayoutParams.MATCH_PARENT, MAX_HEIGHT);
    //添加头
    addView(headerView, 0, layoutParams);
    //添加尾
    addView(footerView, getChildCount());
    // 上移，即隐藏header
    scrollBy(0, MAX_HEIGHT);

}

但是，scrollBy之后，主题布局的高度不会变化，所以，必须要在scrollBy之前将提前修改主体布局的高度。在添加头和尾时，使用了addView方法，查看源码之后发现，一旦执行这个方法之后布局就会重新测量，执行onMeasure方法，所以，完全可以在这个方法里调整主体布局的高度，如下：

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    ViewGroup.LayoutParams params = childView.getLayoutParams();
    //标题高度
    int titleHeight = (int) (50 * getContext().getResources().getDisplayMetrics().density + 0.5);
    params.height = getMeasuredHeight() - titleHeight;

}

在onStartNestedScroll方法中给出返回值，只有当目标view是MyCustomNestedScrollingChild才允许被滑动，代码如下：

@Override
public boolean onStartNestedScroll(View child, View target, int nestedScrollAxes) {
    //如果当前触摸的view是MyCustomNestedScrollingChild则返回true
    if (target instanceof MyCustomNestedScrollingChild) {
        return true;
    }
    return false;
}

当手指滑动主题布局时，父view也会跟着一起滑动，此时，自定义MyCustomNestedScrollingParent的onNestedPreScroll方法会不断被执行，代码如下：

//前3个为输入参数，最后一个是输出参数
@Override
public void onNestedPreScroll(View target, int dx, int dy, int[] consumed) {
    // 如果在自定义ViewGroup之上还有父View交给我来处理
    getParent().requestDisallowInterceptTouchEvent(true);
    //滑动父view
    scrollBy(0, -dy);

    consumed[1] = dy;
}

最后，为了控制滑动范围，需要重写scrollTo方法，具体实现如下：

/**
 * 限制滑动 移动y轴不能超出最大范围
 */
@Override
public void scrollTo(int x, int y) {

    footerView.getLayoutParams().height = (int) (100 * getContext().getResources().getDisplayMetrics().density + 0.5);

    if (y < 0) {
        y = 0;
    } else if (y > MAX_HEIGHT + footerView.getHeight()) {
        y = MAX_HEIGHT + footerView.getHeight();
    }
    super.scrollTo(x, y);
}
下篇预知

以上案例中并没有发生Fling事件，因为在子view中并没有将Fling的速度值传递给父view，下一篇将实现Fling事件。

[本章完...]

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 212,657评论 6赞 492
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 90,662评论 3赞 385
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 158,143评论 0赞 348
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 56,732评论 1赞 284
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 65,837评论 6赞 386
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 50,036评论 1赞 291
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,126评论 3赞 410
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 37,868评论 0赞 268
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,315评论 1赞 303
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,641评论 2赞 327
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,773评论 1赞 341
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,470评论 4赞 333
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,126评论 3赞 317
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,859评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,095评论 1赞 267
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 46,584评论 2赞 362
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 43,676评论 2赞 351