Android自定义控件实战——水波纹标签云TagCloud

   转载请声明出处http://blog.csdn.net/zhongkejingwang/article/details/38534853

   标签云就是在搜索的时候给用户提供推荐的一些关键字。这个水波纹的标签云是我在实习期间写的...当时没用上，发出来记录一下。先看一下效果图：

 可以上下循环滚动，触碰时随手指滑动而滚动，点击界面会暂停2秒钟。

这个标签云的实现思路是定义一个Layout，动态的管理左中右三列List数据的位置，左右两边的List运动轨迹是对称的抛物线，中间的List走直线。由于需要响应每个Tag的点击事件，所以这里用的是一个TextView的List。Tag的透明度Alpha和Size距离中间越近就越大，如果选用线性渐变的话会在中间处出现剧变，所以渐变曲线选用抛物线，这样就可以很平滑的变化了，这个抛物线渐变和上一篇文章滚动选择器PickerView的text渐变是一样的。了解了这些就可以看代码了：

FlowLayout.java：

package com.jingchen.tagclouddemo;

import java.util.ArrayList;
import java.util.List;
import java.util.Timer;
import java.util.TimerTask;

import android.annotation.SuppressLint;
import android.content.Context;
import android.os.Handler;
import android.os.Message;
import android.util.AttributeSet;
import android.view.Gravity;
import android.view.MotionEvent;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.RelativeLayout;
import android.widget.TextView;
import android.widget.Toast;

/**
 * 由于用到了Android3.0的API，所以只能在3.0及以上版本编译通过
 * 
 * @author chenjing
 * 
 */
public class FlowLayout extends RelativeLayout implements OnClickListener
{
	private float minTextSize = 18;
	private float maxTextSize = 25;

	private float minAlpha = 0.2f;
	private float maxAlpha = 1f;

	private int mWidth, mHeight;
	private int textMargin = (int) (4.5 * minTextSize);
	/**
	 * list的head数据的Y值
	 */
	private int firstTextY;
	private boolean isInit = true;
	/**
	 * 滚动速度
	 */
	private int moveSpeed = 2;
	/**
	 * 抛物线顶点到零点高度占View总长度的比值
	 */
	private float scaleArcTopPoint = 3;
	/**
	 * 是否自动滚动
	 */
	private boolean isAutoMove = true;
	private float lastX, lastY;
	private boolean isClick = false;
	Timer timer;
	MyTimerTask mTask;
	// 左中右三列数据
	List<TextView> mTextViews, leftTextViews, rightTextViews;
	private Context mContext;

	public FlowLayout(Context context)
	{
		super(context);
		init(context);
	}

	public FlowLayout(Context context, AttributeSet attrs, int defStyle)
	{
		super(context, attrs, defStyle);
		init(context);
	}

	public FlowLayout(Context context, AttributeSet attrs)
	{
		super(context, attrs);
		init(context);
	}

	private void init(Context context)
	{
		timer = new Timer();
		mTask = new MyTimerTask(handler);
		mTextViews = new ArrayList<TextView>();
		leftTextViews = new ArrayList<TextView>();
		rightTextViews = new ArrayList<TextView>();
		mContext = context;
	}

	public void addText(String text)
	{
		TextView tv = createTextView(text);
		mTextViews.add(tv);
		addView(tv);
	}

	public void addLeftText(String text)
	{
		TextView tv = createTextView(text);
		leftTextViews.add(tv);
		addView(tv);
	}

	public void addRightText(String text)
	{
		TextView tv = createTextView(text);
		rightTextViews.add(tv);
		addView(tv);
	}

	private TextView createTextView(String text)
	{
		TextView tv = new TextView(mContext);
		tv.setLayoutParams(new LayoutParams(LayoutParams.WRAP_CONTENT,
				LayoutParams.WRAP_CONTENT));
		tv.setText(text);
		tv.setTextColor(getResources().getColor(R.color.white));
		tv.setTextSize(minTextSize);
		tv.setGravity(Gravity.CENTER);
		tv.setOnClickListener(this);
		// 给TextView设置OnTouchListener为了防止手指落点在TextView上时父控件无法响应事件，onTouch的内容和onTouchEvent的内容差不多
		tv.setOnTouchListener(touchListener);
		return tv;
	}

	private OnTouchListener touchListener = new OnTouchListener()
	{

		@Override
		public boolean onTouch(View v, MotionEvent event)
		{
			float x = event.getX();
			float y = event.getY();
			switch (event.getAction())
			{
			case MotionEvent.ACTION_DOWN:
				isClick = true;
				lastX = event.getX();
				lastY = event.getY();
				stop();
				isAutoMove = false;
				break;
			case MotionEvent.ACTION_MOVE:
				float length = (float) Math.sqrt(Math.pow(x - lastX, 2)
						+ Math.pow(y - lastY, 2));
				if (length > 10)
					isClick = false;
				float y_length = event.getY() - lastY;
				if (y_length < 0)
				{
					isMoveUp = true;
					moveUp((int) -y_length);
				} else if (canDown && y_length > 0)
				{
					isMoveUp = false;
					moveDown((int) y_length);
				}
				lastX = event.getX();
				lastY = event.getY();
				break;

			case MotionEvent.ACTION_UP:
				if (isClick)
					v.performClick();
				else
				{
					start();
				}
				isAutoMove = true;
				break;

			}
			return true;
		}
	};

	public void start()
	{
		if (mTask != null)
		{
			mTask.cancel();
			mTask = null;
		}
		mTask = new MyTimerTask(handler);
		timer.schedule(mTask, 0, 10);
	}

	public void stop()
	{
		if (mTask != null)
		{
			mTask.cancel();
			mTask = null;
		}
	}

	@Override
	protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec)
	{
		int counts = getChildCount();
		// 测量子控件
		for (int i = 0; i < counts; i++)
		{
			View view = getChildAt(i);
			measureChild(view, widthMeasureSpec, heightMeasureSpec);
		}
		setMeasuredDimension(widthMeasureSpec, heightMeasureSpec);
	}

	@Override
	public void dispatchWindowFocusChanged(boolean hasFocus)
	{
		super.dispatchWindowFocusChanged(hasFocus);
		if (isInit)
		{
			mHeight = getHeight();
			mWidth = getWidth();
			// 从底部开始往上滚动
			firstTextY = mHeight;
			isInit = false;
			start();
		}
	}

	private void moveUp(int speed)
	{
		firstTextY -= speed;
		if (firstTextY < -textMargin)
		{
			// list的head数据被隐藏了，将head放置到尾部，可以循环滚动了
			canDown = true;
			firstTextY = mTextViews.get(1).getTop();
			TextView tv = mTextViews.get(0);
			mTextViews.remove(0);
			mTextViews.add(tv);
			tv = leftTextViews.get(0);
			leftTextViews.remove(0);
			leftTextViews.add(tv);
			tv = rightTextViews.get(0);
			rightTextViews.remove(0);
			rightTextViews.add(tv);
		}
		FlowLayout.this.requestLayout();
	}

	private void moveDown(int speed)
	{
		firstTextY += speed;
		if (firstTextY > textMargin)
		{
			firstTextY = -textMargin;
			TextView tv = mTextViews.get(mTextViews.size() - 1);
			mTextViews.remove(mTextViews.size() - 1);
			mTextViews.add(0, tv);
			tv = leftTextViews.get(leftTextViews.size() - 1);
			leftTextViews.remove(leftTextViews.size() - 1);
			leftTextViews.add(0, tv);
			tv = rightTextViews.get(rightTextViews.size() - 1);
			rightTextViews.remove(rightTextViews.size() - 1);
			rightTextViews.add(0, tv);
		}
		FlowLayout.this.requestLayout();
	}

	@SuppressLint("HandlerLeak")
	Handler handler = new Handler()
	{

		@Override
		public void handleMessage(Message msg)
		{
			synchronized (FlowLayout.this)
			{
				if (isAutoMove)
				{
					if (isMoveUp)
						moveUp(moveSpeed);
					else
						moveDown(moveSpeed);
				}
			}
		}

	};

	class MyTimerTask extends TimerTask
	{
		Handler Taskhandler;

		public MyTimerTask(Handler handler)
		{
			Taskhandler = handler;
		}

		@Override
		public void run()
		{
			Taskhandler.sendMessage(Taskhandler.obtainMessage());
		}

	}

	@Override
	protected void onLayout(boolean changed, int l, int t, int r, int b)
	{
		if (!isInit)
		{
			layoutAll(mTextViews, 0);
			int temp = firstTextY;
			firstTextY += textMargin;
			layoutAll(leftTextViews, -1);
			layoutAll(rightTextViews, 1);
			firstTextY = temp;
		}
	}

	private boolean isMoveUp = true;
	private boolean canDown = false;

	@Override
	public boolean onTouchEvent(MotionEvent event)
	{
		float x = event.getX();
		float y = event.getY();
		switch (event.getAction())
		{
		case MotionEvent.ACTION_DOWN:
			isClick = true;
			lastX = event.getX();
			lastY = event.getY();
			// 手按下后停止自由滚动，随手的滑动而滚动
			stop();
			isAutoMove = false;
			break;
		case MotionEvent.ACTION_MOVE:
			float length = (float) Math.sqrt(Math.pow(x - lastX, 2)
					+ Math.pow(y - lastY, 2));
			if (length > 10)
				isClick = false;
			float y_length = event.getY() - lastY;
			// 手动move
			if (y_length < 0)
			{
				isMoveUp = true;
				moveUp((int) -y_length);
			} else if (canDown && y_length > 0)
			{
				isMoveUp = false;
				moveDown((int) y_length);
			}
			lastX = event.getX();
			lastY = event.getY();
			break;

		case MotionEvent.ACTION_UP:
			if (isClick)
			{
				// 点击View后停2秒再开始
				stop();
				delayStartHandler.sendEmptyMessageDelayed(0, 2000);
			} else
			{
				start();
			}
			isAutoMove = true;
			break;

		}
		return true;
	}

	/**
	 * @param textViews
	 * @param type
	 *            -1，0,1分别代表左中右list
	 */
	private void layoutAll(List<TextView> textViews, int type)
	{
		int temp_y = firstTextY;
		for (int i = 0; i < textViews.size(); i++)
		{
			TextView temp = textViews.get(i);
			// 根据y值计算x坐标上的偏移量，type为-1时往左偏，抛物线开口向右，0的时候走直线，1的时候和-1对称
			int detaX = type
					* (int) (-mWidth * 4 / scaleArcTopPoint
							/ Math.pow(mHeight, 2)
							* Math.pow(mHeight / 2.0 - temp_y, 2) + mWidth
							/ scaleArcTopPoint);
			float scale = (float) (1 - 4 * Math.pow(mHeight / 2.0 - temp_y, 2)
					/ Math.pow(mHeight, 2));
			if (scale < 0)
				scale = 0;
			float textScale = (float) ((minTextSize + scale
					* (maxTextSize - minTextSize)) * 1.0 / minTextSize);
			temp.setScaleX(textScale);
			temp.setScaleY(textScale);
			temp.setAlpha(minAlpha + scale * (maxAlpha - minAlpha));
			temp.layout((mWidth - temp.getMeasuredWidth()) / 2 + detaX, temp_y,
					(mWidth + temp.getMeasuredWidth()) / 2 + detaX, temp_y
							+ temp.getMeasuredHeight());
			temp_y += 2 * textMargin;
		}
	}

	Handler delayStartHandler = new Handler()
	{

		@Override
		public void handleMessage(Message msg)
		{
			start();
		}

	};

	@Override
	public void onClick(View v)
	{
		TextView tv = (TextView) v;
		Toast.makeText(mContext, tv.getText(), Toast.LENGTH_SHORT).show();
		stop();
		delayStartHandler.sendEmptyMessageDelayed(0, 2000);
	}
}

 

  代码中改变TextView的Size时用到了setScaleX和setScaleY这两个方法，Android3.0才有的，所以只能是3.0的平台编译，如果不这样改变Size而是直接setTextSize的话变化就没有那么流畅。每个TextView的X轴偏移量都是根据其Y轴位置偏离中心线的距离计算的。代码中已经有了相关注释，不是很难。

MainActivity的布局：

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

    <com.jingchen.tagclouddemo.FlowLayout
        android:id="@+id/tagcloudview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#000000" />

</RelativeLayout>

MainActivity的代码：

package com.jingchen.tagclouddemo;

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

import android.app.Activity;
import android.os.Bundle;

/**
 * @author chenjing
 * 
 */
public class MainActivity extends Activity
{
	FlowLayout layout;
	int i = 0;
	List<String> textList;
	List<String> leftextList;
	List<String> righttextList;

	@Override
	protected void onCreate(Bundle savedInstanceState)
	{
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		layout = (FlowLayout) findViewById(R.id.tagcloudview);
		layout.setBackgroundResource(R.color.black);
		textList = new ArrayList<String>();
		leftextList = new ArrayList<String>();
		righttextList = new ArrayList<String>();
		addTexts();
		for (int i = 0; i < textList.size(); i++)
		{
			layout.addText(textList.get(i));
		}
		for (int i = 0; i < leftextList.size(); i++)
		{
			layout.addLeftText(leftextList.get(i));
		}
		for (int i = 0; i < righttextList.size(); i++)
		{
			layout.addRightText(righttextList.get(i));
		}
	}

	private void addTexts()
	{
		textList.add("一路狂奔");
		textList.add("后宫:帝王之妻");
		textList.add("宝贝和我");
		textList.add("甜心巧克力");
		textList.add("恐怖故事");
		textList.add("百万爱情宝贝");
		textList.add("别跟我谈高富帅");
		textList.add("甜蜜十八岁");
		textList.add("终结者");

		leftextList.add("百万爱情宝贝");
		leftextList.add("别跟我谈高富帅");
		leftextList.add("甜蜜十八岁");
		leftextList.add("金钱的味道");
		leftextList.add("艳遇");
		leftextList.add("痛症");
		leftextList.add("危险关系");
		leftextList.add("夺宝联盟");
		leftextList.add("101次求婚");
		leftextList.add("富春山居图");

		righttextList.add("艳遇");
		righttextList.add("痛症");
		righttextList.add("危险关系");
		righttextList.add("今天");
		righttextList.add("小时代");
		righttextList.add("致我们将死的青春");
		righttextList.add("金钱的味道");
		righttextList.add("101次求婚");
	}

	@Override
	protected void onDestroy()
	{
		layout.stop();
		super.onDestroy();
	}

}

在MainActivity中set三列数据后就可以start了，很简单的吧？

源码下载