如何在滚动时为列表视图上方的图像添加动画效果?

huangapple go评论128阅读模式
英文:

How to animate an image above a listview when scrolling?

问题

我在我的列表视图上方有一张目前没有任何作用的图片。但是我希望当用户在列表视图中滚动时,图片能像这个例子一样进行动画效果展示。

这是一个名为StikkyHeader的旧库的示例,但似乎现在已经无法使用了。
是否还有其他类似的库可以实现相同的效果,或者是否有一种在不使用库的情况下实现它的方法呢?

英文:

I have an image above my listview that is currently doing nothing.But I want my image to be animated when the user scrolls in the listview just like
this.

This is an example of an old library called StikkyHeader ,but it doesn't seem to work now.
Is there any other libraries for the same reason or even a way I can do it without libraries?

答案1

得分: 0

请尝试这个代码:

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="300dp"
        android:minHeight="200dp">
        
        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:id="@+id/collapsingToolbar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            android:minHeight="150dp"
            app:expandedTitleMarginBottom="25dp"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <ImageView
                android:layout_width="match_parent"
                android:src="@drawable/magic_bg"
                android:scaleType="centerCrop"
                app:layout_collapseMode="parallax"
                app:layout_collapseParallaxMultiplier="0.5"
                android:layout_height="match_parent"/>

            <TextView
                android:layout_width="match_parent"
                android:text="#KeepMakingMagic"
                android:textSize="25dp"
                android:gravity="center"
                android:textColor="@color/white"
                android:textStyle="bold"
                app:layout_collapseMode="parallax"
                android:layout_marginBottom="50dp"
                android:layout_gravity="bottom"
                app:layout_collapseParallaxMultiplier="-0.1"
                android:layout_height="wrap_content"/>

        </com.google.android.material.appbar.CollapsingToolbarLayout>

    </com.google.android.material.appbar.AppBarLayout>

    <!-- You can have a ListView here instead of ScrollView, but you need to make sure the layout behavior is the same -->

    <androidx.core.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/colorAccent"
        app:layout_behavior="com.google.android.material.appbar.AppBarLayout$ScrollingViewBehavior">

        <LinearLayout
            android:layout_width="match_parent"
            android:orientation="vertical"
            android:background="@color/colorAccent"
            android:layout_height="1000dp">

        </LinearLayout>

    </androidx.core.widget.NestedScrollView>

</androidx.coordinatorlayout.widget.CoordinatorLayout>

演示:

如何在滚动时为列表视图上方的图像添加动画效果?

别忘了尝试一些效果。

英文:

Try this one

&lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?&gt;
&lt;androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android=&quot;http://schemas.android.com/apk/res/android&quot;
xmlns:app=&quot;http://schemas.android.com/apk/res-auto&quot;
xmlns:tools=&quot;http://schemas.android.com/tools&quot;
android:layout_width=&quot;match_parent&quot;
android:layout_height=&quot;match_parent&quot;
tools:context=&quot;.MainActivity&quot;&gt;
&lt;com.google.android.material.appbar.AppBarLayout
android:layout_width=&quot;match_parent&quot;
android:layout_height=&quot;300dp&quot;
android:minHeight=&quot;200dp&quot;
&gt;
&lt;com.google.android.material.appbar.CollapsingToolbarLayout
android:id=&quot;@+id/collapsingToolbar&quot;
android:layout_width=&quot;match_parent&quot;
android:layout_height=&quot;match_parent&quot;
android:fitsSystemWindows=&quot;true&quot;
android:minHeight=&quot;150dp&quot;
app:expandedTitleMarginBottom=&quot;25dp&quot;
app:layout_scrollFlags=&quot;scroll|exitUntilCollapsed&quot;
&gt;
&lt;ImageView
android:layout_width=&quot;match_parent&quot;
android:src=&quot;@drawable/magic_bg&quot;
android:scaleType=&quot;centerCrop&quot;
app:layout_collapseMode=&quot;parallax&quot;
app:layout_collapseParallaxMultiplier=&quot;0.5&quot;
android:layout_height=&quot;match_parent&quot;/&gt;
&lt;TextView
android:layout_width=&quot;match_parent&quot;
android:text=&quot;#KeepMakingMagic&quot;
android:textSize=&quot;25dp&quot;
android:gravity=&quot;center&quot;
android:textColor=&quot;@color/white&quot;
android:textStyle=&quot;bold&quot;
app:layout_collapseMode=&quot;parallax&quot;
android:layout_marginBottom=&quot;50dp&quot;
android:layout_gravity=&quot;bottom&quot;
app:layout_collapseParallaxMultiplier=&quot;-0.1&quot;
android:layout_height=&quot;wrap_content&quot;/&gt;
&lt;/com.google.android.material.appbar.CollapsingToolbarLayout&gt;
&lt;/com.google.android.material.appbar.AppBarLayout&gt;
&lt;!-- You can have list view here Instead of scrollview But you need to make sure layout behaviour is same--&gt;
&lt;androidx.core.widget.NestedScrollView
android:layout_width=&quot;match_parent&quot;
android:layout_height=&quot;match_parent&quot;
android:background=&quot;@color/colorAccent&quot;
app:layout_behavior=&quot;com.google.android.material.appbar.AppBarLayout$ScrollingViewBehavior&quot;&gt;
&lt;LinearLayout
android:layout_width=&quot;match_parent&quot;
android:orientation=&quot;vertical&quot;
android:background=&quot;@color/colorAccent&quot;
android:layout_height=&quot;1000dp&quot;&gt;
&lt;/LinearLayout&gt;
&lt;/androidx.core.widget.NestedScrollView&gt;
&lt;/androidx.coordinatorlayout.widget.CoordinatorLayout&gt;

Demo :<br><br>
如何在滚动时为列表视图上方的图像添加动画效果?

Don't forget to play with things

huangapple
  • 本文由 发表于 2020年7月23日 23:56:13
  • 转载请务必保留本文链接:https://go.coder-hub.com/63058338.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定