仿网易新闻的导航条及其新闻类别选择

先上图:


点击右边的选择器,会出现新闻类别的选择


点击其中任意一栏目,图标会放大然后缩小,等缩小动画完成后就会执行选中类别


至于这个放大缩小的动画模仿自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

猜你喜欢

转载自blog.csdn.net/u011566000/article/details/43192253