仿猿题库练题滑动分屏效果

最新推荐文章于 2025-03-28 11:34:45 发布

tsongski

最新推荐文章于 2025-03-28 11:34:45 发布

阅读量2.1k

点赞数

CC 4.0 BY-SA版权

分类专栏：自定义View 文章标签：自定义View

本文链接：https://blog.csdn.net/tsongski/article/details/51695395

自定义View 专栏收录该内容

1 篇文章

订阅专栏

SplitView

概述

仿猿题库练题里面效果，两个 View 分层，滑动中间的 View 可调节上下 View 的高度

目标效果

在这里插入图片描述

实现效果

在这里插入图片描述

实现原理

继承 ViewGroup ，内部分为三个子 View ,分别是 top, mid (用来拖动的 View ), bottom

protected void setupViews() {
  mTop = getChildAt(0);
  mMid = getChildAt(1);
  mBottom = getChildAt(2);
  View handlerView = mMid.findViewById(R.id.handler);
  if (handlerView == null) {
      handlerView = mMid;
  }
  handlerView.setOnTouchListener(this);
}

维护一个 mSplitHeight ，用来设置分割线(即上下 View 的交界处)的位置
在 onMeasure(int widthMeasureSpec, int heightMeasureSpec) 中初始化 mSplitHeight 并测量子view的大小

{

  if (getChildCount() != 3) {
        throw new RuntimeException("give 3 views");
    }

    int height = MeasureSpec.getSize(heightMeasureSpec);
    if (mSplitHeight == 0) {
        mSplitHeight = (int)(height * mSplitRatio);
    }

  //measure child
  measureChild(mTop, widthMeasureSpec, MeasureSpec.makeMeasureSpec(mSplitHeight, MeasureSpec.EXACTLY));
  measureChild(mMid, widthMeasureSpec, heightMeasureSpec);
  measureChild(mBottom, widthMeasureSpec, MeasureSpec.makeMeasureSpec(getMeasuredHeight() - mSplitHeight, MeasureSpec.EXACTLY));
}

在onLayout方法中指定各个子 View 的位置

protected void onLayout(boolean changed, int l, int t, int r, int b) {
        l = t = 0;
        mTop.layout(l, t, l + mTop.getMeasuredWidth(), t + mTop.getMeasuredHeight());
        mMid.layout(l, t + mSplitHeight - mMid.getMeasuredHeight(), l + mMid.getMeasuredWidth(), t + mSplitHeight);
        mBottom.layout(l, t + mSplitHeight, l + mBottom.getMeasuredWidth(), t + mSplitHeight + mBottom.getMeasuredHeight());
    }

最后要做的就是监听 mid View 滑动时改变 mSplitHeight 的值了。
在 mid 的 onTouch(View v, MotionEvent event) 中判断，当 MotionEvent.ACTION_MOVE 时，
改变分割线的高度，然后再 requestLayout() 重新绘制即可。

{
  case MotionEvent.ACTION_MOVE:
      int delta = (int) (event.getY() - mLastMotionY);
      if (Math.abs(delta) > mTouchSlop) {
          if (delta > 0) {
              mSplitHeight += delta - mTouchSlop;
          } else {
              mSplitHeight += delta + mTouchSlop;
          }

          if (mSplitHeight < mMinSplitTop || mSplitHeight < mMid.getHeight()) {
              mSplitHeight = Math.max(mMinSplitTop, mMid.getHeight());
          } else if (mSplitHeight > getHeight() || mSplitHeight > getHeight() - mMinSplitBottom) {
              mSplitHeight = Math.min(getHeight(), getHeight() - mMinSplitBottom);
          }
          // mSplitHeight 改变之后重绘
          requestLayout();
      }
      return true;
}

项目 GitHub 地址：https://github.com/tsongski/SplitView