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;

    }

}

效果圖爲:

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

 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章