Изменение размера представления в зависимости от смещения или высоты Appbar

Question

Я пытался подражать очень удивительному переходу Appbar ~ Cardview в пользовательском интерфейсе Trivago, но мне почти не повезло почти неделю, я знаю, что это дизайн панели приложений / свертывания / координатора, но я уже исчерпал себя, пытаясь, поэтому яв итоге вычислили смещение панели приложения, добавив его (отрицательный, поэтому он будет вычтен) к высоте макета представления,

// its a negative so if you add it, it will subtract
view.layoutParams.height = initialHeight + appbarOffset

Это работало как шарм, пока я не бросил его! .. иногдавысота представления не завершена, виновником является смещение панели приложения, если вы ее перевернете, она не будет продолжать давать вам свое минимальное и максимальное значение ... оставляя высоту представления зависимой от него неполной ... пожалуйста, посмотритена моем простом xml ..

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout 
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/appbar_layout_activity"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">

<android.support.design.widget.AppBarLayout
    android:id="@+id/appbar"
    android:layout_width="match_parent"
    android:background="@color/colorPrimaryDark"
    android:layout_height="300dp">

    <android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/collapsing_toolbar_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed">

    </android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>

<android.support.v7.widget.CardView
    android:id="@+id/cardView"
    android:layout_width="match_parent"
    android:layout_height="250dp"
    android:scaleType="centerCrop"
    android:layout_margin="30dp"
    app:cardBackgroundColor="#ffffff"/>

<android.support.v4.widget.NestedScrollView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior">

    <android.support.constraint.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <TextView
            android:id="@+id/coupons_lst"
            android:layout_width="match_parent"
            android:layout_height="1000dp"
            android:background="@color/colorAccent"/>

        <TextView
            android:layout_width="match_parent"
            android:layout_height="1000dp"
            android:background="@color/colorPrimaryDark"
            app:layout_constraintTop_toBottomOf="@id/coupons_lst"/>
    </android.support.constraint.ConstraintLayout>

</android.support.v4.widget.NestedScrollView>

вот как я это делаю на стороне котлина

   appbar.addOnOffsetChangedListener(AppBarLayout.OnOffsetChangedListener { 
            _, offset ->

        val positiveOffset = offset * -1

        if (positiveOffset > 10) {

            val layoutParams = cardView.layoutParams
            layoutParams.height = heightFromViewTreeObserver - positiveOffset
            cardView.layoutParams = layoutParams
        }
    })

Начальная высота просмотра

При прокрутке вверх или вниз (медленно)

При быстрой прокрутке или прокрутке

Мне очень трудно подражатьспособ trivago сделать высоту зрения dВ зависимости от смещения или высоты панели приложения, если я помещу ее в сворачивающуюся панель инструментов, ее верхняя часть не останавливается из своего положения, а поднимается вверх, чего я не желаю ...

Любая помощь будетс благодарностью ...

Answer 1

Это то, что я пытался и настраивал много раз, понимая, как это делает Trivago ..

 <android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">

<android.support.design.widget.AppBarLayout
    android:id="@+id/app_bar_layout"
    android:layout_width="match_parent"
    android:layout_height="300dp"
    android:background="#cececece"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    android:fitsSystemWindows="true">

    <android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/collapsing_toolbar"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#cecece"
        app:layout_scrollFlags="scroll|exitUntilCollapsed">

    </android.support.design.widget.CollapsingToolbarLayout>

</android.support.design.widget.AppBarLayout>

<android.support.design.widget.AppBarLayout
    android:id="@+id/app_bar_layout3"
    android:layout_width="match_parent"
    android:layout_height="300dp"
    android:layout_margin="50dp"
    android:background="#cececece">

    <android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/collapsing_toolba3r"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#cecece"
        app:layout_scrollFlags="scroll|enterAlways">

        <android.support.v7.widget.CardView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_collapseMode="parallax"
            app:layout_collapseParallaxMultiplier="0.9"
            app:cardBackgroundColor="#ffffff00"/>

    </android.support.design.widget.CollapsingToolbarLayout>

</android.support.design.widget.AppBarLayout>

<android.support.v4.widget.NestedScrollView
    android:id="@+id/nestedShit"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior">

    <android.support.constraint.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <TextView
            android:id="@+id/coupons_lst"
            android:layout_width="match_parent"
            android:layout_height="1000dp"
            android:background="@color/colorAccent"/>

        <TextView
            android:layout_width="match_parent"
            android:layout_height="1000dp"
            android:background="@color/colorPrimaryDark"
            app:layout_constraintTop_toBottomOf="@id/coupons_lst"/>
    </android.support.constraint.ConstraintLayout>

</android.support.v4.widget.NestedScrollView>

Два appbarlayouts, это приближается к тому, чего я хочу достичь, но проблема в том, что appbarlayouts мерцают ...

Answer 2

Я вижу несколько вещей, которые могут быть.1. Всякий раз, когда вы используете ConstraintLayout, вы должны реализовать ограничения для вертикальных и горизонтальных дочерних представлений.Неспособность сделать это приводит к странным вещам пользовательского интерфейса.Пример вот так.

<android.support.constraint.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">
<TextView
    android:id="@+id/coupons_lst"
    android:layout_width="match_parent"
    android:layout_height="1000dp"
    android:background="@color/colorAccent"
    app:layout_constraintTop_toBottomOf="parent"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintBottom_toTopOf="someId"/>
<TextView
    android:id="@+id/someId"
    android:layout_width="match_parent"
    android:layout_height="1000dp"
    android:background="@color/colorPrimaryDark"
    app:layout_constraintTop_toBottomOf="@id/coupons_lst"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRigh_toRightOf="parent"/>
</android.support.constraint.ConstraintLayout>

Далее я также заметил, что вы не соединяете макеты с родительским макетом.У вас есть открывающий тег Layout, но я не видел, чтобы в вашем опубликованном коде не было информации, было ли это преднамеренно или нет.

Последнее, но не менее важное: необычные проблемы с пользовательским интерфейсом, с которыми я недавно сталкивался, были не установленыВысота моего макета панели инструментов "? attr / actionBarSize".Попробуйте установить это на своем

<android.support.design.widget.AppBarLayout
    android:id="@+id/appbar"
    android:layout_width="match_parent"
    android:background="@color/colorPrimaryDark"
    android:layout_height="300dp">

<android.support.design.widget.CollapsingToolbarLayout
    android:id="@+id/collapsing_toolbar_layout"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed">

    </android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>