用动画展开 ListView 项
Posted
技术标签:
【中文标题】用动画展开 ListView 项【英文标题】：Expand ListView item with animation 【发布时间】：2012-09-25 15:22:21 【问题描述】：我有一个ListView。最初，ListView 包含一些数据。当用户点击一个项目时，另一个布局将动态添加到该项目，因此它的高度会增加。
现在，当项目的高度增加时，它会立即显示修改后的项目。但是，我想要的是对此进行动画处理，以便逐渐增加项目的高度。
【问题讨论】：
【参考方案1】：我想我正在寻找与所要求的相同的内容，我正在寻找一种方法来动画列表视图项的扩展，因为显示了一些新内容（我只是将某些视图的可见性从 GONE 更改为VISIBLE)。我使用了mirroredAbstraction 的答案来帮助我应用翻译动画（我不想要旋转动画）：
<translate xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/linear_interpolator"
android:fromYDelta="0"
android:toYDelta="-100%p"
android:duration="500"
/>
到每个视图。它创造了一个很好的效果，但仔细观察，listview 项目实际上突然扩展到所需的整个大小，然后动画将视图放置到位。但我想要的是随着视图变得可见，listview 项的增长效果。
我在这里找到了我想要的东西： expanding-listview-items
博主有一个指向他的 github 示例的链接，在这里： ExpandAnimationExample
如果您发现这些网站已消失，请通知我，我将提供我的副本。
他在内容上设置了负边距以使其可见，并将可见性设置为GONE：
android:layout_marginBottom="-50dip"
并编写了一个操纵底部边距的动画：
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();
...
而且它看起来非常漂亮。我找到了他对这个 SO（可能重复？）问题的答案：
Adding animation to a ListView in order to expand/collapse content
另外，如果你知道做同样事情的另一种方法，请告诉我。
【讨论】：
在这种情况下，ListView项的高度是预先知道的。但是，就我而言，它是动态的。我的意思是，展开布局的高度将在运行时知道。 是的，我明白了……我想我可能需要能够对动态添加/创建的内容产生这种影响。所以，我也在找。我想支持你的问题，让更多的人看到它，但你并没有太详细（即你忽略了动态部分！），至少，你应该改写令人困惑的陈述：“那么，现在怎么办我想要的是：当项目的高度增加时，它会突然显示修改后的项目，但是当它增加项目的高度时我需要动画。”【参考方案2】：我已经实现了一个适用于所有 Android sdk 版本的简单代码。
请参阅下面的工作和代码。
Github 代码：https://github.com/LeonardoCardoso/Animated-Expanding-ListView
有关我网站的信息：http://android.leocardz.com/animated-expanding-listview/
基本上，您必须创建一个自定义的 TranslateAnimation 和一个自定义列表适配器，并且在制作动画时，您必须更新列表视图项的当前高度并通知适配器此更改。
我们来看代码。
列表项布局
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/text_wrap"
android:layout_
android:layout_
android:orientation="horizontal"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin" >
<TextView
android:id="@+id/text"
android:layout_
android:layout_
android:textSize="18sp" >
</TextView>
</LinearLayout>
活动布局
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_
android:layout_
tools:context=".MainActivity" >
<ListView
android:id="@+id/list"
android:layout_
android:layout_
android:divider="@android:color/black"
android:dividerHeight="3dp" >
</ListView>
</RelativeLayout>
列表项类
public class ListItem
private String text;
private int collapsedHeight, currentHeight, expandedHeight;
private boolean isOpen;
private ListViewHolder holder;
private int drawable;
public ListItem(String text, int collapsedHeight, int currentHeight,
int expandedHeight)
super();
this.text = text;
this.collapsedHeight = collapsedHeight;
this.currentHeight = currentHeight;
this.expandedHeight = expandedHeight;
this.isOpen = false;
this.drawable = R.drawable.down;
public String getText()
return text;
public void setText(String text)
this.text = text;
public int getCollapsedHeight()
return collapsedHeight;
public void setCollapsedHeight(int collapsedHeight)
this.collapsedHeight = collapsedHeight;
public int getCurrentHeight()
return currentHeight;
public void setCurrentHeight(int currentHeight)
this.currentHeight = currentHeight;
public int getExpandedHeight()
return expandedHeight;
public void setExpandedHeight(int expandedHeight)
this.expandedHeight = expandedHeight;
public boolean isOpen()
return isOpen;
public void setOpen(boolean isOpen)
this.isOpen = isOpen;
public ListViewHolder getHolder()
return holder;
public void setHolder(ListViewHolder holder)
this.holder = holder;
public int getDrawable()
return drawable;
public void setDrawable(int drawable)
this.drawable = drawable;
查看Holder类
public class ListViewHolder
private LinearLayout textViewWrap;
private TextView textView;
public ListViewHolder(LinearLayout textViewWrap, TextView textView)
super();
this.textViewWrap = textViewWrap;
this.textView = textView;
public TextView getTextView()
return textView;
public void setTextView(TextView textView)
this.textView = textView;
public LinearLayout getTextViewWrap()
return textViewWrap;
public void setTextViewWrap(LinearLayout textViewWrap)
this.textViewWrap = textViewWrap;
自定义动画类
public class ResizeAnimation extends Animation
private View mView;
private float mToHeight;
private float mFromHeight;
private float mToWidth;
private float mFromWidth;
private ListAdapter mListAdapter;
private ListItem mListItem;
public ResizeAnimation(ListAdapter listAdapter, ListItem listItem,
float fromWidth, float fromHeight, float toWidth, float toHeight)
mToHeight = toHeight;
mToWidth = toWidth;
mFromHeight = fromHeight;
mFromWidth = fromWidth;
mView = listItem.getHolder().getTextViewWrap();
mListAdapter = listAdapter;
mListItem = listItem;
setDuration(200);
@Override
protected void applyTransformation(float interpolatedTime, Transformation t)
float height = (mToHeight - mFromHeight) * interpolatedTime
+ mFromHeight;
float width = (mToWidth - mFromWidth) * interpolatedTime + mFromWidth;
LayoutParams p = (LayoutParams) mView.getLayoutParams();
p.height = (int) height;
p.width = (int) width;
mListItem.setCurrentHeight(p.height);
mListAdapter.notifyDataSetChanged();
自定义列表适配器类
public class ListAdapter extends ArrayAdapter<ListItem>
private ArrayList<ListItem> listItems;
private Context context;
public ListAdapter(Context context, int textViewResourceId,
ArrayList<ListItem> listItems)
super(context, textViewResourceId, listItems);
this.listItems = listItems;
this.context = context;
@Override
@SuppressWarnings("deprecation")
public View getView(int position, View convertView, ViewGroup parent)
ListViewHolder holder = null;
ListItem listItem = listItems.get(position);
if (convertView == null)
LayoutInflater vi = (LayoutInflater) context
.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
convertView = vi.inflate(R.layout.list_item, null);
LinearLayout textViewWrap = (LinearLayout) convertView
.findViewById(R.id.text_wrap);
TextView text = (TextView) convertView.findViewById(R.id.text);
holder = new ListViewHolder(textViewWrap, text);
else
holder = (ListViewHolder) convertView.getTag();
holder.getTextView().setText(listItem.getText());
LayoutParams layoutParams = new LayoutParams(LayoutParams.FILL_PARENT,
listItem.getCurrentHeight());
holder.getTextViewWrap().setLayoutParams(layoutParams);
holder.getTextView().setCompoundDrawablesWithIntrinsicBounds(
listItem.getDrawable(), 0, 0, 0);
convertView.setTag(holder);
listItem.setHolder(holder);
return convertView;
主要活动
public class MainActivity extends Activity
private ListView listView;
private ArrayList<ListItem> listItems;
private ListAdapter adapter;
private final int COLLAPSED_HEIGHT_1 = 150, COLLAPSED_HEIGHT_2 = 200,
COLLAPSED_HEIGHT_3 = 250;
private final int EXPANDED_HEIGHT_1 = 250, EXPANDED_HEIGHT_2 = 300,
EXPANDED_HEIGHT_3 = 350, EXPANDED_HEIGHT_4 = 400;
private boolean accordion = true;
@Override
protected void onCreate(Bundle savedInstanceState)
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
listView = (ListView) findViewById(R.id.list);
listItems = new ArrayList<ListItem>();
mockItems();
adapter = new ListAdapter(this, R.layout.list_item, listItems);
listView.setAdapter(adapter);
listView.setOnItemClickListener(new OnItemClickListener()
@Override
public void onItemClick(AdapterView<?> parent, View view,
int position, long id)
toggle(view, position);
);
private void toggle(View view, final int position)
ListItem listItem = listItems.get(position);
listItem.getHolder().setTextViewWrap((LinearLayout) view);
int fromHeight = 0;
int toHeight = 0;
if (listItem.isOpen())
fromHeight = listItem.getExpandedHeight();
toHeight = listItem.getCollapsedHeight();
else
fromHeight = listItem.getCollapsedHeight();
toHeight = listItem.getExpandedHeight();
// This closes all item before the selected one opens
if (accordion)
closeAll();
toggleAnimation(listItem, position, fromHeight, toHeight, true);
private void closeAll()
int i = 0;
for (ListItem listItem : listItems)
if (listItem.isOpen())
toggleAnimation(listItem, i, listItem.getExpandedHeight(),
listItem.getCollapsedHeight(), false);
i++;
private void toggleAnimation(final ListItem listItem, final int position,
final int fromHeight, final int toHeight, final boolean goToItem)
ResizeAnimation resizeAnimation = new ResizeAnimation(adapter,
listItem, 0, fromHeight, 0, toHeight);
resizeAnimation.setAnimationListener(new AnimationListener()
@Override
public void onAnimationStart(Animation animation)
@Override
public void onAnimationRepeat(Animation animation)
@Override
public void onAnimationEnd(Animation animation)
listItem.setOpen(!listItem.isOpen());
listItem.setDrawable(listItem.isOpen() ? R.drawable.up
: R.drawable.down);
listItem.setCurrentHeight(toHeight);
adapter.notifyDataSetChanged();
if (goToItem)
goToItem(position);
);
listItem.getHolder().getTextViewWrap().startAnimation(resizeAnimation);
private void goToItem(final int position)
listView.post(new Runnable()
@Override
public void run()
try
listView.smoothScrollToPosition(position);
catch (Exception e)
listView.setSelection(position);
);
private void mockItems()
listItems
.add(new ListItem(
"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
COLLAPSED_HEIGHT_1, COLLAPSED_HEIGHT_1,
EXPANDED_HEIGHT_1));
listItems
.add(new ListItem(
"Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
COLLAPSED_HEIGHT_2, COLLAPSED_HEIGHT_2,
EXPANDED_HEIGHT_2));
listItems
.add(new ListItem(
"Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
COLLAPSED_HEIGHT_3, COLLAPSED_HEIGHT_3,
EXPANDED_HEIGHT_3));
listItems
.add(new ListItem(
"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.",
COLLAPSED_HEIGHT_2, COLLAPSED_HEIGHT_2,
EXPANDED_HEIGHT_4));
listItems
.add(new ListItem(
"At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.",
COLLAPSED_HEIGHT_1, COLLAPSED_HEIGHT_1,
EXPANDED_HEIGHT_4));
listItems
.add(new ListItem(
"Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus.",
COLLAPSED_HEIGHT_2, COLLAPSED_HEIGHT_2,
EXPANDED_HEIGHT_4));
listItems
.add(new ListItem(
"Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae.",
COLLAPSED_HEIGHT_3, COLLAPSED_HEIGHT_3,
EXPANDED_HEIGHT_3));
listItems
.add(new ListItem(
"Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.",
COLLAPSED_HEIGHT_1, COLLAPSED_HEIGHT_1,
EXPANDED_HEIGHT_4));
【讨论】：
这段代码的性能如何？看它是如何经常通知的，处理复杂的视图似乎相当繁重…… 确实如此。但是 AFAIK 没有经常通知，如果您在制作动画时滚动它，列表视图会自动丢失。【参考方案3】：使用 value animator 解决方案看起来不错：
ValueAnimator animator = ValueAnimator.ofInt(100, 300);
animator.setDuration(1000);
animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener()
@Override
public void onAnimationUpdate(ValueAnimator animation)
listViewItem.getLayoutParams().height = (Integer) animation.getAnimatedValue();
listViewItem.requestLayout();
);
animator.start();
刚看完android开发者指南，值得一读：http://developer.android.com/guide/topics/graphics/prop-animation.html
但请记住，requestLayout() 处理很繁重。因为 requestLayout() 的一次调用使得每个附近的元素，这是视觉上的影响，重新计算它的布局。最好使用负下边距（将元素的某些部分隐藏在另一个元素下）并使用以下内容显示它：
listViewItem.setTranslationY((Integer) animation.getAnimatedValue());
当然，您可以只为底部边距设置动画，就像在此问题的另一个答案中提出的那样。
【讨论】：
【参考方案4】：您必须在 Adapter 中的 ListView 中实现 Animation 才能实现您想要的，
首先创建一个基本的animation.xml文件，在res文件夹中创建一个名为anim的文件夹，然后将你的animation.xml文件放入其中。
例如我创建了一个名为 rotate_animation.xml 的示例动画
<?xml version="1.0" encoding="UTF-8"?>
<rotate
xmlns:android="http://schemas.android.com/apk/res/android"
android:fromDegrees="0"
android:toDegrees="360"
android:pivotX="50%"
android:pivotY="50%"
android:duration="400" />
然后像这样创建AnimationObject的实例
private Animation animation;
然后在你的 Adapter 实现的 getView 方法中做这样的事情
public View getView(int position, View convertView, ViewGroup parent)
View v = convertView;
ViewHolder viewHolder;
if (convertView == null)
LayoutInflater li = (LayoutInflater) mContext
.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
v = li.inflate(R.layout.my_layout, null);
viewHolder = new ViewHolder(v);
v.setTag(viewHolder);
else
viewHolder = (ViewHolder) v.getTag();
viewHolder.mAppName.setText("SomeText");
viewHolder.mAppImage.setImageDrawable(R.drawable.someImage);
animation = AnimationUtils.loadAnimation(mContext, R.anim.my_animation);
v.startAnimation(animation);
return v;
【讨论】：
【参考方案5】：我的用例只是显示更多或更少的文本。因此，例如，要从最多 2-6 行切换列表视图项的状态，可以执行此操作。它也是动画的。动画看起来不太流畅，但是...
if(!textDescriptionLenghtToggle) // simple boolean toggle
ObjectAnimator animation = ObjectAnimator.ofInt(
textViewContainingDescription,
"maxLines",
6);
animation.setDuration(300);
animation.start();
else
ObjectAnimator animation = ObjectAnimator.ofInt(
textViewContainingDescription,
"maxLines",
2);
animation.setDuration(300);
animation.start();
【讨论】：
以上是关于用动画展开 ListView 项的主要内容，如果未能解决你的问题，请参考以下文章
Flutter 动画列表：有条件地添加 ListView 项