ListView学习（三）

自动显示、隐藏布局的 ListView

当我们在 ListView 上滑动的时候，顶部的 ActionBar 或者 ToolBar 就会相应的隐藏或显示。

我们知道，让一个布局显示后者隐藏并带有动画效果，可以通过属性动画方便的而实现,所以这个效果的关键是在于如何获取 ListView 的各种滑动事件。所以通过借助 View 的 OnTouchListener 接口来监听 ListView 的滑动，通过比较与上次坐标的大小，来判断滑动的方向。并通过滑动的方向来判断是否需要显示或隐藏对应的布局。

首先我们需要给 ListView 增加一个 HederView，避免第一个 Item 被 ToolBar 遮挡：

View header = new View(this);
header.setLayoutParams(new AbsListView.LayoutParams(
    AbsListView.LayoutParams.MATCH_PARENT,//宽度
    (int) getResource().getDimension(
        R.dimen.abc_action_bar_default_height_material)));//高度和 ToolBar 一致高

mListView.addHeaderVeiw(header);

通过使用 abc_action_bar_default_height_material 属性获取系统 ActionBar 的高度，并设置给 HeaderView。另外，定义一个 mTouchSlop 变量来获取系统认为的最低滑动距离。

mTouchSlop = ViewConfiguration.get(this).getScaledTouchSlop();

准备好以上内容开始处理我们的监听事件：

 View.OnTouchListener myTouchListener = new View.OnTouchListener(
     @Override
     public boolean onTouch(View v, MotionEvent event){
        switch(event.getAction()){
            case MotionEvent.ACTION_DONW :
                mFirstY = event.getY();
                break;
            case MotionEvent.ACTION_MOVE :
                mCurrentY = event.getY();
                if(mCurrentY - mFirst > mTouchSlop){
                    direction = 0;//DOWN
                }else if(mFirst - mCurrentY > mTouchSlop){
                    direction = 1;//UP
                }

                if(direction == 1){
                    if(mShow){
                        toolbarAnim(1);//show
                        mShow = !mShow;
                    }
                }else if(direction == 0){
                    if(!mShow){
                        toobarAnim(0);//hide
                        mShow = !mShow;
                    }
                }
                break;

            case MotionEvnetn.ACTION_UP : 
                break;
        }

        return false;
     }
 );


 //控制动画的方法

 private void toolbarAnim(int flag){
     if(mAnimator != null && mAnimator.isRunning()){
            mAnimator.cancel();
     }

     if(flag == 0 ){
         mAnimator = ObjectAnimator.ofFloat(mToolbar, "translationY", mToolbar.getTranslationY(), 0);
     }else {
         mAnimator = ObjectAnimator.ofFloat(mToolbar, "translationY", mToolbar.getTranslationY(), -mToolbar.getHeight());
     }
 }

我们在使用 ToolBar 的时候要使用 Theme 一定是 NoActionBar 的，不然就会导致冲突。

添加依赖：’com.android.support:appcompat-v7:21.0.3’

配置主题

//修改了 styles.xml 文件中的内容，修改为 NoActionBar

 <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

设置布局文件

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools" android:id="@+id/activity_main"
    android:layout_width="match_parent" android:layout_height="match_parent"
    tools:context="com.example.mylistview.MainActivity">


    <com.example.mylistview.MyListView
        android:id="@+id/listView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:headerDividersEnabled="false"
        android:scrollbars="none"></com.example.mylistview.MyListView>

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?actionBarSize"
        android:background="@android:color/holo_blue_light">
    </android.support.v7.widget.Toolbar>

    <!--<TextView-->
        <!--android:id="@+id/empty_tv"-->
        <!--android:layout_width="match_parent"-->
        <!--android:layout_height="match_parent"-->
        <!--android:text="NULL"-->
        <!--android:gravity="center"/>-->

</RelativeLayout>

如下的布局中，toolbar 会挡住 ListView 的一部分内容，所以我们需要增加一个空的 HeaderView

完整代码

public class MainActivity extends AppCompatActivity {

    private Toolbar mToolbar;
    private ListView mListView;
    private MyListViewAdapter mAdapter;
    private List<String> mData;

    private int mTouchSlop;
    private float mFirstY;
    private float mCurrentY;
    private int direction;
    private ObjectAnimator mAnimator;
    private boolean mShow = true;//是否显示toolbar

    View.OnTouchListener myTouchListener = 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 > mTouchSlop){//向下滑动
                        direction = 0;//down
                    }else if(mFirstY - mCurrentY > mTouchSlop){//向上滑动
                        direction = 1;//up
                    }
                    if(direction == 1){//up
                        if(mShow){
                            toolbarAnim(1);//hide
                            mShow = !mShow;
                        }
                    }else if(direction == 0){//down
                        if(!mShow){
                            toolbarAnim(0);//show
                            mShow = !mShow;
                        }
                    }
                    break;
                case MotionEvent.ACTION_UP :
                    break;
            }

            return false;
        }
    };

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mData = new ArrayList<>();
        for(int i=0;i<20;i++){
            mData.add("Test"+i);
        }
        mAdapter = new MyListViewAdapter(this,mData);
        mTouchSlop = ViewConfiguration.get(this).getScaledTouchSlop();
        mListView = (ListView) findViewById(R.id.listView);
        mToolbar = (Toolbar) findViewById(R.id.toolbar);
        mListView.setAdapter(mAdapter);
        View header = new View(this);
        header.setLayoutParams(new AbsListView.LayoutParams(
                AbsListView.LayoutParams.MATCH_PARENT,
                (int)getResources().getDimension(R.dimen.abc_action_bar_default_height_material)
        ));
        mListView.addHeaderView(header);
        mListView.setOnTouchListener(myTouchListener);

    }

    private void toolbarAnim(int flag){
        if(mAnimator != null && mAnimator.isRunning()){
            mAnimator.cancel();
        }
        if(flag == 0){//down
            mAnimator = ObjectAnimator.ofFloat(mToolbar, "translationY", mToolbar.getTranslationY(), 0);
        }else{//up
            mAnimator = ObjectAnimator.ofFloat(mToolbar, "translationY", mToolbar.getTranslationY(), -mToolbar.getHeight());
        }
        mAnimator.start();
    }
}