仿有道词典 ListView item飞入效果

最近在使用有道词典的单词本功能时,发现每次进去ListView item 都有一个 自右向左 飞入动画的效果,研究了一下给实现了。

这里用到了LayoutAnimationController 类,LayoutAnimationController用于为一个Layout里面的控件或者是Viewgroup的控件设置动画效果。

1.每一个控件都会有相同的动画效果
2.这些动画效果在不同的时间现实出来

有两种方式可以实现:

1.下面以XML文件实现,先在res下新建anim文件夹,新建一个文件list_item_anim.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/accelerate_interpolator"  >  
    
    <translate android:fromXDelta="100%p" android:toXDelta="0"  
        android:duration="200" />  
</set>


然后新建一个文件layoutanimation.xml

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


在ListView中使用

<ListView 
        android:id="@+id/lvMain"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:cacheColorHint="@android:color/transparent"
        android:layoutAnimation="@anim/layoutanimation"/>



2、代码实现

Animation animation = (Animation)AnimationUtils.loadAnimation(MainActivity.this, R.anim.list_item_anim);
        LayoutAnimationController controller = new LayoutAnimationController(animation);
        controller.setOrder(LayoutAnimationController.ORDER_NORMAL);
        controller.setDelay(0.5f);//注意这个地方是以秒为单位,是浮点型数据,所以要加f
		mListView.setLayoutAnimation(controller);


显示的顺序有三种可选:
LayoutAnimationController.ORDER_NORMAL;    //顺序显示
LayoutAnimationController.ORDER_REVERSE;//反显示
LayoutAnimationController.ORDER_RANDOM//随机显示



二、实现有道词典 ListView item飞入效果

 看了上面的介绍,大概你已经能知道如何去实现ListView 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/lvMain"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:cacheColorHint="@android:color/transparent"/>

</RelativeLayout>


MainActivity.java

package com.example.listexpanddemo;

import java.util.ArrayList;
import java.util.List;

import android.app.Activity;
import android.content.Context;
import android.graphics.BitmapFactory;
import android.os.Bundle;
import android.util.DisplayMetrics;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.view.animation.LayoutAnimationController;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.ListView;
import android.widget.TextView;

import com.example.listexpanddemo.model.AppInfo;

public class MainActivity extends Activity {

	private static final String TAG = "MainActivity";
	private ListView mListView;
	private CustomListAdapter mAdapter;
	private List<AppInfo> mList = new ArrayList<AppInfo>();

	private int mLcdWidth = 0;
	private float mDensity = 0;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);

		loadMobileConfig();

		buildAppData();

		mAdapter = new CustomListAdapter(this);
		mListView = (ListView) findViewById(R.id.lvMain);
		mListView.setAdapter(mAdapter);
		mListView.setOnItemClickListener(new OnItemClickListener() {

			@Override
			public void onItemClick(AdapterView<?> parent, View view,
					int position, long id) {

				Log.e(TAG, "click position:" + position);

			}

		});
		
		Animation animation = (Animation)AnimationUtils.loadAnimation(MainActivity.this, R.anim.list_item_anim);
        LayoutAnimationController controller = new LayoutAnimationController(animation);
        controller.setOrder(LayoutAnimationController.ORDER_NORMAL);
        controller.setDelay(0.5f);//注意这个地方是以秒为单位,是浮点型数据,所以要加f
		mListView.setLayoutAnimation(controller);
		
	}

	/**
	 * 加载手机屏幕的宽高
	 */
	private void loadMobileConfig() {
		DisplayMetrics dm = getResources().getDisplayMetrics();
		mLcdWidth = dm.widthPixels;
		mDensity = dm.density;

		Log.e(TAG, "mLcdWidth:" + mLcdWidth + " mDensity:" + mDensity);
	}

	/**
	 * 初始化应用数据
	 */
	private void buildAppData() {
		for (int i = 0; i < 20; i++) {
			AppInfo ai = new AppInfo();

			ai.setAppIcon(BitmapFactory.decodeResource(getResources(),
					R.drawable.ic_launcher));
			ai.setAppName("应用Demo_" + i);
			ai.setAppVer("版本: " + (i % 10 + 1) + "." + (i % 8 + 2) + "."
					+ (i % 6 + 3));
			ai.setAppSize("大小: " + i * 10 + "MB");

			mList.add(ai);
		}
	}

	public class CustomListAdapter extends BaseAdapter {

		private LayoutInflater mInflater;

		public CustomListAdapter(Context context) {
			mInflater = LayoutInflater.from(context);
		}

		@Override
		public int getCount() {
			return mList.size();
		}

		@Override
		public Object getItem(int arg0) {
			return mList.get(arg0);
		}

		@Override
		public long getItemId(int position) {
			return position;
		}

		@Override
		public View getView(int position, View convertView, ViewGroup parent) {
			if (getCount() == 0) {
				return null;
			}

			ViewHolder holder = null;
			if (convertView == null) {
				convertView = mInflater.inflate(R.layout.expand_item, null);

				holder = new ViewHolder();
				holder.ivImage = (ImageView) convertView
						.findViewById(R.id.ivIcon);
				holder.tvName = (TextView) convertView
						.findViewById(R.id.tvName);
				holder.tvVer = (TextView) convertView.findViewById(R.id.tvVer);
				holder.tvSize = (TextView) convertView
						.findViewById(R.id.tvSize);
				convertView.setTag(holder);
			} else {
				holder = (ViewHolder) convertView.getTag();
			}

			AppInfo ai = mList.get(position);
			holder.ivImage.setImageBitmap(ai.getAppIcon());
			holder.tvName.setText(ai.getAppName());
			holder.tvVer.setText(ai.getAppVer());
			holder.tvSize.setText(ai.getAppSize());

			return convertView;
		}
	}

	public static class ViewHolder {
		private ImageView ivImage;
		private TextView tvName;
		private TextView tvVer;
		private TextView tvSize;

	}
}


expand_item.xml

<?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="wrap_content"
    android:orientation="vertical"
    android:padding="5dip">
    
    <RelativeLayout 
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        
        <ImageView 
            android:id="@+id/ivIcon"
            android:src="@drawable/ic_launcher"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:contentDescription="@string/image_desc"/>
        
        <LinearLayout 
            android:id="@+id/appInfo"
            android:layout_toRightOf="@id/ivIcon"
            android:layout_marginLeft="5dip"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">
            
            <TextView 
                android:id="@+id/tvName"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/name"
                android:textColor="#000000"
                android:textSize="16sp"/>
            <TextView 
                android:id="@+id/tvVer"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/ver"
                android:textColor="#666666"
                android:textSize="13sp"/>
            <TextView 
                android:id="@+id/tvSize"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/size"
                android:textColor="#666666"
                android:textSize="13sp"/>
            
        </LinearLayout>
        
        <Button 
            android:id="@+id/btnClick"
            android:focusable="false"
            android:layout_width="80dip"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true"
            android:text="@string/mgr"
            android:textColor="#000000"
            android:textSize="16sp"/>
        
    </RelativeLayout>
    

</LinearLayout>


飞入动画 list_item_anim.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/accelerate_interpolator"  >  
    
    <translate android:fromXDelta="100%p" android:toXDelta="0"  
        android:duration="200" />  
</set>



先这样了,源码有时间再上传




评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值