Question

我在屏幕顶部有一个固定的ImageView（200dp），在该图像下还有一些其他内容（文本，列表等），我正在使用NestedScrollView。

当我向下滚动屏幕时，我想平滑地调整图像的大小；如果向上滑动，则要再次增大图像的大小（图像只能在100dp-200dp范围内）。图像开始于200dp，当我开始滚动时，我希望图像改变其高度变慢直到其等于100dp。此后，如果我开始向上滚动，则图像的高度应再次变大，直到到达滚动顶部（应为200dp为止）。

让我们说yScroll与Height的比例应该为5到1，我的意思是对于y的5个滚动坐标，高度应修改1dp。

那是我在Kotlin中编写的代码，但是也可以在Java中进行响应。

它仅能缩小图像的尺寸（我不知道如何在向上滚动时放大图像），而另一个问题可能是，如果我将在屏幕上部上下滚动，图像也会调整大小，我只希望调整大小：向下滚动时图像较小，向上滚动时图像较大。

nested_scroll_view?.viewTreeObserver?.addOnScrollChangedListener {
        val scrollY = nested_scroll_view?.scrollY

        // 200 = height size, 100 = half height size
        if (scrollY != null) {
            if (scrollY in 100..200) {
                photoIv.layoutParams.height = photoIv.layoutParams?.height!! - 1
                photoIv.requestLayout()
            }
        }
    }

编辑：我用Javascript编写了类似的代码，将产生相同的效果。我想在Android中获得它。

<script>
    function myFunc(scrollTop)
    {
        var scrollSpeed = parseFloat(document.getElementById('tSpeed').value);
        document.getElementById('pheader').style.marginTop = 0 - Math.min(scrollTop*scrollSpeed/2,50); 
        document.getElementById('dcontainer').style.top = 200 - Math.min(scrollTop*scrollSpeed,100);
    }
</script>
<body style="background-color: lightgoldenrodyellow;">
 <div id="pcontainer" style="overflow:hidden; height:200px; width:600px; z-index:1; position: absolute; top: 0px;">
   <img id="pheader" src="test.jpg" style="height:200px; width:600px; margin-top: 0px;" />
  </div>
 <div id="dcontainer"
    onscroll="myFunc(this.scrollTop);"
    style="overflow-y:scroll; background-color: white; height:400px; width:600px; padding-top:0px; z-index:2;position: absolute; top: 200px;">
   blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>
  </div>
  <input type="text" value="1" id="tSpeed" style="position: absolute; top: 650px;" />
</body>

编辑：这是我到目前为止所取得的成就，但是问题是图像在滚动的第一部分上晃动了（如果我按住并保持了鼠标左键并向下滚动），但是如果我使用滚轮，则图像会变小，但滚动区当然会跳到最后。

    nested_scroll_view?.viewTreeObserver?.addOnScrollChangedListener {
        val scrollY = nested_scroll_view?.scrollY

        if (scrollY != null) {
            val photoMarginsUpDown = Math.min(scrollY, 100) 

            if(photoMarginsUpDown <= 100) {
                val marginLayoutParams = photoIv.layoutParams as ViewGroup.MarginLayoutParams
                marginLayoutParams.setMargins(0, -photoMarginsUpDown, 0, -photoMarginsUpDown)
                photoIv.requestLayout()
            }
        }
    }

使用onScrollChangeListener更改ImageView的高度

0 个答案: