英文:
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
<?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 list view here Instead of scrollview But you need to make sure layout behaviour is 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>
Don't forget to play with things
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论