滑动效果——ListView 滑动中标题固定&标题缩放效果

转载请注明出处，谢谢~~

概述

今天说一个比较简单的效果，很多应用都用到了这个效果，其实实现思路蛮简单的。就是Listview在滑动过程中，它的头上有一个往上滑能固定，往下滑能随listview移动的头，或者是根据滑动缩放大小。这篇文章的实现比较简单，但是很多复杂效果的实现思路也是这样，类似比较时髦的，pulltozoomlistview，也是根据滑动计算一个缩放的scale，不多说了，我们看下效果图。

这是向上滑动固定组标题的效果：

这是根据滑动缩放的效果：

首先看看固定标题的效果

这里的图片和测试条目是listview的两个head：

View view = LayoutInflater.from(this).inflate(R.layout.lv_test, null);
View view2 = LayoutInflater.from(this).inflate(R.layout.item, null);
lv_test.addHeaderView(view);
lv_test.addHeaderView(view2);

然后这个activity实现了OnScrollListener，在复写方法里，我们获取了第二个测试head的top：

@Override
public void onScrollStateChanged(AbsListView view, int scrollState) {
}

@SuppressLint("NewApi")
@Override
public void onScroll(AbsListView view, int firstVisibleItem,
        int visibleItemCount, int totalItemCount) {
    int top2 = ll_tt.getTop();
    if (top2 <= 0 || firstVisibleItem >= 1 ) {
        tv_shadow.setVisibility(View.VISIBLE);
    }else {
        tv_shadow.setVisibility(View.INVISIBLE);
    }
}

根据这个head的top值和第一个显示的position，我们控制了RelativeLayout里面的隐藏head的显示与否。这样就简易的实现了这个固定标题的效果。注意点是，这里的getTop方法是获取的当前控件相对于它父控件的top，如果你在TextView外面包了一层LinearLayout，那么你就需要获取这个LinearLayout的getTop，否则获取TextView的getTop永远都是一个值。

下面再看下随手指缩放这个效果，首先我们需要知道一个原始的scale，这个scale*getTop()的值应该为1，然后当getTop()为0 的时候，他们的乘积也为0，这就实现了一个从0-1的缩放，而当getTop()小于0的时候，我们便不需要继续缩放了（或者根据需求做其他的效果）。

首先看下如何获取这个初始的scale：

@SuppressLint("NewApi")
@Override
protected void onResume() {
    super.onResume();
    ViewTreeObserver vto = ll_tt.getViewTreeObserver();
    vto.addOnGlobalLayoutListener(new OnGlobalLayoutListener() {
        @Override
        public void onGlobalLayout() {
            ll_tt.getViewTreeObserver().removeOnGlobalLayoutListener(this);
            top = ll_tt.getTop();
            scale = (float) scale / (float) top;
            System.out.println("scale : " + scale);
        }
    });
}

这应该很熟悉吧，但是用的比较少吧，对，在界面未画完的时候如何获取控件的某些属性，就是可以用这个方法。在这里我们是在onResume方法里，获取了getTop的值，然后用1（scale的初始值设为1）除以我们获取的值，就是scale的初始值，这样就保证了初始值*getTop的值为1，即刚开始不缩放，然后随手指移动缩放。注意这里需要将scale定义为float，否则得到的结果将只有0。

然后再看在滑动监听里我们的设置：

@SuppressLint("NewApi")
@Override
public void onScroll(AbsListView view, int firstVisibleItem,
        int visibleItemCount, int totalItemCount) {
    int top2 = ll_tt.getTop();
    if (top2 >= 0) {
        tv.setScaleX(top2 * scale);
        tv.setScaleY(top2 * scale);
    }
}

这里我们需要随着手指滑动不断的获取top值，然后让tv根据这个top*scale的值进行缩放。这样就成功的完成了一个随手指移动而缩放的view。

Demo下载地址