自动显示和隐藏头布局的ListView原来是那么简单

尊重原创，转载请注明：From zsml2016（http://blog.csdn.net/qq_29269233）Power byzsml2016侵权必究！

前言：

今天在看Android进阶的书籍，发现越看越有趣，当我看到自动显示、隐藏布局的ListView时，内心充满了好奇和期待，因为即将就要解开我心中当年存在的一个迷，之前我刚接触Android的时候，总是在想为什么淘宝还有京东等一些APP可以实现自动显示和隐藏头布局呢？今天我就发自内心地写这篇博客了！接下来就让带大家见证奇迹的时刻了。

一、首先，给ListView添加一个HeaderView，避免第一个Item被头布局遮挡：

//1.给listview增加HeaderView
View header = new View(this);
header.setLayoutParams(new AbsListView.LayoutParams(
        ViewGroup.LayoutParams.MATCH_PARENT,
        // 高度根据屏幕不一样，大小不一
        // （此处可以使用 R.dimen.abc_action_bar_default_height_material）
        (int) getResources().getDimension(
                R.dimen.abc_action_bar_default_height_material)));
mlistview.addHeaderView(header);

二、定义变量设置listview最小滑动距离（系统获取的）

//2.获取系统认为的最低滑动距离
minInstance = ViewConfiguration.get(this).getScaledTouchSlop();

三、设置listview的滑动监听事件，比较与上次坐标的大小，即根据坐标差来判断滑动的方向，如果是向上滑动的话就隐藏头布局，向下滑动的话就设置显示头布局：

//3.判断滑动事件
mlistview.setOnTouchListener(new View.OnTouchListener() {
    @Override
    public boolean onTouch(View v, MotionEvent event) {
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                mFirstY = event.getY();
                break;
            case MotionEvent.ACTION_MOVE:
                mCurrentY = event.getY();
                if (mCurrentY - mFirstY > minInstance) {
                    status = 0;  // 向下
                } else {
                    status = 1;  // 向上
                }
                if (status == 1) {
                    if (mShow) {
                        barAnim(1);  // 隐藏
                        mShow = false;
                    }
                } else {
                    if (!mShow) {
                        barAnim(0); // 显示
                        mShow = true;
                    }
                }
                break;
        }
        return false;
    }
});

四、最后一步加上头布局的显示、隐藏动画的设置方法：

private void barAnim(int i) {
    if (animator != null && animator.isRunning())
        animator.cancel();
    if (i == 0) {
        animator = ObjectAnimator.ofFloat(
                titlebar,
                "translationY",
                titlebar.getTranslationY(),
                0);
    }else{
        animator = ObjectAnimator.ofFloat(
                titlebar,
                "translationY",
                titlebar.getTranslationY(),
                -titlebar.getHeight());
        }
    animator.start();
}

就是这么简单，向下滑动 ListView ，其顶部布局自动显示；向上滑动 ListView ，其顶部的布局自动隐藏！先给大家看看效果图吧！

到此，大家可以可以简单做个listview去实现一下效果，这里的头文件是用一个Textview写的，如果大家要用toolbar的话，就要注意了，记得主题一定是要NoActionBar的，即：

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">

有需要完整源码的帅哥美女们，看这里：Demo

更多精彩内容请关注作者博客：luoweichao.top

自动显示和隐藏头布局的ListView原来是那么简单

猜你喜欢