好久没发东西了,快三个月了。忙,无他尔。接下来进入正题。
好多应用在搜索界面都有关键字飞入飞出的效果。我自己也实现了下。先上效果图:
实现该效果需要解决以下五点:
1.布局的选用。
2.确定动画区域,即布局的宽高。
3.对关键字坐标的随机分配。
4.对随机分配的坐标进行向中心靠拢。
5.动画的实现。
本文内容归CSDN博客博主Sodino 所有
转载请注明出处:http://blog.csdn.net/sodino/article/details/7176796
下面各个击破:
1.布局的选用。
在五种常用布局中,可实现此效果的有AbsoluteLayout、FrameLayout、RelativeLayout三种。一开始我选用的AbsoluteLayout,运行结果出来后,发现AbsoluteLayout下的TextView一旦超出其显示范围,超出的范围将无法显示,而余下的两种布局,其超出的范围会自动换行显示出来(TextView长度超出父组件显示范围可在代码中避免,此处仅是举例,说明AbsoluteLayout的先天不足)。另,官方已不再推荐使用AbsoluteLayout,所以本处凭个人喜好我选用FrameLayout。
FrameLayout如何实现AbsoluteLayout对其子组件进行定点放置呢?答案在FrameLayout.LayoutParams上。该类有相关属性为leftMargin及topMargin。要将子组件左上角定点放置在其父组件中的(x,y)处,仅需对leftMargin赋值为x,对topMargin赋值为y即可。
2.确定动画区域,即布局的宽高。
在对显示关键字TextView进行分配坐标之前,应该要先知道父组件的宽高各有多少可供随机分配。
获取宽高使用到OnGlobalLayoutListener。本例中KeywordsFlow继承自FrameLayout,同时也实现了OnGlobalLayoutListener接口,在其初始化方法init()中设置了监听getViewTreeObserver().addOnGlobalLayoutListener(this);
当监听事件被触发时,即可获取而已的宽高。
public void onGlobalLayout() {
int tmpW = getWidth();
int tmpH = getHeight();
if (width != tmpW || height != tmpH) {
width = tmpW;
height = tmpH;
show();
}
}
3.对关键字坐标的随机分配。
TextView坐标的随机是否到位分配决定着整体效果的好坏。
本例设定关键字最多为10个,在布局的X Y轴上各自进行10等分。每个关键字依照其添加顺序随机各自在X轴和Y轴上选择等分后的10点中的某个点为margin的值。此值为糙值,需要对X轴进行越界修正,对Y轴进行向中心靠拢修正。对X轴坐标的修正为如下:
// 获取文本长度
Paint paint = txt.getPaint();
int strWidth = (int) Math.ceil(paint.measureText(keyword));
xy[IDX_TXT_LENGTH] = strWidth;
// 第一次修正:修正x坐标
if (xy[IDX_X] + strWidth > width - (xItem >> 1)) {
int baseX = width - strWidth;
// 减少文本右边缘一样的概率
xy[IDX_X] = baseX - xItem + random.nextInt(xItem >> 1);
} else if (xy[IDX_X] == 0) {
// 减少文本左边缘一样的概率
xy[IDX_X] = Math.max(random.nextInt(xItem), xItem / 3);
}
4.对随机分配的坐标进行向中心靠拢。
此操作将修正Y轴坐标。
由于随机分配中,可能出现某个关键字在朝中心点方向上的空间中再没有其它关键字了,此时该关键字在Y轴上应该朝中心点靠拢。实现代码如下:
// 第二次修正:修正y坐标
int yDistance = iXY[IDX_Y] - yCenter;
// 对于最靠近中心点的,其值不会大于yItem<br/>
// 对于可以一路下降到中心点的,则该值也是其应调整的大小<br/>
int yMove = Math.abs(yDistance);
inner: for (int k = i - 1; k >= 0; k--) {
int[] kXY = (int[]) listTxt.get(k).getTag();
int startX = kXY[IDX_X];
int endX = startX + kXY[IDX_TXT_LENGTH];
// y轴以中心点为分隔线,在同一侧
if (yDistance * (kXY[IDX_Y] - yCenter) > 0) {
// Log.d("ANDROID_LAB", "compare:" +
// listTxt.get(k).getText());
if (isXMixed(startX, endX, iXY[IDX_X], iXY[IDX_X] + iXY[IDX_TXT_LENGTH])) {
int tmpMove = Math.abs(iXY[IDX_Y] - kXY[IDX_Y]);
if (tmpMove > yItem) {
yMove = tmpMove;
} else if (yMove > 0) {
// 取消默认值。
yMove = 0;
}
// Log.d("ANDROID_LAB", "break");
break inner;
}
}
}
// Log.d("ANDROID_LAB", txt.getText() + " yMove=" + yMove);
if (yMove > yItem) {
int maxMove = yMove - yItem;
int randomMove = random.nextInt(maxMove);
int realMove = Math.max(randomMove, maxMove >> 1) * yDistance / Math.abs(yDistance);
iXY[IDX_Y] = iXY[IDX_Y] - realMove;
iXY[IDX_DIS_Y] = Math.abs(iXY[IDX_Y] - yCenter);
// 已经调整过前i个需要再次排序
sortXYList(listTxt, i + 1);
}
5.动画的实现。
每个TextView的动画都有包括三部分:伸缩动画ScaleAnimation、透明度渐变动画AlphaAnimation及位移动画