首页 > 解决方案 > 当框出现在屏幕中间时更改框的背景颜色

问题描述

我正在尝试制作一个应用程序,当它出现在屏幕中间时,框的背景颜色会发生变化。我能够做到这一点,javascript但我在 android java 中找不到任何好的方法。这意味着我在 android java 中找不到与 , 类似的方法来构造类似的逻辑$this.scrollY。所以请帮助我实现这一目标。$this.innerHeightbox.offsetTop

activity_main.xml:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    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"
    tools:context=".MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="75dp"
        android:background="@color/skyblue"/>

    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="80dp"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp">

        <LinearLayout
            android:id="@+id/content"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">
        </LinearLayout>
    </ScrollView>
</android.support.constraint.ConstraintLayout>

MainActivity.java:

package com.example.test;

import android.support.v7.app.AppCompatActivity;
import android.os.*;
import android.widget.*;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        LinearLayout content = findViewById(R.id.content);
        for (int x=0;x<25;x++) {
            RelativeLayout element = new RelativeLayout(this);
            LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, 400);
            params.setMargins(0, 0, 0, 50);
            element.setLayoutParams(params);
            element.setBackgroundResource(R.color.green);
            content.addView(element);
        }
    }
}

MY JAVASCRIPT WORKING EXAMPLE:

window.onbeforeunload = function () {
    this.scrollTo(0, 0);
}
var content = document.getElementById("content");
for (var x=0;x<25;x++) {
    var box = document.createElement("DIV");
    box.id = "box";
    content.appendChild(box);
}
content.children[0].style.backgroundColor = "#008100";
var current_box = content.children[0],
    scroll_timeout = undefined;

window.addEventListener("scroll", function () {
    var $this = this;
    window.clearTimeout(scroll_timeout);
    scroll_timeout = setTimeout(function() {
        var middle_line = $this.scrollY + ($this.innerHeight/2);
        for (var y=0;y<content.querySelectorAll("#box").length;y++) {
            var box = content.children[y];
            if ((box.offsetTop) < middle_line && (box.offsetTop + box.clientHeight + 50) > middle_line) {
                if (box != current_box) {
                    current_box.style.backgroundColor = "#6CABF7";
                    current_box = box;
                    current_box.style.backgroundColor = "#008100";
                }
                break;
            }
        }
    }, 100);
});
body {
    margin: 0;
}
#content {
    width: 60%;
    height: 100%;
    margin: 0% 20% 0% 20%;
}
#box {
    width: 100%;
    height: 500px;
    background-color: #6CABF7;
    overflow: hidden;
    margin-bottom: 50px;
}
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div id="content"></div>         
</body>
</html>

标签: javaandroid

解决方案


如果你想对滚动事件做出反应,那么你需要监听它们。我在您的 java 代码中没有看到任何此类侦听器,但您的 javascript 代码中有一个侦听器。

我发现了这个 StackOverflow 问题,我相信它可能会对您有所帮助。

监听滚动事件horizo​​ntalscrollview android


推荐阅读