[Android]搜索关键字飞入飞出效果

这篇博客介绍了如何在Android应用中实现搜索关键字的飞入飞出动画效果,包括选用FrameLayout作为布局,确定动画区域,随机分配并调整关键字坐标,以及动画的实现细节。文章还提到,AbsoluteLayout由于其限制不适用于此类效果,而FrameLayout通过LayoutParams可以实现类似AbsoluteLayout的定点放置。
摘要由CSDN通过智能技术生成

好久没发东西了,快三个月了。忙,无他尔。接下来进入正题。

好多应用在搜索界面都有关键字飞入飞出的效果。我自己也实现了下。先上效果图:



实现该效果需要解决以下五点:

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及位移动画
评论 21
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值