Изменить высоту ImageView с помощью onScrollChangeListener - PullRequest
Новая
       11

Изменить высоту ImageView с помощью onScrollChangeListener

0 голосов
/ 14 ноября 2018

У меня есть фиксированный ImageView (200dp) в верхней части экрана и некоторое другое содержимое (тексты, списки и т. Д.) Под этим изображением, и я использую NestedScrollView.

Я хочу изменить размеризображение плавно прокручивается на экране, если я опускаюсь, и снова увеличиваю его, если я поднимаюсь (только изображение должно быть в диапазоне от 100 до 200 дп).Изображение начинается с 200dp, и когда я начинаю прокручивать, я хочу, чтобы изображение меняло свою высоту медленнее, пока оно не станет равным 100dp.После этого, если я начну прокручиваться вверх, изображение снова станет больше по высоте, пока я не достигну вершины прокрутки (когда она должна быть 200dp).

Скажем, рапорт yScroll vs Height должен быть5 к 1, я имею в виду, что для 5 координат прокрутки у высота должна изменяться на 1 дп.

Это код, который я написал на 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()
            }
        }
    }
...