Android:如何在WebView滚动条上隐藏顶视图和底视图

时间:2019-07-24 01:22:09

标签: android webview scrollview

我在android中有一个视图。下面是xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:animateLayoutChanges="true">


    <android.support.v7.widget.Toolbar
        android:id="@+id/my_toolbar"
        style="@style/Theme.WheelerTheme.FullScreen.ToolBar"
        android:layout_height="@dimen/toolbar_height_small">

        <TextView
            android:id="@+id/toolbar_title"
            style="@style/ToolbarTitle"
            android:textSize="@dimen/toolbar_title"/>

    </android.support.v7.widget.Toolbar>

    <fragment
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/webview_fragment"
        class="com.eplatform.android.ui.webview.EPFWebViewFragment"
        android:layout_width="match_parent"
        android:animateLayoutChanges="true"
        android:layout_height="match_parent"
        android:layout_above="@+id/bottom_bar"
        android:layout_marginTop="@dimen/toolbar_height_small"/>

    <View
        android:id="@+id/bottom_bar_shadow"
        android:layout_width="match_parent"
        android:layout_height="10dp"
        android:layout_alignParentBottom="true"
        android:layout_marginBottom="@dimen/bottom_bar_height"
        android:alpha="0.4"
        android:background="@drawable/shadow_toolbar_bottom"/>

    <LinearLayout
        android:id="@+id/bottom_bar"
        android:layout_width="match_parent"
        android:layout_height="@dimen/bottom_bar_height"
        android:layout_alignParentBottom="true"
        android:background="#ebebeb"
        android:orientation="horizontal">

        <ImageView
            android:id="@+id/group_1"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="?attr/selectableItemBackground"
            android:padding="8dp"
            android:src="@drawable/gr_1"/>

        <ImageView
            android:id="@+id/group_2"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="?attr/selectableItemBackground"
            android:padding="8dp"
            android:src="@drawable/gr_2"/>

        <ImageView
            android:id="@+id/group_3"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="?attr/selectableItemBackground"
            android:padding="8dp"
            android:src="@drawable/gr_3"/>

        <ImageView
            android:id="@+id/group_4"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="?attr/selectableItemBackground"
            android:padding="8dp"
            android:src="@drawable/gr_4"/>

    </LinearLayout>

    <FrameLayout
        android:id="@+id/loading"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@+id/bottom_bar"
        android:layout_marginTop="@dimen/toolbar_height_small"
        android:clickable="true"
        android:visibility="gone">

        <ProgressBar
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"/>
    </FrameLayout>




    <View
        android:layout_width="match_parent"
        android:layout_height="@dimen/toolbar_shadow_margin"
        android:layout_marginTop="@dimen/toolbar_height_small"
        android:background="@drawable/shadow_toolbar"/>

    <!--<ProgressBar
        android:id="@+id/webview_progress"
        style="?android:attr/progressBarStyleHorizontal"
        android:layout_width="match_parent"
        android:layout_height="3dp"
        android:layout_marginTop="?attr/actionBarSize"
        android:max="100"
        android:progress="50"
        android:progressDrawable="@drawable/webview_progress_bar"/>-->
</RelativeLayout>

我已经创建了可跟踪滚动的customWebView

package com.eplatform.android.ui.webview;

import android.util.Log;
import android.webkit.WebView;
import android.util.AttributeSet;
import android.content.Context;

public class ObservableWebView extends WebView {

    private OnScrollChangedCallback mOnScrollChangedCallback;

    public ObservableWebView(final Context context)
    {
        super(context);
    }

    public ObservableWebView(final Context context, final AttributeSet attrs)
    {
        super(context, attrs);
    }

    public ObservableWebView(final Context context, final AttributeSet attrs, final int defStyle)
    {
        super(context, attrs, defStyle);
    }

    @Override
    protected void onScrollChanged(final int l, final int t, final int oldl, final int oldt)
    {
        super.onScrollChanged(l, t, oldl, oldt);
        Log.d("WebView", "diff = " + (t - oldt));

        if( (t - oldt) > 20 || ((t - oldt) < 0 && (t - oldt) < -20) && mOnScrollChangedCallback != null) mOnScrollChangedCallback.onScroll(l, t, oldl, oldt);
    }

    public OnScrollChangedCallback getOnScrollChangedCallback()
    {
        return mOnScrollChangedCallback;
    }

    public void setOnScrollChangedCallback(final OnScrollChangedCallback onScrollChangedCallback)
    {
        mOnScrollChangedCallback = onScrollChangedCallback;
    }

}

现在我的问题是onScrollEvent被调用了很多次。在此回调中,我正在调整片段的大小。

private void hideViews() {

    if (isToolBrHidden) {
        return;
    }
    isToolBrHidden = true;
    //resizeFragment(mWebViewFragment, LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.WRAP_CONTENT );
    Toolbar toolbar = (Toolbar) findViewById(R.id.my_toolbar);

    toolbar.animate().translationY(-toolbar.getHeight()).setInterpolator(new AccelerateInterpolator((float)2));

    LinearLayout linearLayout = (LinearLayout) findViewById(R.id.bottom_bar);
    linearLayout.animate().translationY(+linearLayout.getHeight()).setInterpolator(new AccelerateInterpolator((float)2));

    View shadowView = findViewById(R.id.bottom_bar_shadow);
    shadowView.animate().alpha((float) 0.0);


    RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams)mWebViewFragment.getView().getLayoutParams();

    if(params.topMargin > 0) {
        params.addRule(RelativeLayout.ALIGN_PARENT_BOTTOM);
        params.addRule(RelativeLayout.ALIGN_TOP);
        params.topMargin = 0;
        mWebViewFragment.getView().setLayoutParams(params);
    }

}

private void showViews() {

    if (!isToolBrHidden) {
        return;
    }
    isToolBrHidden = false;

    Toolbar toolbar = (Toolbar) findViewById(R.id.my_toolbar);

    toolbar.animate().translationY(0).setInterpolator(new DecelerateInterpolator((float)2));

    LinearLayout linearLayout = (LinearLayout) findViewById(R.id.bottom_bar);
    linearLayout.animate().translationY(0).setInterpolator(new DecelerateInterpolator((float)2));


    View shadowView = findViewById(R.id.bottom_bar_shadow);
    shadowView.animate().alpha((float) 1.0);


    RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams)mWebViewFragment.getView().getLayoutParams();
    if (params.topMargin == 0) {
        params.addRule(RelativeLayout.ALIGN_PARENT_BOTTOM);
        params.addRule(RelativeLayout.ALIGN_TOP);
        params.topMargin = toolbar.getHeight();
        mWebViewFragment.getView().setLayoutParams(params);
    }
}

我在这里跟踪回调

mWebViewFragment.getWebView().setOnScrollChangedCallback(new OnScrollChangedCallback(){
    public void onScroll(int l, int t, int oldl, int oldt){
        if(t> oldt){
            //Do stuff
            System.out.println("Swipe UP");
            hideViews();
            //Do stuff
        }
        else if(t< oldt){
            System.out.println("Swipe Down");
            showViews();
        }
    }
});

我的问题是,由于滚动被多次调用,所以我的视图开始闪烁。最佳的解决方案是什么?

0 个答案:

没有答案