Android开发教程：搜索关键字飞入飞出效果


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



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

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);
    当监听事件被触发时，即可获取而已的宽高。

  1. public void onGlobalLayout() {  
  2.     int tmpW = getWidth();  
  3.     int tmpH = getHeight();  
  4.     if (width != tmpW || height != tmpH) {  
  5.         width = tmpW;  
  6.         height = tmpH;  
  7.         show();  
  8.     }  
  9. }  
3.对关键字坐标的随机分配。
    TextView坐标的随机是否到位分配决定着整体效果的好坏。
    本例设定关键字最多为10个，在布局的X Y轴上各自进行10等分。每个关键字依照其添加顺序随机各自在X轴和Y轴上选择等分后的10点中的某个点为margin的值。此值为糙值，需要对X轴进行越界修正，对Y轴进行向中心靠拢修正。对X轴坐标的修正为如下：
  1.     // 获取文本长度   
  2. Paint paint = txt.getPaint();  
  3. int strWidth = (int) Math.ceil(paint.measureText(keyword));  
  4. xy[IDX_TXT_LENGTH] = strWidth;  
  5. // 第一次修正:修正x坐标   
  6. if (xy[IDX_X] + strWidth > width - (xItem >> 1)) {  
  7.     int baseX = width - strWidth;  
  8.     // 减少文本右边缘一样的概率   
  9.     xy[IDX_X] = baseX - xItem + random.nextInt(xItem >> 1);  
  10. } else if (xy[IDX_X] == 0) {  
  11.     // 减少文本左边缘一样的概率   
  12.     xy[IDX_X] = Math.max(random.nextInt(xItem), xItem / 3);  
  13. }  
  • 1
  • 2
  • 下一页

相关内容