實現web置頂效果

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.lawyee.mycelue.web.Main4Activity">

    <LinearLayout

        android:layout_width="match_parent"
        android:layout_height="56dp"
        android:background="@color/colorPrimaryDark"
        android:orientation="horizontal">

        <Button
            android:id="@+id/btn_back"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="返回" />

        <TextView
          android:textColor="@android:color/white"
            android:layout_gravity="center|center_horizontal"
            android:gravity="center"
            android:maxLength="8"
            android:ellipsize="end"
            android:id="@+id/tv_title"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1" />

        <Button
            android:id="@+id/btn_refresh"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="重新整理" />
    </LinearLayout>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <com.lawyee.mycelue.web.MyWebView
            android:id="@+id/web_content"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1">

        </com.lawyee.mycelue.web.MyWebView>

        <Button
            android:id="@+id/btn_top"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_alignParentRight="true"
            android:layout_marginBottom="16dp"
            android:layout_marginRight="16dp"
            android:text="置頂"/>
    </RelativeLayout>
</LinearLayout>

image.png

• 自定義webview滑動介面

  @Override
    protected void onScrollChanged(int l, int t, int oldl, int oldt) {
        super.onScrollChanged(l, t, oldl, oldt);
        if (scrollChangedCallback!=null){
            scrollChangedCallback.onScroll(l-oldl,t-oldt);
        }

    }

    public OnScrollChangedCallback scrollChangedCallback;

    public void setScrollChangedCallback(OnScrollChangedCallback scrollChangedCallback) {
        this.scrollChangedCallback = scrollChangedCallback;
    }

    public interface OnScrollChangedCallback{
        public void onScroll(int dx,int dy);
    }

實現的activity

    private void initView() {
        WebSettings settings = webContent.getSettings();
        settings.setJavaScriptEnabled(true);
        settings.setSupportZoom(true);
        settings.setBuiltInZoomControls(true);
        settings.setLoadsImagesAutomatically(true);
        settings.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.SINGLE_COLUMN);
        settings.setUseWideViewPort(true);
        btnTop.setVisibility(View.GONE);
        settings.setLoadWithOverviewMode(true);
        webContent.loadUrl("http://www.baidu.com");
        webContent.setWebViewClient(new WebViewClient() {
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                return super.shouldOverrideUrlLoading(view, url);
            }
        });
   //設定標題
        webContent.setWebChromeClient(new WebChromeClient(){
            @Override
            public void onReceivedTitle(WebView view, String title) {
                super.onReceivedTitle(view, title);
                tvTitle.setText(title);
            }
        });
        //處理滑動時是否顯示置頂按鈕
        webContent.setScrollChangedCallback(new MyWebView.OnScrollChangedCallback() {

           @Override
            public void onScroll(int dx, int dy) {
                if (dy > 0) {
                    btnTop.setVisibility(View.VISIBLE);
                } else {
                    btnTop.setVisibility(View.GONE);
                }
            }

        });

    }
//    public boolean onKeyDown(int keyCode, KeyEvent event) {
//        if ((keyCode == KEYCODE_BACK) && webContent.canGoBack()) {
//            webContent.goBack();
//            return true;
//        }
//        return super.onKeyDown(keyCode, event);
//    }

    @Override
    public void onBackPressed() {
        if (webContent.canGoBack()) {
            webContent.goBack();
        } else {
            super.onBackPressed();
        }

    }

    @OnClick({R.id.btn_back, R.id.btn_refresh, R.id.btn_top})
    public void onClick(View view) {
        switch (view.getId()) {
            case R.id.btn_back:
                if (webContent.canGoBack()) {
                    webContent.goBack();
                } else {
                    super.onBackPressed();
                }
                break;
       
            case R.id.btn_refresh:
                   webContent.reload();
                break;
            case R.id.btn_top://置頂按鈕
                webContent.scrollTo(0,0);
                btnTop.setVisibility(View.GONE);
                break;
        }
    }

20180315_154231 (1).gif