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); } }
相关推荐
zhonglinzhang 2012-06-05
ffnercn 2012-05-06
mpqitmp 2012-03-05
Drabandon 2014-09-30
jsxin0 2014-01-16
najiutan 2013-05-03
qinxu 2012-08-03
Tom天天 2012-04-26
zhaazha 2011-11-03
Nostalgiachild 2011-09-15
小迈 2011-09-06
AndroidGA 2011-09-02
androidty 2011-05-12
virusplayer 2010-12-24
Liuser 2010-10-14
yuemeng0 2010-07-12
冰川孤辰 2010-05-21