Android 容器类中控件的进入动画的实现方式 实现listview中各个item进场时的动画

一、LayoutAnimation的xml实现——layoutAnimation标签

 

1、概述

 

这部分，我们就来看看layoutAnimation标签的用法，要使用layoutAnimation只需要两步： 

第一：定义一个layoutAnimation的animation文件，如：(anim/layout_animation.xml)

 

<?xml version="1.0" encoding="utf-8"?>

<layoutAnimation xmlns:android="http://schemas.android.com/apk/res/android"

                 android:delay="1"

                 android:animationOrder="normal"

                 android:animation="@anim/slide_in_left"/>

有关它的具体意义，我们后面会讲。 

第二步：在viewGroup类型的控件中，添加android:layoutAnimation=”@anim/layout_animation”，如：

 

<ListView

        android:id="@+id/listview"

        android:layout_width="match_parent"

        android:layout_height="match_parent"

        android:layoutAnimation="@anim/layout_animation"

--------------------- 

1.GridLayoutAnimation的XML实现——gridLayoutAnimation

前篇给大家讲了LayoutAnimation的知识，LayoutAnimation虽能实现ViewGroup的进入动画，但只能在创建时有效。在创建后，再往里添加控件就不会再有动画。在API 11后，又添加了两个能实现在创建后添加控件仍能应用动画的方法，分别是android:animateLayoutChanges属性和LayoutTransition类。这篇文章就来简单说一下他们的用法。由于他们的API 等级必须>=11，API等级稍高，且存在较多问题，并不建议读者使用，本篇只讲解具体用法，不做深究.

--------------------- 

 

2.android:animateLayoutChanges属性

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

<LinearLayout
            android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:orientation="horizontal">

<Button
                android:id="@+id/add_btn"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="添加控件"/>

<Button
                android:id="@+id/remove_btn"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="移除控件"/>
</LinearLayout>


<LinearLayout
            android:id="@+id/layoutTransitionGroup"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:animateLayoutChanges="true"
                    android:orientation="vertical"/>

</LinearLayout>

LayoutTransaction

http://blog.csdn.net/aigestudio/article/details/41799811

从效果图中可以看到，当每个Item进入的时候，都添加了动画。前面我们说了layoutAnimation和LayoutTransition所存在的问题，那抛开这两个函数，我们要如何实现Item进入动画呢？ 

别忘了，ListView在得到每个Item时会调用BaseAdapter的getView方法！getView中每一个convertView就是当前要显示的Item所对应的View，所以我们直接对convertView添加动画不就好了。

--------------------- 

 

实现listview中各个item进场时的动画

 

Item添加动画——初步实现

 

1、动画文件(bottom_in_anim.xml)

 

先定义从底部进入的动画：

<?xml version="1.0" encoding="utf-8"?>

<set xmlns:android="http://schemas.android.com/apk/res/android"

     android:duration="1000">

    <translate android:fromYDelta="100%" android:toYDelta="0"/>

    <alpha android:fromAlpha="0" android:toAlpha="1"/>

</set>

这段动画不难理解，效果是从底部进入，alpha值从0变到1；

2、在Adapter中添加动画代码

 

首先，我们在ListAdapter中初始化的时候，加载动画：

public class ListAdapter extends BaseAdapter {

    …………

    private Animation animation;

 

    public ListAdapter(Context context, ListView listView, List<Drawable> drawables, int length) {

        …………

        animation = AnimationUtils.loadAnimation(mContext,R.anim.bottom_in_anim);

    }

    …………

} 

然后在getView的时候为每个convertView添加上动画

public View getView(int position, View convertView, ViewGroup parent) {

   ViewHolder holder = null;

 

   if (convertView == null) {

 

       holder = new ViewHolder();

       convertView = mInflater.inflate(R.layout.item_layout, null);

       holder.mImageView = (ImageView) convertView.findViewById(R.id.img);

       holder.mTextView = (TextView) convertView.findViewById(R.id.text);

   } else {

       holder = (ViewHolder) convertView.getTag();

   }

   convertView.startAnimation(animation);

   convertView.setTag(holder);

 

   holder.mImageView.setImageDrawable(mDrawableList.get(position % mDrawableList.size()));

   holder.mTextView.setText(position+"");

 

   return convertView;

}

让一个view开始动画非常简单，只需要调用convertView.startAnimation(animation);即可；这样就可以实现在构造item的时候就开始动画 

ListAdapter完整代码如下

public class ListAdapter extends BaseAdapter {

    private List<Drawable> mDrawableList = new ArrayList<>();

    private int mLength = 0;

    private LayoutInflater mInflater;

    private Context mContext;

    private ListView mListView;

    private Animation animation;

 

    public ListAdapter(Context context, ListView listView, List<Drawable> drawables, int length) {

        mDrawableList.addAll(drawables);

        mLength = length;

        mInflater = LayoutInflater.from(context);

        mContext = context;

        mListView = listView;

        animation = AnimationUtils.loadAnimation(mContext,R.anim.bottom_in_anim);

    }

 

    @Override

    public int getCount() {

        return mLength;

    }

 

    @Override

    public Object getItem(int position) {

        return mDrawableList.get(position % mDrawableList.size());

    }

 

    @Override

    public long getItemId(int position) {

        return position;

    }

 

    @Override

    public View getView(int position, View convertView, ViewGroup parent) {

        ViewHolder holder = null;

 

        if (convertView == null) {

 

            holder = new ViewHolder();

            convertView = mInflater.inflate(R.layout.item_layout, null);

            holder.mImageView = (ImageView) convertView.findViewById(R.id.img);

            holder.mTextView = (TextView) convertView.findViewById(R.id.text);

        } else {

            holder = (ViewHolder) convertView.getTag();

        }

        convertView.startAnimation(animation);

        convertView.setTag(holder);

 

        holder.mImageView.setImageDrawable(mDrawableList.get(position % mDrawableList.size()));

        holder.mTextView.setText(position+"");

 

        return convertView;

    }

 

    public class ViewHolder {

        public ImageView mImageView;

        public TextView mTextView;

    }

}

效果图为：

---------------------