ScrollView滾動後顯示按鈕並點選置頂的解決方案

阿新 • • 發佈：2019-02-14

隨著APP資料量的增大，電商APP的興起，大家會經常使用到ScrollView，但是有時候我們滑下資料的時候會出現一個問題，那就當我們資料量太多時，我們無法快速的定位回ScrollView的頂部，以至於操作相同的資料導致我們興致缺缺，所以誕生了一系列的輔助操作，今天我就帶大家來探索淘寶的商品詳情下的置頂按鈕的開發流程：

第一步、我們先自定義一個ScorllView,這個自定義的ScrollView完成以下功能：

1.監聽ScrollView 的onScrollChanged 滾動改變回調

2.當滾動距離大於某個值時顯示置頂按鈕（即我們顯示圖片）

3.當點選置頂按鈕時能讓ScrollView滑動到頂部

先貼上程式碼：

/**
 * 跳轉置頂的ScrollView
 */
public class GoTopScrollView extends ScrollView implements View.OnClickListener {
    //展示置頂的圖片按鈕
private ImageView goTopBtn;
//螢幕高度 //預設高度為500
private int screenHeight=500;
    public GoTopScrollView(Context context, AttributeSet attrs) {
        super(context, attrs);
}
    //1.0
 
    //設定滑動到多少出現
public void setScreenHeight(int screenHeight) {
        this.screenHeight = screenHeight;
}
    //2.0
    //設定滾動置頂按鈕以及其點選監聽事件
public void setImgeViewOnClickGoToFirst(ImageView goTopBtn) {
        this.goTopBtn = goTopBtn;
        this.goTopBtn.setOnClickListener(this);
}
    //3.0
    //重寫滾動改變返回的回撥
 
    // l oldl 分別代表水平位移
    // t oldt 代表當前左上角距離Scrollview頂點的距離
@Override
protected void onScrollChanged(int l, int t, int oldl, int oldt) {
        super.onScrollChanged(l, t, oldl, oldt);
/**
         * 滑動距離超過500px,出現置頂按鈕,可以做為自定義屬性
         * 滑動距離如果使用者設定了使用使用者的 如果使用者沒有設定使用預設的
         */
//3.1
        //當 當前的左上角距離頂點距離 大於某個值的時候就顯現置頂按鈕出來 如果小雨某個值就隱藏
if (screenHeight != 0) {
            if (t > screenHeight) {
                goTopBtn.setVisibility(VISIBLE);
} else {
                goTopBtn.setVisibility(GONE);
}
        }
    }
    //4.0
    //置頂按鈕的點選事件監聽
@Override
public void onClick(View v) {
        //滑動到ScrollView的頂點
this.smoothScrollTo(0, 0);
}
}

下面我們來解釋上面的程式碼：

1.0：是提供給初始化的時候設定滑動距離的方法，我們可以設定任意值（除零外），如果不設定預設值為500

2.0：這裡我們設定了圖片按鈕在當前類的引用物件、並設定圖片按鈕的點選事件

3.0：重寫當前ScrollView滑動位置改變的回撥，回撥方法中我們判斷滑動的左上角的y軸離頂點的距離進行判斷，展示圖片按鈕

4.0：當我們點選圖片按鈕的時候，我們設定滑動當前的ScrollView到頂點位置（0，0）為頂點左上角的座標

第二步：我需要實現.activity_main.xml:

我們先來看一下xml檔案的hierarchyviewer(層級)：

大家很容易就能看到其實就是一個相對佈局包裹著自定的ScrollView和我們置頂的圖案佈局，置頂的圖片我們設定位於右下角，其實可以用FramentLayout來包裹，大家可以自己嘗試一下，講置頂圖片寫在最後是不會遮蓋的。

如下為完成程式碼：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayoutxmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
    <com.example.administrator.gotoscrollview.GoTopScrollView
android:id="@+id/go_top_scrollView"
android:layout_width="match_parent"
android:layout_height="match_parent">
        <LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
            <TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!"
android:textSize="65sp" />
            <TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!"
android:textSize="65sp" />
            <TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!"
android:textSize="65sp" />
            <TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!"
android:textSize="65sp" />
            <TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!"
android:textSize="65sp" />
            <TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!"
android:textSize="65sp" />
            <TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!"
android:textSize="65sp" />
            <TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!"
android:textSize="65sp" />
            <TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!"
android:textSize="65sp" />
            <TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!"
android:textSize="65sp" />
            <TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!"
android:textSize="65sp" />
            <TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!"
android:textSize="65sp" />
            <TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!"
android:textSize="65sp" />
            <TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!"
android:textSize="65sp" />
            <TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!"
android:textSize="65sp" />
            <TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!"
android:textSize="65sp" />
            <TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!"
android:textSize="65sp" />
            <TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!"
android:textSize="65sp" />
            <TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!"
android:textSize="65sp" />
            <TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!"
android:textSize="65sp" />
            <TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!"
android:textSize="65sp" />
            <TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!"
android:textSize="65sp" />
        </LinearLayout>
    </com.example.administrator.gotoscrollview.GoTopScrollView>
<!-- 返回頂部 預設是隱藏的  寬高是為了讓大家看起來顯眼設定的-->
<ImageView
android:id="@+id/iv_return_top"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_marginBottom="10dp"
android:layout_marginRight="10dp"
android:src="@mipmap/return_top"
android:visibility="gone" />
</RelativeLayout>

第三步：我們需要在頁面展示出來

public class MainActivity extends AppCompatActivity {
    //Scrollview
private GoTopScrollView mGoTopScrollView;
    private ImageView ivReturnTop;
@Override
protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//1.0初始化ScrollView
mGoTopScrollView= (GoTopScrollView) findViewById(R.id.go_top_scrollView);
//2.0初始化置頂Icon
ivReturnTop= (ImageView) findViewById(R.id.iv_return_top);
//3.0設定點選置頂的ImageView
mGoTopScrollView.setImgeViewOnClickGoToFirst(ivReturnTop);
//4.0獲取螢幕高度
int screenHeight=ScreenUtil.getScreenSize(getApplicationContext())[1];
//設定ScrollView滑動多少距離就顯示，低於多少就顯示 如果沒有設定就預設為500;(這裡我們設定螢幕高度)
mGoTopScrollView.setScreenHeight(screenHeight);
}
}

這段程式碼比較簡單、我就不詳細說了。

下載原始碼

ScrollView滾動後顯示按鈕並點選置頂的解決方案

ScrollView滾動後顯示按鈕並點選置頂的解決方案

頁面滾動後出現按鈕和點選按鈕返回頂端

利用OpenLayers3在地圖上顯示標記並點選標記後顯示彈出框

leaflet 在地圖popup彈框中新增按鈕並點選響應（vue2leaflet），設定popup的content屬性，新增button

Android進階之讀取手機聯絡人顯示listview並點選撥號（CursorAdapter）

js讓物件延遲500毫秒後顯示文字在點選的位置

ScrollView與viewpager滑動事件衝突,與點選事情衝突解決方案

通過滾動條向下滾動時，DIV廣告自動跟著向下滾動，並且點選置頂

移動頁面點選穿透問題解決方案

進入目錄檢視點選置頂文章檢視部落格目錄（全站式導航）

iOS通用連結（Universal Links）突然點選無效的解決方案

【android】點選事件穿透解決方案

[工作問題總結]jre 已安裝列印點選無反應解決方案

點選事件，選擇按鈕，點選從前端傳到後臺，查詢資料，並返回前段，顯示出來。---tp5

js如何實現點選一個按鈕顯示一個div，然後該div上有一個按鈕，點選此按鈕後隱藏，隱藏的同時顯示另外一個div，而在次彈出的div也有一個按鈕，點選後隱藏.

問題：windows---筆記本外接顯示器，在系統更新後，外接顯示器沒有反應，右鍵開啟顯示設定，點選檢測後提示未檢測到其他顯示器

專案--點選按鈕顯示資料，點選空白處隱藏資料

用vue+Element-ui寫一個後臺管理介面,點選頭部導航對應顯示下方左側導航選單,點選左側選單對應顯示右邊內容,點選右邊內容的按鈕出現一個新頁面依舊能夠選中左側相應選單,求解決???!!!!

獲取驗證碼按鈕以及點選後重復倒計時

如何實現修改鍵盤上"換行"為"完成"並點選後隱藏鍵盤

ScrollView滾動後顯示按鈕並點選置頂的解決方案

相關推薦