ScrollView滑动监听实现界面动画效果

Posted 2022-12-04 阿蛮家

Andriod进阶知识之一，滑动监听也是初学者不得不学习的一项技能。关于滑动，你能想到什么？ScrollView、ListView、GridView、WebView、RecyclerView。。。你是否写过或研究过ScrollView滑动监听的代码呢？其他控件的滑动监听代码是怎么实现的呢？看看下面的效果，是不是很想实现？让我们带着这些疑问，一起进入android滑动监听的世界吧。

一、ScrollView滑动监听，实现ActionBar显示和隐藏

1、写一个ScrollView滑动监听的接口，供实现滑动监听的Activity实现，代码如下：

public interface ObservableScrollViewCallbacks 

    /**
     * 滑动过程监听
     * @param scrollY 当前滑动位置
     * @param firstScoll 是否第一次滑动
     * @param dragging 是否滑动中
     */
    void onScrollChanged(int scrollY, boolean firstScoll, boolean dragging);

    //当按下事件发生时候调用此方法
    void onDownMotionEvent();

    //滑动的状态
    void onUpOrCancleMotionEvent(ScrollState scrollState);

滑动状态用Enum枚举类型表示，STOP表示滑动停止，UP表示向上滑动，DOWN表示向下滑动，代码如下：

public enum ScrollState 
    STOP,
    UP,
    DOWN,

               

2、写一个Scrollable接口，供自定义ScrollView控件ObservableScrollView实现，代码如下：

public interface Scrollable 

    //接口设置
    void setScrollViewCallbacks(ObservableScrollViewCallbacks listener);

    //获取Y轴滑动距离
    int getCurrentScrollY();

    //设置手势拦截
    void setTouchInterceptionViewGroup(ViewGroup viewGroup);

3、自定义ObservableScrollView，实现Scrollable接口，代码如下：

public class ObservableScrollView extends ScrollView implements Scrollable

    private int mPrevScrollY;
    private int mScrollY;

    private ScrollState mScrollState;

    private boolean mFirstScroll,mDraggging;

    private ObservableScrollViewCallbacks callbacks;

    public ObservableScrollView(Context context) 
        super(context);
    

    public ObservableScrollView(Context context, AttributeSet attrs) 
        super(context, attrs);
    

    public ObservableScrollView(Context context, AttributeSet attrs, int defStyleAttr) 
        super(context, attrs, defStyleAttr);
    

    @Override
    protected void onScrollChanged(int l, int t, int oldl, int oldt) 
        super.onScrollChanged(l, t, oldl, oldt);

        mScrollY = t;

        if (callbacks != null) 
            callbacks.onScrollChanged(t, mFirstScroll, mDraggging);
        

        if (mFirstScroll) 
            mFirstScroll = false;
        

        Log.i("ObservableScrollview",mPrevScrollY +" "+ t);

        if(mPrevScrollY < t)
            mScrollState = ScrollState.UP;
        else 
            mScrollState = ScrollState.DOWN;
        

        mPrevScrollY = t;
    

    @Override
    public boolean onInterceptTouchEvent(MotionEvent ev) 
        switch (ev.getActionMasked())
            case MotionEvent.ACTION_DOWN:
                mFirstScroll = mDraggging = true;
                break;
        
        return super.onInterceptTouchEvent(ev);
    

    @Override
    public boolean onTouchEvent(MotionEvent ev) 
        switch (ev.getActionMasked()) 
            case MotionEvent.ACTION_UP:
            case MotionEvent.ACTION_CANCEL:
                mDraggging = false;
                callbacks.onUpOrCancleMotionEvent(mScrollState);
                break;
            case MotionEvent.ACTION_MOVE:

                break;
        
        return super.onTouchEvent(ev);
    


    @Override
    public void setScrollViewCallbacks(ObservableScrollViewCallbacks listener) 
        callbacks = listener;
    


    @Override
    public int getCurrentScrollY() 
        return mScrollY;
    

    @Override
    public void setTouchInterceptionViewGroup(ViewGroup viewGroup) 

    

这里有必要解释下onScrollChanged方法中的四个参数，l , t分别表示触摸点距离View左上角的距离，oldl , oldt分别表示上一次触摸点距离View左上角的距离。
这里判断滑动方向是根据当前触摸点的Y轴位置（距离View顶部的距离）和之前触摸点的Y轴位置判断的，如果当前触摸点的位置距离View顶部的距离大于之前触摸点距离View顶部的距离，表示向上滑动，反之，向下滑动。每次滑动后，记得把当前触摸点距离View顶部的距离赋值给之前触摸点距离View顶部的临时变量。

这里判断是否第一次滑动以及是否在滑动中赋值写在onInterceptTouchEvent方法中，是因为View的touch事件生命周期执行顺序是onInterceptTouchEvent-->onTouchEvent.关于View的事件拦截机制可以参考这篇博文  滑动事件拦截处理机制详解  写得很详细。手指抬起的时候，isDragging赋值false，同时调用接口的onUpOrCancleMotionEvent方法将滑动状态传入接口，供Activity回调。

4、写一个Activity实现ObserableScrollViewCallBacks接口，代码如下：

public class ActionBarControllScrollviewActivity extends AppCompatActivity implements ObservableScrollViewCallbacks

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) 
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_actionbarcontrolscrollview);

        ObservableScrollView scrollView = (ObservableScrollView) findViewById(R.id.scroll);
        scrollView.setScrollViewCallbacks(this);

    

    @Override
    public void onScrollChanged(int scrollY, boolean firstScoll, boolean dragging) 

    

    @Override
    public void onDownMotionEvent() 

    

    @Override
    public void onUpOrCancleMotionEvent(ScrollState scrollState) 

        ActionBar actionBar = getSupportActionBar();

        if(actionBar == null)
            return;
        

        if(scrollState == ScrollState.UP)
            if(actionBar.isShowing())
                actionBar.hide();
            
        else if(scrollState == ScrollState.DOWN)
            if(!actionBar.isShowing())
                actionBar.show();
            
        

    

R.layout.actionbarcontrolscrollview代码如下：

<com.lc.proctice.androidstudioproctice.anim.widget.ObservableScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/scroll"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fillViewport="true">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="16dp"
        android:layout_marginLeft="16dp"
        android:layout_marginRight="16dp"
        android:layout_marginTop="16dp"
        android:text="@string/lipsum" />

</com.lc.proctice.androidstudioproctice.anim.widget.ObservableScrollView>

注意，ObservableScrollView控件是自定义的，这里引入要根据自己项目的实际文件位置命名。

此事件只处理了ActionBar的显示和隐藏，根据滑动状态处理，向上滑动，则隐藏ActionBar，向下滑动，则显示ActionBar。这样，前面动图的滑动效果就实现啦。

二、ScrollView滑动监听，实现ToolBar(ActionBar)文字的缩放移动

效果图：

FlexibleSpaceActionBarScrollviewActivity代码如下：

public class FlexibleSpaceActionBarScrollviewActiivty extends AppCompatActivity implements ObservableScrollViewCallbacks 

    private View mFlexibleSpaceView; //滑动可变区域
    private View mToolbarView;
    private TextView mTitleView;
    private int mFlexibleSpaceHeight;

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) 
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_flexiblespacetoolbarscrollview);

        mFlexibleSpaceView = findViewById(R.id.flexible_space);
        mTitleView = (TextView) findViewById(R.id.title);

        mTitleView.setText(getTitle());
        setTitle(null);
        mToolbarView = findViewById(R.id.toolbar);

        final ObservableScrollView scrollView = (ObservableScrollView) findViewById(R.id.scroll);
        scrollView.setScrollViewCallbacks(this);

        mFlexibleSpaceHeight = getResources().getDimensionPixelSize(R.dimen.flexible_space_height);//216
        int flexibleSpaceAndToolbarHeight = mFlexibleSpaceHeight + getActionBarSize(); //216+168=384
        
        Log.i("mFlexibleSpaceHeight:",mFlexibleSpaceHeight+" ActionBarSize:"+getActionBarSize());
        

        findViewById(R.id.body).setPadding(0, flexibleSpaceAndToolbarHeight ,0 ,0);
        //初始化加载时给滑动可变区域设置一个高度 384
        mFlexibleSpaceView.getLayoutParams().height = flexibleSpaceAndToolbarHeight;

        //给移动的文字设置滑动监听动画
        ScrollUtils.addOnGlobalLayoutListener(mTitleView, new Runnable() 
            @Override
            public void run() 
                updateFlexibleSpaceText(scrollView.getCurrentScrollY());
            
        );

    

    @Override
    public void onScrollChanged(int scrollY, boolean firstScoll, boolean dragging) 
        updateFlexibleSpaceText(scrollY);
    

    @Override
    public void onDownMotionEvent() 

    

    @Override
    public void onUpOrCancleMotionEvent(ScrollState scrollState) 

    

    //获取actionBarSize 返回168
    protected int getActionBarSize()
        TypedValue typedValue = new TypedValue();
        int[] textSizeAttr = new int[]R.attr.actionBarSize;
        TypedArray typedArray = this.obtainStyledAttributes(typedValue.data,textSizeAttr);
        int actionBarSize = typedArray.getDimensionPixelSize(0,-1);
        typedArray.recycle();
        return actionBarSize;
    

    private void updateFlexibleSpaceText(final int scrollY) 
        Log.i("scrollY滑动距离:",scrollY+" mFlexibleSpaceHeight高度:"+mFlexibleSpaceHeight );
        //设置滑动区域的滑动距离
        ViewHelper.setTranslationY(mFlexibleSpaceView, -scrollY);

        //设置滑动区域的滑动距离介于0-216
        int adjustedScrollY = (int) ScrollUtils.getFloat(scrollY, 0, mFlexibleSpaceHeight);

        Log.i("scrollY滑动距离:","adjustedScrollY" + adjustedScrollY);

        //计算文字缩放的倍数值
        float maxScale = (float) (mFlexibleSpaceHeight - mToolbarView.getHeight()) / mToolbarView.getHeight();
        float scale = maxScale * ((float) mFlexibleSpaceHeight - adjustedScrollY) / mFlexibleSpaceHeight;

        //设置文字放大倍数 设置中心点位置为中间点 设置缩放比例
        ViewHelper.setPivotX(mTitleView, 0);
        ViewHelper.setPivotY(mTitleView, 0);
        ViewHelper.setScaleX(mTitleView, 1 + scale);
        ViewHelper.setScaleY(mTitleView, 1 + scale);

        //设置文字移动位置
        int maxTitleTranslationY = mToolbarView.getHeight() + mFlexibleSpaceHeight - (int) (mTitleView.getHeight() * (1 + scale));
        int titleTranslationY = (int) (maxTitleTranslationY * ((float) mFlexibleSpaceHeight - adjustedScrollY) / mFlexibleSpaceHeight);
        ViewHelper.setTranslationY(mTitleView, titleTranslationY);
    

动画效果用nineoldandroids实现, android studio环境引入 

compile 'com.nineoldandroids:library:2.4.0' 

本例中用到的nineoldandroids的几个方法介绍：

ViewHelper.setTranslationY(view,distance); 将view在Y轴方向移动distance距离

ViewHelper.setPivotX(view,0);

ViewHelper.setPivoY(view,0); 将view的缩放中心放置在view的中间点

ViewHelper.setScaleX(view,scale); 设置view在X轴方向的缩放倍数

ViewHelper.setScaleY(view,scale); 设置view在Y轴方向的缩放倍数

示例代码中所有滑动距离都是用像素px表示。px和dp之间的转换如下：

<span style="white-space:pre">	</span>/**
	 * 根据手机的分辨率从 dp 的单位 转成为 px(像素)
	 */
	public static int dip2px(Context context, float dpValue) 
		final float scale = context.getResources().getDisplayMetrics().density;
		return (int) (dpValue * scale + 0.5f);
	

	/**
	 * 根据手机的分辨率从 px(像素) 的单位 转成为 dp
	 */
	public static int px2dip(Context context, float pxValue) 
		final float scale = context.getResources().getDisplayMetrics().density;
		return (int) (pxValue / scale + 0.5f);
	

R.layout.flexiblespacetoolbarscrollview 布局文件代码如下:

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.lc.proctice.androidstudioproctice.anim.widget.ObservableScrollView
        android:id="@+id/scroll"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fillViewport="true"
        android:scrollbars="none">

        <FrameLayout
            android:id="@+id/body"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:paddingTop="@dimen/flexible_space_height">

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@android:color/white"
                android:paddingBottom="@dimen/activity_vertical_margin"
                android:paddingLeft="@dimen/activity_horizontal_margin"
                android:paddingRight="@dimen/activity_horizontal_margin"
                android:paddingTop="@dimen/activity_vertical_margin"
                android:text="@string/lipsum" />
        </FrameLayout>

    </com.lc.proctice.androidstudioproctice.anim.widget.ObservableScrollView>

    <View
        android:id="@+id/flexible_space"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:background="@color/primary" />

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="?attr/colorPrimary"
        android:minHeight="?attr/actionBarSize"
        app:popupTheme="@style/Theme.AppCompat.Light.DarkActionBar"
        app:theme="@style/Base.Widget.AppCompat.Toolbar"
        />

    <!--
    android:layout_marginLeft on FrameLayout seems to be ignored on Android 2.3
    so add a parent RelativeLayout and set padding to it.
    -->
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingLeft="@dimen/toolbar_margin_start">

        <TextView
            android:id="@+id/title"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:ellipsize="end"
            android:gravity="center_vertical"
            android:maxLines="1"
            android:minHeight="?attr/actionBarSize"
            android:textColor="@android:color/white"
            android:textSize="20sp" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <View
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:background="@android:color/transparent" />

            <View
                android:layout_width="match_parent"
                android:layout_height="@dimen/flexible_space_height"
                android:background="@android:color/transparent" />
        </LinearLayout>
    </RelativeLayout>
</FrameLayout>