Adding animation to a ListView in order to expand/collapse content
I have a list view which uses a custom adapter in order to show my custom content. Its layout is the following.
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1">
<ImageView
android:id="@+id/itemimage"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="5"
android:scaleType="fitCenter"/>
<TextView
android:id="@+id/itemdescription"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:padding="10dp"
android:textSize="16sp"
android:layout_weight="1"/>
</LinearLayout>
<TextView
android:id="@+id/itemtext"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:text="TEXT CONTENT"
android:layout_weight="1"/>
</LinearLayout>
I would like that the listview only showed the view with the 开发者_开发问答ids itemimage and item description, keeping the itemtext hidden. The idea is to have a onclicklistener on each item of the list, in order to expand that item so it shows the itemtext content. I know I should use Tweening animation in order to expand/collapse each item, but I can't figure out how to do that.
If you need more code snippets, feel free to ask.
To do that, I built an Animation class, which animates the margin to negative values, making the item disappear.
The animation looks like this:
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();
}
}
}
I have an entire example app for this animation on my blog post
Tried Udinic's solution, but finally chose this alternative:
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>
Animate ListView implementation:
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);
}
Example calls to animate my ListView (or any View child class):
animateView(listView1, R.anim.scale_down, View.GONE);
animateView(listView1, R.anim.scale_up, View.VISIBLE);
It is working on my KitKat phone.
精彩评论