先上图:
点击右边的选择器,会出现新闻类别的选择
点击其中任意一栏目,图标会放大然后缩小,等缩小动画完成后就会执行选中类别
至于这个放大缩小的动画模仿自sina微博
导航条用到了开源项目:
https://github.com/LuckyJayce/ViewPagerIndicator
放大缩小的代码:
package com.news163.adapter;
import java.util.List;
import com.news163.activity.R;
import com.news163.entity.Classfy;
import android.content.Context;
import android.os.Handler;
import android.os.Message;
import android.view.LayoutInflater;
import android.view.MotionEvent;
import android.view.View;
import android.view.View.OnTouchListener;
import android.view.ViewGroup;
import android.view.animation.Animation;
import android.view.animation.LinearInterpolator;
import android.view.animation.ScaleAnimation;
import android.view.animation.Animation.AnimationListener;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;
public class CSPAdatpter extends BaseAdapter {
private Context context;
private Animation animationScale;
private float x1, x2, y1, y2;
private Handler handler;
private List<Classfy> clist;
public CSPAdatpter(Context context, Handler handler, List<Classfy> clist) {
this.context = context;
this.handler = handler;
this.clist = clist;
}
public int getCount() {
return clist.size();
}
public Object getItem(int position) {
return clist.get(position);
}
public long getItemId(int position) {
return position;
}
/**
* ListView Item设置
*/
public View getView(int position, View convertView, ViewGroup parent) {
Holder holder;
if (convertView == null) {
convertView = LayoutInflater.from(context).inflate(R.layout.classfy_select_item, parent, false);
holder = new Holder();
holder.ll = (LinearLayout) convertView.findViewById(R.id.classfy_item_ll);
holder.bg = (LinearLayout) convertView.findViewById(R.id.classfy_item_bg);
holder.img = (ImageView) convertView.findViewById(R.id.classfy_item_img);
holder.tv = (TextView) convertView.findViewById(R.id.classfy_item_tv);
convertView.setTag(holder);
} else {
holder = (Holder) convertView.getTag();
}
holder.img.setImageResource(clist.get(position).getSrc());
holder.bg.setBackgroundResource(clist.get(position).getBackground());
holder.tv.setText(clist.get(position).getName());
holder.ll.setOnTouchListener(new TouchListener(position));
return convertView;
}
class Holder {
private LinearLayout ll;
private LinearLayout bg;
private ImageView img;
private TextView tv;
}
public class TouchListener implements OnTouchListener {
private int position;
public TouchListener(int position) {
this.position = position;
}
@Override
public boolean onTouch(final View view, MotionEvent event) {
if (event.getAction() == MotionEvent.ACTION_DOWN) {
view.startAnimation(setAnimScalebig());
x1 = event.getX();
y1 = event.getY();
}
if (event.getAction() == MotionEvent.ACTION_MOVE) {
x2 = event.getX();
y2 = event.getY();
if ((Math.abs(x1 - x2) > 6) || (Math.abs(y1 - y2) > 6)) {
view.startAnimation(setAnimScalesmall());
}
}
if (event.getAction() == MotionEvent.ACTION_UP) {
x2 = event.getX();
y2 = event.getY();
if ((Math.abs(x1 - x2) < 6) || (Math.abs(y1 - y2) < 6)) {
view.startAnimation(setAnimScalesmall());
view.getAnimation().setAnimationListener(new AnimationListener() {
@Override
public void onAnimationStart(Animation arg0) {
}
@Override
public void onAnimationRepeat(Animation arg0) {
}
@Override
public void onAnimationEnd(Animation arg0) {
Message msg = handler.obtainMessage(1, position);
handler.sendMessage(msg);
}
});
return false;// 距离较小,当作click事件来处理
} else {
view.startAnimation(setAnimScalesmall());
}
}
return true;// 返回true,不执行click事件
}
}
protected Animation setAnimScalebig() {
animationScale = new ScaleAnimation(1f, 1.2f, 1f, 1.2f, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
animationScale.setInterpolator(new LinearInterpolator());
animationScale.setDuration(200);
animationScale.setFillEnabled(true);
animationScale.setFillAfter(true);
animationScale.setFillBefore(false);
return animationScale;
}
protected Animation setAnimScalesmall() {
animationScale = new ScaleAnimation(1.2f, 1f, 1.2f, 1f, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
animationScale.setInterpolator(new LinearInterpolator());
animationScale.setDuration(200);
animationScale.setFillEnabled(true);
animationScale.setFillAfter(true);
animationScale.setFillBefore(true);
return animationScale;
}
}
原本这个效果是打算用在实际项目中的,但是由于设计变化,所以也没有用到,就把这个效果抽出来写到博客里面
demo地址:http://download.csdn.net/detail/u011566000/8400103