Springen Scrollen beim Wechseln von Fragmenten

In einer ScrollView wechsle ich dynamisch zwischen zwei Fragmenten mit unterschiedlichen Höhen. Das führt leider zum Springen. Man kann es in der folgenden Animation sehen:

1. Ich scrolle nach unten, bis ich die Schaltfläche "gelb anzeigen" erreiche.
2. Durch Drücken von "gelb anzeigen" wird ein riesiges blaues Fragment durch ein winziges gelbes Fragment ersetzt. In diesem Fall springen beide Tasten zum Ende des Bildschirms.

Ich möchte, dass beide Tasten an derselben Position bleiben, wenn Sie zum gelben Fragment wechseln. Wie kann das gemacht werden?

Quellcode verfügbar unter https://github.com/wondering639/stack-dynamiccontent bzw. https://github.com/wondering639/stack-dynamiccontent.git

Relevante Codefragmente:

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>

<androidx.core.widget.NestedScrollView 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:id="@+id/myScrollView"
android:layout_width="match_parent"
android:layout_height="match_parent">

<androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/textView"
        android:layout_width="0dp"
        android:layout_height="800dp"
        android:background="@color/colorAccent"
        android:text="@string/long_text"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/button_fragment1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginLeft="16dp"
        android:text="show blue"
        app:layout_constraintEnd_toStartOf="@+id/button_fragment2"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView" />

    <Button
        android:id="@+id/button_fragment2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginEnd="16dp"
        android:layout_marginRight="16dp"
        android:text="show yellow"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toEndOf="@+id/button_fragment1"
        app:layout_constraintTop_toBottomOf="@+id/textView" />

    <FrameLayout
        android:id="@+id/fragment_container"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toBottomOf="@+id/button_fragment2">

    </FrameLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

MainActivity.kt

package com.example.dynamiccontent

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.Button

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        // onClick handlers
        findViewById<Button>(R.id.button_fragment1).setOnClickListener {
            insertBlueFragment()
        }

        findViewById<Button>(R.id.button_fragment2).setOnClickListener {
            insertYellowFragment()
        }


        // by default show the blue fragment
        insertBlueFragment()
    }


    private fun insertYellowFragment() {
        val transaction = supportFragmentManager.beginTransaction()
        transaction.replace(R.id.fragment_container, YellowFragment())
        transaction.commit()
    }


    private fun insertBlueFragment() {
        val transaction = supportFragmentManager.beginTransaction()
        transaction.replace(R.id.fragment_container, BlueFragment())
        transaction.commit()
    }


}

fragment_blue.xml:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="400dp"
android:background="#0000ff"
tools:context=".BlueFragment" />

fragment_yellow.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="20dp"
android:background="#ffff00"
tools:context=".YellowFragment" />

HINWEIS

Bitte beachten Sie, dass dies natürlich ein Mindestarbeitsbeispiel ist, um mein Problem aufzuzeigen. In meinem realen Projekt habe ich auch Ansichten unter dem @+id/fragment_container. Daher @+id/fragment_containerist es für mich keine Option , eine feste Größe anzugeben - dies würde beim Umschalten auf das niedrige gelbe Fragment einen großen leeren Bereich verursachen.

UPDATE: Überblick über die vorgeschlagenen Lösungen

Ich habe die vorgeschlagenen Lösungen zu Testzwecken implementiert und meine persönlichen Erfahrungen mit ihnen hinzugefügt.

Antwort von Cheticamp, https://stackoverflow.com/a/60323255

-> verfügbar unter https://github.com/wondering639/stack-dynamiccontent/tree/60323255

-> FrameLayout umschließt Inhalt und Funktionscode

Antwort von Pavneet_Singh, https://stackoverflow.com/a/60310807

-> verfügbar unter https://github.com/wondering639/stack-dynamiccontent/tree/60310807

-> FrameLayout erhält die Größe des blauen Fragments. Also kein Content Wrapping. Wenn Sie zum gelben Fragment wechseln, besteht eine Lücke zwischen diesem und dem darauf folgenden Inhalt (falls ein Inhalt darauf folgt). Kein zusätzliches Rendering! ** Update ** Es wurde eine zweite Version bereitgestellt, die zeigt, wie es ohne Lücken geht. Überprüfen Sie die Kommentare zur Antwort.

Antwort von Ben P., https://stackoverflow.com/a/60251036

-> verfügbar unter https://github.com/wondering639/stack-dynamiccontent/tree/60251036

-> FrameLayout umschließt den Inhalt. Mehr Code als die Lösung von Cheticamp. Das zweimalige Berühren der Schaltfläche "Gelb anzeigen" führt zu einem "Fehler" (Schaltflächen springen nach unten, eigentlich meine ursprüngliche Ausgabe). Man könnte darüber streiten, nur die Schaltfläche "Gelb anzeigen" nach dem Wechsel zu deaktivieren, daher würde ich dies nicht als echtes Problem betrachten.

Update : Um die anderen Ansichten direkt unter dem zu behalten framelayoutund das Szenario automatisch zu behandeln, müssen Sie onMeasuredie automatische Behandlung implementieren. Führen Sie daher die folgenden Schritte aus

• Erstellen Sie eine benutzerdefinierte ConstraintLayoutals (oder verwenden Sie die MaxHeightFrameConstraintLayout-Bibliothek ):

import android.content.Context
import android.os.Build
import android.util.AttributeSet
import androidx.constraintlayout.widget.ConstraintLayout
import kotlin.math.max

/**
 * Created by Pavneet_Singh on 2020-02-23.
 */

class MaxHeightConstraintLayout @kotlin.jvm.JvmOverloads constructor(
    context: Context,
    attrs: AttributeSet? = null,
    defStyleAttr: Int = 0
) : ConstraintLayout(context, attrs, defStyleAttr){

    private var _maxHeight: Int = 0

    // required to support the minHeight attribute
    private var _minHeight = attrs?.getAttributeValue(
        "http://schemas.android.com/apk/res/android",
        "minHeight"
    )?.substringBefore(".")?.toInt() ?: 0

    override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {

        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN) {
            _minHeight = minHeight
        }

        var maxValue = max(_maxHeight, max(height, _minHeight))

        if (maxValue != 0 && && maxValue > minHeight) {
            minHeight = maxValue
        }
        _maxHeight = maxValue
        super.onMeasure(widthMeasureSpec, heightMeasureSpec)
    }

}

und verwenden Sie es in Ihrem Layout anstelle von ConstraintLayout

<?xml version="1.0" encoding="utf-8"?>

<androidx.core.widget.NestedScrollView 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:id="@+id/myScrollView"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.example.pavneet_singh.temp.MaxHeightConstraintLayout
        android:id="@+id/constraint"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity">

        <TextView
            android:id="@+id/textView"
            android:layout_width="0dp"
            android:layout_height="800dp"
            android:background="@color/colorAccent"
            android:text="Some long text"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <Button
            android:id="@+id/button_fragment1"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginStart="16dp"
            android:layout_marginLeft="16dp"
            android:text="show blue"
            app:layout_constraintEnd_toStartOf="@+id/button_fragment2"
            app:layout_constraintHorizontal_bias="0.3"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/textView" />

        <Button
            android:id="@+id/button_fragment2"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginEnd="16dp"
            android:layout_marginRight="16dp"
            android:text="show yellow"
            app:layout_constraintHorizontal_bias="0.3"
            app:layout_constraintStart_toEndOf="@+id/button_fragment1"
            app:layout_constraintTop_toBottomOf="@+id/textView" />

        <Button
            android:id="@+id/button_fragment3"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginEnd="16dp"
            android:layout_marginRight="16dp"
            android:text="show green"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.3"
            app:layout_constraintStart_toEndOf="@+id/button_fragment2"
            app:layout_constraintTop_toBottomOf="@+id/textView" />

        <FrameLayout
            android:id="@+id/fragment_container"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_constraintTop_toBottomOf="@id/button_fragment3" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:text="additional text\nMore data"
            android:textSize="24dp"
            app:layout_constraintTop_toBottomOf="@+id/fragment_container" />

    </com.example.pavneet_singh.temp.MaxHeightConstraintLayout>

</androidx.core.widget.NestedScrollView>

Dadurch wird die Höhe verfolgt und bei jedem Fragmentwechsel angewendet.

Ausgabe:

Hinweis: Wie bereits in den Kommentaren erwähnt , führt das Festlegen von minHeight zu einem zusätzlichen Rendering-Durchgang und kann in der aktuellen Version von nicht vermieden werden ConstraintLayout.

Alter Ansatz mit benutzerdefiniertem FrameLayout

Dies ist eine interessante Anforderung, und mein Ansatz besteht darin, sie durch Erstellen einer benutzerdefinierten Ansicht zu lösen.

Idee :

Meine Idee für die Lösung besteht darin, die Höhe des Containers anzupassen, indem die Spur des größten Kindes oder der Gesamthöhe der Kinder im Container beibehalten wird.

Versuche :

Meine ersten Versuche basierten darauf, das vorhandene Verhalten zu NestedScrollViewändern, indem es erweitert wurde, aber es bietet keinen Zugriff auf alle erforderlichen Daten oder Methoden. Die Anpassung führte zu einer schlechten Unterstützung für alle Szenarien und Randfälle.

Später erreichte ich die Lösung, indem ich einen benutzerdefinierten FramelayoutAnsatz mit einem anderen Ansatz erstellte.

Lösungsimplementierung

Während ich das benutzerdefinierte Verhalten von Phasen der Höhenmessung implementierte, habe ich die Höhe vertieft und manipuliert, getSuggestedMinimumHeightwährend ich die Größe von Kindern verfolgte, um die optimierte Lösung zu implementieren, da dies kein zusätzliches oder explizites Rendern verursacht, da die Höhe während des internen Renderns verwaltet wird Erstellen Sie eine benutzerdefinierte FrameLayoutKlasse, um die Lösung zu implementieren, und überschreiben Sie Folgendes getSuggestedMinimumHeight:

class MaxChildHeightFrameLayout @JvmOverloads constructor(
    context: Context,
    attrs: AttributeSet? = null,
    defStyleAttr: Int = 0
) : FrameLayout(context, attrs, defStyleAttr) {

    // to keep track of max height
    private var maxHeight: Int = 0

    // required to get support the minHeight attribute
    private val minHeight = attrs?.getAttributeValue(
        "http://schemas.android.com/apk/res/android",
        "minHeight"
    )?.substringBefore(".")?.toInt() ?: 0


    override fun getSuggestedMinimumHeight(): Int {
        var maxChildHeight = 0
        for (i in 0 until childCount) {
            maxChildHeight = max(maxChildHeight, getChildAt(i).measuredHeight)
        }
        if (maxHeight != 0 && layoutParams.height < (maxHeight - maxChildHeight) && maxHeight > maxChildHeight) {
            return maxHeight
        } else if (maxHeight == 0 || maxHeight < maxChildHeight) {
            maxHeight = maxChildHeight
        }
        return if (background == null) minHeight else max(
            minHeight,
            background.minimumHeight
        )
    }

}

Ersetzen Sie nun das FrameLayoutdurch MaxChildHeightFrameLayoutin activity_main.xmlals:

<?xml version="1.0" encoding="utf-8"?>

<androidx.core.widget.NestedScrollView 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:id="@+id/myScrollView"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity">

        <TextView
            android:id="@+id/textView"
            android:layout_width="0dp"
            android:layout_height="800dp"
            android:background="@color/colorAccent"
            android:text="Some long text"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <Button
            android:id="@+id/button_fragment1"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginStart="16dp"
            android:layout_marginLeft="16dp"
            android:text="show blue"
            app:layout_constraintEnd_toStartOf="@+id/button_fragment2"
            app:layout_constraintHorizontal_bias="0.5"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/textView" />

        <Button
            android:id="@+id/button_fragment2"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginEnd="16dp"
            android:layout_marginRight="16dp"
            android:text="show yellow"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.5"
            app:layout_constraintStart_toEndOf="@+id/button_fragment1"
            app:layout_constraintTop_toBottomOf="@+id/textView" />

        <com.example.pavneet_singh.temp.MaxChildHeightFrameLayout
            android:id="@+id/fragment_container"
            android:layout_width="match_parent"
            android:minHeight="2dp"
            android:layout_height="wrap_content"
            app:layout_constraintTop_toBottomOf="@+id/button_fragment2"/>

    </androidx.constraintlayout.widget.ConstraintLayout>
</androidx.core.widget.NestedScrollView>

getSuggestedMinimumHeight() wird verwendet, um die Höhe der Ansicht während des Rendering-Lebenszyklus der Ansicht zu berechnen.

Ausgabe:

Mit mehr Ansichten, Fragment und unterschiedlicher Höhe. (400 dp, 20 dp bzw. 500 dp)

Eine einfache Lösung besteht darin, die Mindesthöhe des ConstraintLayout in NestedScrollView anzupassen, bevor Fragmente gewechselt werden . Um ein Springen zu verhindern, muss die Höhe des ConstraintLayout größer oder gleich sein

1. Der Betrag, um den die NestedScrollView in Richtung "y" gescrollt hat

Plus

2. die Höhe der NestedScrollView .

Der folgende Code kapselt dieses Konzept:

private fun adjustMinHeight(nsv: NestedScrollView, layout: ConstraintLayout) {
    layout.minHeight = nsv.scrollY + nsv.height
}

Bitte beachten Sie, dass layout.minimumHeightdies für ConstraintLayout nicht funktioniert . Sie müssen verwenden layout.minHeight.

Gehen Sie wie folgt vor, um diese Funktion aufzurufen:

private fun insertYellowFragment() {
    val transaction = supportFragmentManager.beginTransaction()
    transaction.replace(R.id.fragment_container, YellowFragment())
    transaction.commit()

    val nsv = findViewById<NestedScrollView>(R.id.myScrollView)
    val layout = findViewById<ConstraintLayout>(R.id.constraintLayout)
    adjustMinHeight(nsv, layout)
}

Ähnlich verhält es sich mit insertBlueFragment () . Sie können dies natürlich vereinfachen, indem Sie findViewById () einmal ausführen .

Hier ist ein kurzes Video der Ergebnisse.

Im Video habe ich unten eine Textansicht hinzugefügt, um zusätzliche Elemente darzustellen, die möglicherweise in Ihrem Layout unterhalb des Fragments vorhanden sind. Wenn Sie diese Textansicht löschen, funktioniert der Code weiterhin, aber unten wird ein Leerzeichen angezeigt. So sieht das aus:

Wenn die Ansichten unter dem Fragment die Bildlaufansicht nicht ausfüllen, werden unten die zusätzlichen Ansichten sowie der Leerraum angezeigt.

Ihr FrameLayoutInneres activity_main.xmlhat ein Höhenattribut von wrap_content.

Ihre untergeordneten Fragmentlayouts bestimmen die Höhenunterschiede, die Sie sehen.

Sollte Ihre XML für die untergeordneten Fragmente veröffentlichen

Versuchen Sie, eine bestimmte Höhe auf die FrameLayoutin Ihrem einzustellenactivity_main.xml

Ich habe dieses Problem gelöst, indem ich einen Layout-Listener erstellt habe, der die "vorherige" Höhe verfolgt und der ScrollView eine Auffüllung hinzufügt, wenn die neue Höhe geringer als zuvor ist.

• HeightLayoutListener.kt

class HeightLayoutListener(
        private val activity: MainActivity,
        private val root: View,
        private val previousHeight: Int,
        private val targetScroll: Int
) : ViewTreeObserver.OnGlobalLayoutListener {

    override fun onGlobalLayout() {
        root.viewTreeObserver.removeOnGlobalLayoutListener(this)

        val padding = max((previousHeight - root.height), 0)
        activity.setPaddingBottom(padding)
        activity.setScrollPosition(targetScroll)
    }

    companion object {

        fun create(fragment: Fragment): HeightLayoutListener {
            val activity = fragment.activity as MainActivity
            val root = fragment.view!!
            val previousHeight = fragment.requireArguments().getInt("height")
            val targetScroll = fragment.requireArguments().getInt("scroll")

            return HeightLayoutListener(activity, root, previousHeight, targetScroll)
        }
    }
}

Fügen Sie diese Methode beiden Fragmenten hinzu, um diesen Listener zu aktivieren:

override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
    super.onViewCreated(view, savedInstanceState)

    val listener = HeightLayoutListener.create(this)
    view.viewTreeObserver.addOnGlobalLayoutListener(listener)
}

Dies sind die Methoden, die der Listener aufruft, um die ScrollView tatsächlich zu aktualisieren. Fügen Sie sie Ihrer Aktivität hinzu:

fun setPaddingBottom(padding: Int) {
    val wrapper = findViewById<View>(R.id.wrapper) // add this ID to your ConstraintLayout
    wrapper.setPadding(0, 0, 0, padding)

    val widthMeasureSpec = View.MeasureSpec.makeMeasureSpec(wrapper.width, View.MeasureSpec.EXACTLY)
    val heightMeasureSpec = View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED)
    wrapper.measure(widthMeasureSpec, heightMeasureSpec)
    wrapper.layout(0, 0, wrapper.measuredWidth, wrapper.measuredHeight)
}

fun setScrollPosition(scrollY: Int) {
    val scroll = findViewById<NestedScrollView>(R.id.myScrollView)
    scroll.scrollY = scrollY
}

Und Sie müssen Argumente für Ihre Fragmente festlegen, damit der Hörer die vorherige Höhe und die vorherige Bildlaufposition kennt. Stellen Sie also sicher, dass Sie sie zu Ihren Fragmenttransaktionen hinzufügen:

private fun insertYellowFragment() {
    val fragment = YellowFragment().apply {
        this.arguments = createArgs()
    }

    val transaction = supportFragmentManager.beginTransaction()
    transaction.replace(R.id.fragment_container, fragment)
    transaction.commit()
}


private fun insertBlueFragment() {
    val fragment = BlueFragment().apply {
        this.arguments = createArgs()
    }

    val transaction = supportFragmentManager.beginTransaction()
    transaction.replace(R.id.fragment_container, fragment)
    transaction.commit()
}

private fun createArgs(): Bundle {
    val scroll = findViewById<NestedScrollView>(R.id.myScrollView)
    val container = findViewById<View>(R.id.fragment_container)

    return Bundle().apply {
        putInt("scroll", scroll.scrollY)
        putInt("height", container.height)
    }
}

Und das sollte es tun!