WedX - журнал о программировании и компьютерных науках

Как свернуть ImageView, вложенный в CoordinatorLayout

у меня следующий макет

<CoordinatorLayout>

    <CardView>
        <LinearLayout>
            <ImageView />
            <View />
        </LinearLayout>
    </CardView>

    <RecyclerView />

</CoordinatorLayout>

Я просто хочу скрыть ImageView с анимацией параллакса всякий раз, когда RecyclerView прокручивается вниз, и показывать ImageView всякий раз, когда RecyclerView прокручивается вверх. Я узнал, что такого поведения можно добиться с помощью CoordinatorLayout.


Ответы:


1

Для эффекта параллакса вам нужно использовать AppBarLayout и CollapsingToolbarLayout. Вы можете попробовать поместить ImageView с атрибутом

app:layout_collapseMode="parallax"

внутри CollapsingToolbarLayout над панелью инструментов

Подробный код с помощью CoordinatorLayout

<android.support.design.widget.CoordinatorLayout

android:id="@+id/main_content"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
app:statusBarBackground="@color/colorPrimaryDark"
android:fitsSystemWindows="true"
tools:context="com.example.android">

<android.support.design.widget.AppBarLayout android:id="@+id/appbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/AppTheme.AppBarOverlay"
    android:fitsSystemWindows="true"
    android:elevation="4dp"
    >
    <android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/toolbar_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:titleEnabled="false"
        android:background="@color/colorPrimaryDarkTransparent"
        app:layout_scrollFlags="scroll|exitUntilCollapsed"
        app:contentScrim="?attr/colorPrimary"
        >
        <ImageView
            android:layout_width="match_parent"
            android:layout_height="208dp"
            android:scaleType="centerCrop"
            android:src="@drawable/image_you_want"
            app:layout_collapseMode="parallax"
            android:background="@color/colorPrimaryDark"

            />


        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="56dp"
            app:popupTheme="@style/AppTheme.PopupOverlay"
            android:background="@color/colorPrimaryDarkTransparent2"
            app:titleTextAppearance="@style/AppBarTitleappearance"
            app:subtitleTextAppearance="@style/AppBarSubtitleApppearanceLight"
            app:layout_collapseMode="pin"
            app:layout_scrollFlags="scroll|enterAlways">

        </android.support.v7.widget.Toolbar>

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

    <android.support.design.widget.TabLayout
        android:id="@+id/tabs"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabTextColor="@color/white"
        app:tabSelectedTextColor="@color/white"
        app:tabIndicatorHeight="3dp"
        app:tabMode="scrollable"
        app:tabGravity="center"
        android:elevation="4dp"
        app:tabIndicatorColor="@color/ornage"
        app:tabTextAppearance="@style/NavigationTabTextAppeareance"
        />


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

Make sure you have following namespaces in your root tag of the layout

xmlns:tools="https://schemas.android.com/tools"
xmlns:app="https://schemas.android.com/apk/res-auto"

В соответствии с вашим требованием вы можете использовать любой макет в этой позиции с атрибутом

app:layout_collapseMode="parallax"

Я надеюсь, что вы получите некоторую помощь от этого.

25.08.2017

2

Представление, которое вы хотите свернуть, должно быть заключено в CollapsingToolbarLayout внутри AppBarLayout.

Попробуйте следующую структуру:

<....CoordinatorLayout
    ....
    ... 
    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fitsSystemWindows="true"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

            <android.support.design.widget.CollapsingToolbarLayout
                android:id="@+id/collapsing_toolbar"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:fitsSystemWindows="true"
                app:contentScrim="?attr/colorPrimary"
                app:expandedTitleMarginEnd="64dp"
                app:expandedTitleMarginStart="48dp"
                app:layout_scrollFlags="scroll|exitUntilCollapsed">

                <!-- Your collapsing content will goes here -->

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

     <...NestedScrollView
         ..... 
         app:layout_behavior="@string/appbar_scrolling_view_behavior"/>
</....CoordinatorLayout>
25.08.2017
Новые материалы

Объяснение документов 02: BERT
BERT представил двухступенчатую структуру обучения: предварительное обучение и тонкая настройка. Во время предварительного обучения модель обучается на неразмеченных данных с помощью..

Как проанализировать работу вашего классификатора?
Не всегда просто знать, какие показатели использовать С развитием глубокого обучения все больше и больше людей учатся обучать свой первый классификатор. Но как только вы закончите..

Работа с цепями Маркова, часть 4 (Машинное обучение)
Нелинейные цепи Маркова с агрегатором и их приложения (arXiv) Автор : Бар Лайт Аннотация: Изучаются свойства подкласса случайных процессов, называемых дискретными нелинейными цепями Маркова..

Crazy Laravel Livewire упростил мне создание электронной коммерции (панель администратора и API) [Часть 3]
Как вы сегодня, ребята? В этой части мы создадим CRUD для данных о продукте. Думаю, в этой части я не буду слишком много делиться теорией, но чаще буду делиться своим кодом. Потому что..

Использование машинного обучения и Python для классификации 1000 сезонов новичков MLB Hitter
Чему может научиться машина, глядя на сезоны новичков 1000 игроков MLB? Это то, что исследует это приложение. В этом процессе мы будем использовать неконтролируемое обучение, чтобы..

Учебные заметки: создание моего первого пакета Node.js
Это мои обучающие заметки, когда я научился создавать свой самый первый пакет Node.js, распространяемый через npm. Оглавление Глоссарий I. Новый пакет 1.1 советы по инициализации..

Забудьте о Matplotlib: улучшите визуализацию данных с помощью умопомрачительных функций Seaborn!
Примечание. Эта запись в блоге предполагает базовое знакомство с Python и концепциями анализа данных. Привет, энтузиасты данных! Добро пожаловать в мой блог, где я расскажу о невероятных..


Для любых предложений по сайту: [email protected]