Android listview ,ScrollView 回到頂部的按鈕

標籤：android   使用者體驗   listview   

在有些listview上面和ScrollView上，當滑動到底部的時候，在右下角會出現一個回到頂部的按鈕，提供更好的使用者體驗。

如下：

布局

先說布局，可以用幀布局Framelayout，也可以用相對布局relativelayout.看下listview的布局檔案：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:background="@android:color/white" >    <ListView        android:id="@+id/my_listView"        android:layout_width="fill_parent"        android:layout_height="wrap_content"        android:layout_marginLeft="10dp"        android:layout_marginRight="10dp" />    <Button        android:id="@+id/top_btn"        android:layout_width="50dp"        android:layout_height="50dp"        android:visibility="gone"        android:layout_alignParentBottom="true"        android:layout_alignParentRight="true"        android:layout_marginBottom="6dp"        android:layout_marginRight="6dp"        android:background="@drawable/top_btn_bg"        android:gravity="center"        android:text="頂" /></RelativeLayout>

Listview 回到頂部的活動代碼是從網上找到的代碼，作者為：zihao

/** * 主介面 *  * @author zihao * @details 因為有些手機是有虛擬按鍵的（在計算螢幕解析度的時候，有些可以去除掉虛擬地區的地區->如三星，有些不行->如MX3），為了計算的準確性， *          各位可以設定Activity為Theme *          .NoTitleBar.Fullscreen填滿螢幕(解決類似MX3這種在計算過程中把虛擬鍵盤算入螢幕高度的)。 */public class ListActivity extends Activity implements OnClickListener {private ListView listView;// List資料列表private Button toTopBtn;// 返回頂部的按鈕private MyAdapter adapter;private boolean scrollFlag = false;// 標記是否滑動private int lastVisibleItemPosition = 0;// 標記上次滑動位置@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_list);initView();}/** * 初始化視圖 */private void initView() {listView = (ListView) findViewById(R.id.my_listView);toTopBtn = (Button) findViewById(R.id.top_btn);adapter = new MyAdapter(this, getTitleDatas());listView.setAdapter(adapter);toTopBtn.setOnClickListener(this);listView.setOnScrollListener(new OnScrollListener() {@Overridepublic void onScrollStateChanged(AbsListView view, int scrollState) {// TODO Auto-generated method stubswitch (scrollState) {// 當不滾動時case OnScrollListener.SCROLL_STATE_IDLE:// 是當螢幕停止滾動時scrollFlag = false;// 判斷滾動到底部if (listView.getLastVisiblePosition() == (listView.getCount() - 1)) {toTopBtn.setVisibility(View.VISIBLE);}// 判斷滾動到頂部if (listView.getFirstVisiblePosition() == 0) {toTopBtn.setVisibility(View.GONE);}break;case OnScrollListener.SCROLL_STATE_TOUCH_SCROLL:// 滾動時scrollFlag = true;break;case OnScrollListener.SCROLL_STATE_FLING:// 是當使用者由於之前划動螢幕並抬起手指，螢幕產生慣性滑動時scrollFlag = false;break;}}/** * firstVisibleItem：當前能看見的第一個清單項目ID（從0開始） * visibleItemCount：當前能看見的清單項目個數（小半個也算） totalItemCount：清單項目共數 */@Overridepublic void onScroll(AbsListView view, int firstVisibleItem,int visibleItemCount, int totalItemCount) {// 當開始滑動且ListView底部的Y軸點超出螢幕最大範圍時，顯示或隱藏頂部按鈕if (scrollFlag&& ScreenUtil.getScreenViewBottomHeight(listView) >= ScreenUtil.getScreenHeight(ListActivity.this)) {if (firstVisibleItem > lastVisibleItemPosition) {// 上滑toTopBtn.setVisibility(View.VISIBLE);} else if (firstVisibleItem < lastVisibleItemPosition) {// 下滑toTopBtn.setVisibility(View.GONE);} else {return;}lastVisibleItemPosition = firstVisibleItem;}}});}/** * 擷取標題資料列表 *  * @return */private List<String> getTitleDatas() {List<String> titleArray = new ArrayList<String>();for (int i = 0; i < 30; i++) {titleArray.add("這是第" + i + "個item");}return titleArray;}/** * 滾動ListView到指定位置 *  * @param pos */private void setListViewPos(int pos) {if (android.os.Build.VERSION.SDK_INT >= 8) {listView.smoothScrollToPosition(pos);} else {listView.setSelection(pos);}}@Overridepublic void onClick(View v) {// TODO Auto-generated method stubswitch (v.getId()) {case R.id.top_btn:// 點擊按鈕返回到ListView的第一項setListViewPos(0);break;}}}

在上面的代碼中，對listview 設定 setOnScrollListener 監聽；當有一點滑動（也可以提供一個值）或者是到達底部的時候就出現回到頂部的按鈕。

scrollview的代碼

有很多知識點：

1. scrollview的滑動停止監聽。
2. scrollview回到頂部，或者底部的方法。
3. scrollview到達頂部或者底部的判斷方法。

上面的參考串連也都寫在注釋裡面了。

public class ScrollViewActivity extends Activity implements OnClickListener {private ScrollView scrollView;// scrollView資料列表private Button toTopBtn;// 返回頂部的按鈕private int scrollY = 0;// 標記上次滑動位置private View contentView;private final String TAG="test";@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_scroll);initView();}/** * 初始化視圖 */private void initView() {scrollView = (ScrollView) findViewById(R.id.my_scrollView);if (contentView == null) {contentView = scrollView.getChildAt(0);}toTopBtn = (Button) findViewById(R.id.top_btn);toTopBtn.setOnClickListener(this);//http://blog.csdn.net/jiangwei0910410003/article/details/17024287/******************** 監聽ScrollView滑動停止 *****************************/scrollView.setOnTouchListener(new OnTouchListener() {private int lastY = 0;private int touchEventId = -9983761;Handler handler = new Handler() {@Overridepublic void handleMessage(Message msg) {super.handleMessage(msg);View scroller = (View) msg.obj;if (msg.what == touchEventId) {if (lastY == scroller.getScrollY()) {handleStop(scroller);} else {handler.sendMessageDelayed(handler.obtainMessage(touchEventId, scroller), 5);lastY = scroller.getScrollY();}}}};public boolean onTouch(View v, MotionEvent event) {if (event.getAction() == MotionEvent.ACTION_UP) {handler.sendMessageDelayed(handler.obtainMessage(touchEventId, v), 5);}return false;}/** * ScrollView 停止 *  * @param view */private void handleStop(Object view) {    Log.i(TAG,"handleStop");ScrollView scroller = (ScrollView) view;scrollY = scroller.getScrollY();doOnBorderListener();}});/***********************************************************/}/** * ScrollView 的頂部，底部判斷： * http://www.trinea.cn/android/on-bottom-load-more-scrollview-impl/ *  * 其中getChildAt表示得到ScrollView的child View， 因為ScrollView只允許一個child * view，所以contentView.getMeasuredHeight()表示得到子View的高度, * getScrollY()表示得到y軸的滾動距離，getHeight()為scrollView的高度。 * 當getScrollY()達到最大時加上scrollView的高度就的就等於它內容的高度了啊~ *  * @param pos */private void doOnBorderListener() {Log.i(TAG,ScreenUtil.getScreenViewBottomHeight(scrollView) + "  "+ scrollView.getScrollY()+" "+ ScreenUtil.getScreenHeight(ScrollViewActivity.this));// 底部判斷if (contentView != null&& contentView.getMeasuredHeight() <= scrollView.getScrollY()+ scrollView.getHeight()) {toTopBtn.setVisibility(View.VISIBLE);Log.i(TAG,"bottom");}// 頂部判斷else if (scrollView.getScrollY() == 0) {Log.i(TAG,"top");}else if (scrollView.getScrollY() > 30) {toTopBtn.setVisibility(View.VISIBLE);Log.i(TAG,"test");}}/** * 下面我們看一下這個函數: scrollView.fullScroll(ScrollView.FOCUS_DOWN);滾動到底部 * scrollView.fullScroll(ScrollView.FOCUS_UP);滾動到頂部 *  *  * 需要注意的是，該方法不能直接被調用 因為Android很多函數都是基於訊息佇列來同步，所以需要一部操作， * addView完之後，不等於馬上就會顯示，而是在隊列中等待處理，雖然很快， 但是如果立即調用fullScroll， * view可能還沒有顯示出來，所以會失敗 應該通過handler在新線程中更新 *  * http://blog.csdn.net/t12x3456/article/details/12799825 * http://www.tuicool.com/articles/zayIjq */@Overridepublic void onClick(View v) {// TODO Auto-generated method stubswitch (v.getId()) {case R.id.top_btn :scrollView.post(new Runnable() {@Overridepublic void run() {scrollView.fullScroll(ScrollView.FOCUS_UP);}});toTopBtn.setVisibility(View.GONE);break;}}}

很多細節都注釋在代碼裡面了，參考連結也已經加上。大家下載下代碼執行一下看看。

代碼http://download.csdn.net/detail/jjdhshdahhdd/9059757

著作權聲明：本文為博主原創文章,歡迎轉載，請表明出處。

Android listview ,ScrollView 回到頂部的按鈕