android ListView实现翻页SeekBar功能

一。应用场景

    当一个ListView中有很多条目（Item）时，为了方便浏览需要需要实现分页功能，目前常见的分页方法有下拉刷新，但是这种分页方法翻页速度太慢，例如某个论坛的帖子有10000条回复，如果用户想查看第9999条，就不得不下拉刷新很多次。于是我们实现了一个可以横向拉动的翻页器。

 

二。最终效果

 拖动过程中上端显示当前页数，左下显示页码，右下按钮点击后隐藏这个SeekBar, 这个SeekBar的升起与隐藏有动画效果。

 

三。实现

1。前端布局：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
        android:id="@id/footBar"
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_margin="@dimen/meduim_padding"
        android:visibility="invisible">
    <TextView
            android:id="@id/overlayTips"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:background="@drawable/overlay_tip_normal"
            android:gravity="center"
            android:paddingLeft="@dimen/side_margin"
            android:paddingRight="@dimen/side_margin"
            android:paddingTop="@dimen/meduim_padding"
            android:paddingBottom="@dimen/meduim_padding"
            android:textColor="@color/shadow"
            android:textSize="@dimen/primary_text_size"
            android:layout_above="@id/seekbar"
            android:visibility="invisible"/>

    <RelativeLayout
            android:layout_below="@id/overlayTips"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="@dimen/meduim_padding"
            android:paddingBottom="@dimen/side_margin"
            android:paddingTop="@dimen/side_margin"
            android:background="@drawable/radius_corners_background">
        <SeekBar
                android:id="@id/seekbar"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:thumbOffset="2dp"/>
        <RelativeLayout
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_below="@id/seekbar"
                android:layout_marginTop="5dp" >

            <ImageView
                    android:id="@id/p_retract"
                    android:src="@drawable/p_retract"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginRight="@dimen/side_margin"
                    android:layout_marginBottom="@dimen/side_margin"
                    android:layout_alignParentRight="true"
                    android:scaleType="fitCenter"/>

            <TextView
                    android:id="@id/current_page"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginLeft="@dimen/side_margin"
                    android:layout_marginBottom="@dimen/side_margin"
                    style="@style/Text.Secondary" />
        </RelativeLayout>
    </RelativeLayout>
</RelativeLayout>

 

2.后端代码

首先要监听SeekBar的滑动事件，根据滑动到的位置，算出现在在第几页.  方法:seekBar.getProgress()得到的是当前滑动的位置（0-100的数字），seekBar.getMax()得到100，有这两个值就可以根据比例算出当前seekbar的位置所对应的页数了。

然后 onStopTrackingTouch这个callback在seekbar停止滑动的时候触发，这时候我们在onPageChanged方法中实现讲listView中的内容替换成当前页对应的内容。

 

        mSeekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {

            @Override
            public void onProgressChanged(SeekBar seekBar, int i, boolean b) {

                mCurrentPageNum = seekBar.getProgress() / (seekBar.getMax() / mTotalPageNum) + 1;
                if (mCurrentPageNum > mTotalPageNum) {
                    mCurrentPageNum = mTotalPageNum;
                }
                mCurrentPage.setText(String.valueOf(mCurrentPageNum) + "/" + String.valueOf(mTotalPageNum));
                String currentPageString = String.format(getString(R.string.page), mCurrentPageNum);
                if (mOverlayTips != null) {
                    mOverlayTips.setVisibility(View.VISIBLE);
                    mOverlayTips.setText(currentPageString);
                }
            }

            @Override
            public void onStartTrackingTouch(SeekBar seekBar) {
            }

            @Override
            public void onStopTrackingTouch(SeekBar seekBar) {
                seekBar.setProgress((mCurrentPageNum - 1) * (seekBar.getMax() / mTotalPageNum));
                onPageChanged(mCurrentPageNum);
                if (mOverlayTips != null)
                    mOverlayTips.setVisibility(View.INVISIBLE);
            }
        });

 

private void onPageChanged(int page) {
        int index = page - 1;
        if (page != mTopicFragment.getCurrentIndex()) {
            mTopicFragment.getPageContent(index);
            mPageIndex.setText(mCurrentPageNum + "/" + mTotalPageNum);
            mTopicFragment.initHeaderView(index);
        }
    }