将动画添加到 ListView 以展开/折叠内容

Posted

技术标签:

【中文标题】将动画添加到 ListView 以展开/折叠内容【英文标题】:Adding animation to a ListView in order to expand/collapse content 【发布时间】:2011-04-20 13:37:30 【问题描述】:

我有一个列表视图,它使用自定义适配器来显示我的自定义内容。它的布局如下。

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_
    android:layout_>
    <LinearLayout
        android:orientation="horizontal"
        android:layout_
        android:layout_
        android:layout_weight="1">
        <ImageView
            android:id="@+id/itemimage"
            android:layout_
            android:layout_
            android:layout_weight="5"
            android:scaleType="fitCenter"/>
        <TextView
            android:id="@+id/itemdescription"
            android:layout_
            android:layout_
            android:padding="10dp"
            android:textSize="16sp"
            android:layout_weight="1"/>
    </LinearLayout>    
    <TextView
            android:id="@+id/itemtext"
            android:layout_
            android:layout_
            android:text="TEXT CONTENT"
            android:layout_weight="1"/>
</LinearLayout>    

我希望列表视图只显示带有 ids itemimage 和 item description 的视图,保持 itemtext 隐藏。 这个想法是在列表的每个项目上都有一个 onclicklistener,以便扩展该项目,以便显示 itemtext 内容。我知道我应该使用补间动画来展开/折叠每个项目,但我不知道该怎么做。

有人可以帮我吗?如果您需要更多代码 sn-ps,请随时询问。

提前致谢。

【问题讨论】:

你好,你终于弄明白了吗?我会对解决方案感兴趣。 【参考方案1】:

为此,我构建了一个 Animation 类,它将边距设置为负值,使项目消失。

动画是这样的:

public class ExpandAnimation extends Animation 
@Override
protected void applyTransformation(float interpolatedTime, Transformation t) 
    super.applyTransformation(interpolatedTime, t);

    if (interpolatedTime < 1.0f) 

        // Calculating the new bottom margin, and setting it
        mViewLayoutParams.bottomMargin = mMarginStart
                + (int) ((mMarginEnd - mMarginStart) * interpolatedTime);

        // Invalidating the layout, making us seeing the changes we made
        mAnimatedView.requestLayout();
    


我的博客 post 上有这个动画的完整示例应用程序

【讨论】:

【参考方案2】:

试过乌迪尼克的方案,最后还是选择了这个方案:

res/anim/scale_down.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >
<scale
    android:duration="700"
    android:fromXScale="1.0"
    android:fromYScale="1.0"
    android:pivotX="50%"
    android:pivotY="0%"
    android:toXScale="1.0"
    android:toYScale="0.0" />
</set>

动画 ListView 实现:

protected void animateView(final View v, final int animResId, final int endVisibility)
    Animation anim = AnimationUtils.loadAnimation(getApplicationContext(),
            animResId);
    anim.setAnimationListener(new Animation.AnimationListener() 
        public void onAnimationStart(Animation animation) 
            v.setVisibility(View.VISIBLE);
        
        public void onAnimationEnd(Animation animation) 
            v.setVisibility(endVisibility);
        
        public void onAnimationRepeat(Animation animation) 
    );
    v.startAnimation(anim);

为我的 ListView(或任何 View 子类)设置动画的调用示例:

animateView(listView1, R.anim.scale_down, View.GONE);
animateView(listView1, R.anim.scale_up, View.VISIBLE);

它在我的 KitKat 手机上工作。

【讨论】:

以上是关于将动画添加到 ListView 以展开/折叠内容的主要内容,如果未能解决你的问题,请参考以下文章

用动画展开 ListView 项

如何在 SwiftUI 中制作“显示”式的折叠/展开动画?

高度约束动画“跳跃”

展开 ListView 中一行的动画

动画按钮从一个点到另一个点

React:如何在内容大小未知时为展开和折叠 Div 设置动画