首页 > 代码库 > Android ScrollView妙用(scrolling tricks详解)

Android ScrollView妙用(scrolling tricks详解)

最近辞职在家闲来无事搞起了Android studio,刚上手时各种头痛,现在适应来一段时间发现它确实要比eclipse强大一些,那么我们今天就来说一下scrollview的一些用法,相信很多人用scrollview时只是简单的把它当一个滚动装置来用,其实scrollview有很多简单却又炫酷的用法,先看个效果.


相信很多人会感到眼熟,这就是ScrollingTricks的效果,我们今天就是来分析它的工作原理,毕竟从原理上理解效果会更好。

1,STICKY

我们知道scrollview的onScrollChanged方法是只能通过继承scrollview来获取的,那么我们就通过接口的回调把我们需要的值给取出来。

public class ObservableScrollView extends ScrollView {

    public Callbacks mCallbacks;

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

    public void setCallbacks(Callbacks callbacks) {
        this.mCallbacks = callbacks;
    }

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

    /**
     * 由垂直方向滚动条代表的所有垂直范围,缺省的范围是当前视图的画图高度。
     */
    public int computeVerticalScrollRange(){
        return super.computeVerticalScrollRange();
    }

    public interface Callbacks {
        public void onScrollchanged(int t);

        public void onTouchUp();

        public void onTouchDown();
    }

}
接着我们可以在布局中引用我们自己写的scrollview

<com.example.apple.myapplication.ObservableScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/scroll_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

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

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

            <View style="@style/Item.Top" />

            <View android:id="@+id/placeholder"
                android:layout_width="match_parent"
                android:layout_height="@dimen/sticky_height" />

            <View style="@style/Item.Bottom" />
            <View style="@style/Item.Bottom.Alt" />
            <View style="@style/Item.Bottom" />
            <View style="@style/Item.Bottom.Alt" />
            <View style="@style/Item.Bottom" />
            <View style="@style/Item.Bottom.Alt" />

        </LinearLayout>

        <TextView android:id="@+id/sticky" style="@style/Item.Sticky" />

    </FrameLayout>
</com.example.apple.myapplication.ObservableScrollView>

注意我们里面一定要用FrameLayout

public class StickyActivity extends Activity implements ObservableScrollView.Callbacks {

    private TextView txtContent;
    private ObservableScrollView observableScrollView;
    private View mPlaceholderView;
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_sticky);
        mPlaceholderView = (View)findViewById(R.id.placeholder);
        txtContent = (TextView) findViewById(R.id.sticky);
        txtContent.setText("StickyActivity");
        observableScrollView = (ObservableScrollView) findViewById(R.id.scroll_view);
        observableScrollView.setCallbacks(this);
        /**
         * 当布局绘制完全的时候我们才可以得到view.getTop()等
         */
        observableScrollView.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
            @Override
            public void onGlobalLayout() {
                onScrollchanged(observableScrollView.getScrollY());

            }
        });
    }

    @Override
    public void onScrollchanged(int t) {
        int translation = Math.max(t,mPlaceholderView.getTop());
        txtContent.setTranslationY(translation);
    }

    @Override
    public void onTouchUp() {

    }

    @Override
    public void onTouchDown() {

    }
}

很简单不是么,不过在这里还是要给大家解释一下,getViewTreeObserver,因为我们要获取到view.getTop的值,但我们在oncreate里面获取时获取不到的,返回值永远为0,所以我们要添加整体布局监听。

接下来的onScrollchanged方法我们上个图解释一下


为什么我的眼里充满泪水,是因为我根本没有绘画天赋。。

这样我们直观的看一下,Math.max(t,gettop);就是不断的比较,当t大于gettop的时候我们可以认为滑倒顶部了,接下来因为t还在增大我们setTranslationY也在不断增大,所以效果上就是我们的textview停在了最上面。


2,QUICKRETURN


效果就是不管我们滑动了多远只要向下滑动的时候我们的textview就可以显示出来,我们接着分析代码,其实也不难


 /**
     * 上滑动状态
     */
    private static final int STATE_ONSCREEN = 0;
    /**
     * 上滑动至完全遮盖住mPlaceholderView
     */
    private static final int STATE_OFFSCREEN = 1;
    /**
     * 完全遮盖住时,下滑状态
     */
    private static final int STATE_RETURING = 2;
    private int mState = STATE_ONSCREEN;
    /**
     * 高度
     */
    private int mViewHeight;
    private int minRaw;

其他的基本类似,我们可以看到新增了三个状态,以及一个minraw,这个值后面是用来做判断以及确认位置的

   @Override
    public void onScrollchanged(int t) {
        int raw = mPlaceholderView.getTop() - t;
        int translationY = 0;
        switch (mState) {
            case STATE_ONSCREEN:
               // Log.d("TAG","STATE_ONSCREEN");
                if (raw < -mViewHeight) {
                    mState = STATE_OFFSCREEN;
                    minRaw = raw;
                }
                translationY = raw;
                break;
            case STATE_OFFSCREEN:
               // Log.d("TAG","STATE_OFFSCREEN");
                if (raw<=minRaw){
                    minRaw = raw;
                }
                else{
                     mState = STATE_RETURING;
                }
                translationY = raw;
                break;
            case STATE_RETURING:
                translationY = (raw - minRaw) - mViewHeight;
                Log.d("TAG","translationY:"+translationY);
                if (translationY > 0) {
                    translationY = 0;
                    minRaw = raw - mViewHeight;
                }

                if (raw > 0) {
                    mState = STATE_ONSCREEN;
                    translationY = raw;
                }

                if (translationY < -mViewHeight) {
                    mState = STATE_OFFSCREEN;
                    minRaw = raw;
                }
                break;
        }
        txtContent.setTranslationY(translationY+t);
    }

这次在onscrollchange里面的代码可能多了一些,但是只要理解了其实没什么。

首先是raw = getTop() - t;

空间能力强的可能已经自行脑补出来画面了,我们这里分析一下t是y轴上的变化值,gettop为距离顶部的值,那么我们这样一相减得到的是不是当前位置。

STATE_ONSCREEN:向上滑动当raw < -ViewHeight时说明屏幕上已经彻底看不到我们的text了,状态就转变成STATE_OFFSCREEN.

STATE_OFFSCREEN:此时我们已经看不到text所以我们只要向下滑动的时候minraw>raw = true;此时就转变成STATE_RETURING.


STATE_RETURING:因为我们时向下滑动,所以我们要算出来滑动的距离以及text显示的部分,所以translationY = (raw - minRaw) - mViewHeight;


这样的话应该就没什么难理解的了,最后说下android studio真实让人冰火俩重天,好用的时候真好用,难用的时候让人想砸电脑!!


项目源码





Android ScrollView妙用(scrolling tricks详解)