Android5.0 ListView特效的簡單實現

Android5.0中對於動畫可所謂是情有獨鍾，在設計規范中大量展現了listview的動畫，其實也就是一個目的：將items動畫顯示出來。這個看起來很炫的效果，其實實現也蠻簡單的，我下面就來用動畫簡單實現一下。

 

一、在xml文件中建立動畫文件

這一步我推薦在xml中寫動畫，好處是你整個應用都可以調用這一種效果，保證了風格而且減少冗余。對於動畫我一貫的態度是：簡單的動畫用xml文件，復雜的動畫用ObjectAnimation。

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/decelerate_interpolator"
    android:shareInterpolator="true">

    <translate
        android:duration="1300"
        android:fromXDelta="0%"
        android:fromYDelta="100%"
        android:toXDelta="0%"
        android:toYDelta="0%" />

    <alpha
        android:duration="1300"
        android:fromAlpha="0"
        android:toAlpha="1.0" />

</set>

這里可以看見我寫了兩個動畫，一個是從無到有漸變的，一個是從下到上的移動。為了方便演示，我把動畫時間弄得比較長了。

 

二、在代碼中進行配置

package com.example.googleplusliststyle;

import java.util.Arrays;
import java.util.List;
import java.util.Locale;

import android.app.Activity;
import android.os.Bundle;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.view.animation.LayoutAnimationController;
import android.widget.ArrayAdapter;
import android.widget.ListView;

public class MainActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        final ListView listView = (ListView)findViewById(R.id.listView);
        
        List<String> data = Arrays.asList(Locale.getISOCountries());// get demo list data
        ArrayAdapter<String> adapter = new ArrayAdapter<String>(this, R.layout.item, R.id.myTextView,data);
        listView.setAdapter(adapter);
        
        Animation animation = AnimationUtils.loadAnimation(this, R.anim.from_bottom_to_top);
        final LayoutAnimationController controller = new LayoutAnimationController(animation, 0);  
        listView.setLayoutAnimation(controller);
        listView.setDivider(null);
        //listView.startAnimation(animation);
        
    }

}

代碼也很簡單，首先加載布局文件中的listview，寫好item，然后通過LayoutAnimationController來配置動畫，最后讓listview加載動畫。

LayoutAnimationController構造函數中我們主要看第二個參數，如果設置0的話，所有item都是同時進行動畫的，如果是1的話，就會讓item一個接一個顯示動畫。

 

activity_main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity" >

    <ListView
        android:id="@+id/listView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true" >

    </ListView>

</RelativeLayout>

 

item.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/hello_world" 
        android:id="@+id/myTextView"
        android:layout_margin="16dp"
        android:textSize="18sp"/>
    
    <View 
        android:layout_width="match_parent"
        android:layout_height="2dp"
        android:layout_below="@id/myTextView"
        android:background="#888888"/>

</RelativeLayout>

 

三、另一種辦法：在布局文件中設置動畫

如果想要在xml中運用動畫的話，我們就需要再建立一個動畫文件

anim_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<layoutAnimation xmlns:android="http://schemas.android.com/apk/res/android"
    android:animation="@anim/from_bottom_to_top"
    android:animationOrder="normal"
    android:delay="0" />

這里的android:animationOrder的取值有normal：0 默認；reverse：1 倒序；random：2 隨機。就是給動畫進行排序，我設置了noraml。

這個文件引用了之前我們寫過的一個動畫，等於之前的animation被layoutAnimation包裝了一下。

 

在listView中設置動畫

    <ListView
        android:id="@+id/listView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true" 
        android:layoutAnimation="@anim/anim_layout">

    </ListView>

關鍵就是這個layoutAnimation屬性，設置上我們剛剛做好的動畫就行了。

效果如下：

 

源碼下載：http://download.csdn.net/detail/shark0017/8273763

 

 

參考自：

http://blog.csdn.net/jdsjlzx/article/details/7652297

http://blog.csdn.net/jdsjlzx/article/details/7652452

http://blog.csdn.net/lixiaodaoaaa/article/details/8284246

http://droidyue.com/blog/2014/07/26/apply-google-plus-list-style-on-android/