好多应用在搜索界面都有关键字飞入飞出的效果。我自己也实现了下。先上效果图:
实现该效果需要解决以下五点:
1.布局的选用。
2.确定动画区域,即布局的宽高。
3.对关键字坐标的随机分配。
4.对随机分配的坐标进行向中心靠拢。
5.动画的实现。
下面各个击破:
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); }