对ListView中的每一个条目添加动画
正如上一篇博客中所说,LayoutAnimation只对ListView第一次加载的时候item才会出现动画效果,之增加的item就不会有动画效果,那么今天我们就来克服这些困难,该怎么去解决呢?今天我就为大家一一道来。
先放图:
布局文件与上一篇博客的一样,什么都没有改变:
<?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">
<Button
android:id="@+id/addlist"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="添加数据"/>
<ListView
android:id="@+id/listview"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layoutAnimation="@anim/layout_animation"/>
</LinearLayout>
listView第一次加载的动画也没有改变,
<?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"/>
上面是定义在布局文件中listview中的属性动画,下面的是上面代码的最后一行对应动画的详细动画过程。若有不明白的可以看我上一篇的博客,这里就不在解释,本文的重点是如何解决item中再次加载的动画。
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" android:duration="1000">
<translate android:fromXDelta="-50%p" android:toXDelta="0"/>
<alpha android:fromAlpha="0.0" android:toAlpha="1.0"/>
</set>
可已从上图看出,第二次加载时却是出现了动画,但是是所有item的动画。代码如下:
public class MainActivity extends Activity {
private ListView mListView;
private ArrayAdapter mAdapter;
private Button mAddListBtn;
private LayoutTransition mTransitioner;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mListView = (ListView) findViewById(R.id.listview);
animationOfList();
mAdapter = new ArrayAdapter<String>(this, android.R.layout.simple_expandable_list_item_1, getData());
mListView.setAdapter(mAdapter);
mAddListBtn = (Button)findViewById(R.id.addlist);
mAddListBtn.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
mAdapter.addAll(getData());
}
});
}
private void animationOfList() {
mTransitioner = new LayoutTransition();
//入场动画:view在这个容器中消失时触发的动画
ObjectAnimator animIn = ObjectAnimator.ofFloat(null, "translationX", -200f,0f);
mTransitioner.setAnimator(LayoutTransition.APPEARING, animIn);
mListView.setLayoutTransition(mTransitioner);
}
private List<String> getData() {
List<String> data = new ArrayList<String>();
data.add("三更灯火五更鸡,");
data.add("正是男儿读书时。");
data.add("黑发不知勤学早,");
data.add("白首方悔读书迟。");
data.add("九州生气恃风雷,");
data.add("万马齐喑究可哀。");
data.add("我劝天公重抖擞,");
data.add("不拘一格降人才。");
return data;
}
从这里可以看出,与上一篇博客中没有什么不同,只是添加了如下代码:
private void animationOfList() {
mTransitioner = new LayoutTransition();
//入场动画:view在这个容器中消失时触发的动画
ObjectAnimator animIn = ObjectAnimator.ofFloat(null, "translationX", -200f,0f);
mTransitioner.setAnimator(LayoutTransition.APPEARING, animIn);
mListView.setLayoutTransition(mTransitioner);
}
这里我解释一下这个动画的意思:
第一个参数int transitionType:表示当前应用动画的对象范围,取值有:
- APPEARING —— 元素在容器中出现时所定义的动画。
- DISAPPEARING —— 元素在容器中消失时所定义的动画。
- CHANGE_APPEARING —— 由于容器中要显现一个新的元素,其它需要变化的元素所应用的动画
- CHANGE_DISAPPEARING —— 当容器中某个元素消失,其它需要变化的元素所应用的动画
谷歌定义了这个LayoutTransition,其实挺鸡肋的,这个动画是不能对同时添加多条数据,一条一条的添加动画,动画是此次添加的所有数据同时执行动画,后来我又想,能不能对每一个条目添加添加的时候添加的动画,不管是不是同时添加多条数据,所以就出现了一下的代码:
activity的布局不变,没有贴出代码,先贴出activity的修改后代码:
public class MainActivity extends Activity {
private ListView mListView;
private MyAdapter mAdapter;
private Button mAddListBtn;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mListView = (ListView) findViewById(R.id.listview);
// animationOfList();
final ArrayList<String> data = (ArrayList<String>) getData();
// mAdapter = new ArrayAdapter<String>(this, android.R.layout.simple_expandable_list_item_1, getData());
mAdapter = new MyAdapter(this, (ArrayList<String>) data);
mListView.setAdapter(mAdapter);
mAddListBtn = (Button)findViewById(R.id.addlist);
mAddListBtn.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
ArrayList<String> data1 = (ArrayList<String>) getData();
data.addAll(data1);
mAdapter.notifyDataSetChanged();
}
});
}
// private void animationOfList() {
// mTransitioner = new LayoutTransition();
// //入场动画:view在这个容器中消失时触发的动画
//
// ObjectAnimator animIn = ObjectAnimator.ofFloat(null, "translationX", -200f,0f);
// mTransitioner.setAnimator(LayoutTransition.APPEARING, animIn);
// mListView.setLayoutTransition(mTransitioner);
// }
private List<String> getData() {
List<String> data = new ArrayList<String>();
data.add("三更灯火五更鸡,");
data.add("正是男儿读书时。");
data.add("黑发不知勤学早,");
data.add("白首方悔读书迟。");
data.add("九州生气恃风雷,");
data.add("万马齐喑究可哀。");
data.add("我劝天公重抖擞,");
data.add("不拘一格降人才。");
return data;
}
下面是条目的布局:由于想要针对每一个条目都有动画,所以只有自定义适配器,用之前到的适配器,无法对每个条目初始化的时候添加动画。
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:id="@+id/item_root"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="@+id/tv_item"
android:layout_width="match_parent"
android:layout_height="50dp" />
</LinearLayout>
下面到的就是我实验的适配器的代码:
public class MyAdapter extends BaseAdapter {
private Context mContext;
private ArrayList<String> list;
private LayoutInflater inflater;
private LayoutTransition mTransitioner;
public MyAdapter(Context mContext, ArrayList<String> list) {
this.mContext = mContext;
this.list = list;
this.inflater = LayoutInflater.from(mContext);
}
@Override
public int getCount() {
return list.size();
}
@Override
public Object getItem(int position) {
return list.get(position);
}
@Override
public long getItemId(int position) {
return position;
}
@Override
public View getView(int position, View convertView, ViewGroup parent) {
View view = inflater.inflate(R.layout.item_layout, null);
TextView tv_item = (TextView) view.findViewById(R.id.tv_item);
LinearLayout item_root = (LinearLayout) view.findViewById(R.id.item_root);
tv_item.setText(list.get(position));
mTransitioner = new LayoutTransition();
//入场动画:view在这个容器中消失时触发的动画
ObjectAnimator animIn = ObjectAnimator.ofFloat(null, "translationX", -200f,0f);
mTransitioner.setAnimator(LayoutTransition.APPEARING, animIn);
item_root.setLayoutTransition(mTransitioner);
return view;
}
现在来说一说修改后的代码的运行结果,F*CK,运行之后的结果就是没有动画,,,,只有第一次启动时有动画,添加数据不出现动画,还不如之前的代码,所以说,这个最后的代码不成功,所以结论是目前不能让条目一条一条出现动画效果。之后我会在想想有没有其他的方法来达到这种效果。