FixedTabScrollView

More: Author   ReportBugs   
Tags:
吸顶-

FixedTabScrollView是一个 scrollView+ViewPager 并实现自动顶吸,固定顶部控件,动态计算 Viewpager 控件高度的 一个解决方式的 Demo (这个 Demo 应该可以给大家提供一种解决问题的思路,希望能帮助到大家)

点击进入项目地址

实际效果:

image

需求和问题:

在实际项目中我们常常会碰到这样的需求,scrollView 包裹 ViewPager,ViewPager 包裹 Fragment, 在 scrollView 向上滑动时,会把 ViewPager 的选择 Tab 栏固定在顶部。 但是在 scrollView 包裹 ViewPager 是的高度计算问题也很让人头疼,而且如果突然有个需求,让你想做一个像翻页一样的效果,展示出来就像 ViewPager 占了一页,这个应该怎么做呢?

自定义 ScrollView

既然是要在 scrollView 滑动时候做一些操作,那么我们就需要监听 scrollView 的滑动事件,但是原生控件没有将 onScrollChanged()对外开放,所以我们需要自定义一个 ScrollView,并且将滑动事件暴露出去

public class HoldTabScrollView extends ScrollView {
    private Scroller mScroller;

    public HoldTabScrollView(Context context) {
        this(context, null);
        mScroller = new Scroller(context);
    }

    public HoldTabScrollView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
        mScroller = new Scroller(context);
    }

    public HoldTabScrollView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        mScroller = new Scroller(context);
    }

    //调用此方法滚动到目标位置  duration 滚动时间
    public void smoothScrollToSlow(int fx, int fy, int duration) {
        int dx = fx - getScrollX();//mScroller.getFinalX();  普通 view 使用这种方法
        int dy = fy - getScrollY();  //mScroller.getFinalY();
        smoothScrollBySlow(dx, dy, duration);
    }

    //调用此方法设置滚动的相对偏移
    public void smoothScrollBySlow(int dx, int dy, int duration) {

        //设置 mScroller 的滚动偏移量
        mScroller.startScroll(getScrollX(), getScrollY(), dx, dy, duration);//scrollView 使用的方法(因为可以触摸拖动)
//        mScroller.startScroll(mScroller.getFinalX(), mScroller.getFinalY(), dx, dy, duration);  //普通 view 使用的方法
        invalidate();//这里必须调用 invalidate()才能保证 computeScroll()会被调用,否则不一定会刷新界面,看不到滚动效果
    }

    @Override
    public void computeScroll() {
        //先判断 mScroller 滚动是否完成
        if (mScroller.computeScrollOffset()) {

            //这里调用 View 的 scrollTo()完成实际的滚动
            scrollTo(mScroller.getCurrX(), mScroller.getCurrY());

            //必须调用该方法,否则不一定能看到滚动效果
            postInvalidate();
        }
        super.computeScroll();
    }

    private OnHoldTabScrollViewScrollChanged mOnObservableScrollViewScrollChanged;

    public void setOnObservableScrollViewScrollChanged(OnHoldTabScrollViewScrollChanged mOnObservableScrollViewScrollChanged) {
        this.mOnObservableScrollViewScrollChanged = mOnObservableScrollViewScrollChanged;
    }


    public interface OnHoldTabScrollViewScrollChanged {
        void onObservableScrollViewScrollChanged(int l, int t, int oldl, int oldt);
    }

    /**
     * @param l    Current horizontal scroll origin. 当前滑动的 x 轴距离
     * @param t    Current vertical scroll origin. 当前滑动的 y 轴距离
     * @param oldl Previous horizontal scroll origin. 上一次滑动的 x 轴距离
     * @param oldt Previous vertical scroll origin. 上一次滑动的 y 轴距离
     */
    @Override
    protected void onScrollChanged(int l, int t, int oldl, int oldt) {
        super.onScrollChanged(l, t, oldl, oldt);
        if (mOnObservableScrollViewScrollChanged != null) {
            mOnObservableScrollViewScrollChanged.onObservableScrollViewScrollChanged(l, t, oldl, oldt);
        }
    }

    @Override
    public void fling(int velocityY) {
//        super.fling(velocityY / 1000);
    }
}

这样一来,在我们使用 HoldTabScrollView 的时候,通过 setOnObservableScrollViewScrollChanged 可以设置一个滑动监听,以此来对其滑动过程中做一些操作。

修改布局

固定 View 的原理就是在顶部创建一个同 View 高度相同的父容器,在 View 滑动上去的时候,移除掉原来的 View,并且将此 View 添加到顶部父容器中,,同理,在 View 滑动下来的时候,移除,顶部父容器中的 View,并将此 View 添加到原父容器中。

image

我们来修改一下布局:

<?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">

    <com.app.demo.HoldTabScrollView xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id="@+id/root_scrollview"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

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

            <TextView
                android:layout_width="match_parent"
                android:layout_height="700px"
                android:background="#770077"
                android:gravity="center"
                android:text="顶部布局"
                android:textColor="#fff" />

            <RelativeLayout
                android:id="@+id/rl_center"
                android:layout_width="match_parent"
                android:layout_height="100px">

                <TextView
                    android:id="@+id/tablayout"
                    android:layout_width="match_parent"
                    android:layout_height="100px"
                    android:background="#009999"
                    android:gravity="center"
                    android:text="tablayout"
                    android:textColor="#fff" />
            </RelativeLayout>


            <com.app.demo.CustomScrollViewPager
                android:id="@+id/viewpager"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="#fff" />
        </LinearLayout>

    </com.app.demo.HoldTabScrollView>
    <RelativeLayout
        android:id="@+id/rl_top"
        android:layout_width="match_parent"
        android:layout_height="100px">

    </RelativeLayout>
</RelativeLayout>

解决 ScrollView 嵌套 ViewPager 高度计算问题

可以看到布局中有一个 CustomScrollViewPager 这个 ViewPager 可以动态的计算它所包裹的 Fragment 的高度,并将这个实时计算的高度来设置 ViewPager

public class CustomScrollViewPager extends ViewPager {
    private int current;
    private int height = 0;
    /**
     * 保存 position 与对于的 View
     */
    private HashMap<Integer, View> mChildrenViews = new LinkedHashMap<Integer, View>();

    private boolean scrollble = true;

    public CustomScrollViewPager(Context context) {
        super(context);
    }

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


    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        if (mChildrenViews.size() > current) {
            View child = mChildrenViews.get(current);
            child.measure(widthMeasureSpec, MeasureSpec.makeMeasureSpec(0, MeasureSpec.UNSPECIFIED));
            height = child.getMeasuredHeight();
        }

        heightMeasureSpec = MeasureSpec.makeMeasureSpec(height, MeasureSpec.EXACTLY);

        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    }

    public void resetHeight(int current) {
        this.current = current;
        if (mChildrenViews.size() > current) {

            LinearLayout.LayoutParams layoutParams = (LinearLayout.LayoutParams) getLayoutParams();
            if (layoutParams == null) {
                layoutParams = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, height);
            } else {
                layoutParams.height = height;
            }
            setLayoutParams(layoutParams);
        }
    }

    /**
     * 保存 position 与对于的 View
     */
    public void setObjectForPosition(View view, int position) {
        mChildrenViews.put(position, view);
    }


    @Override
    public boolean onTouchEvent(MotionEvent ev) {
        if (!scrollble) {
            return true;
        }
        return super.onTouchEvent(ev);
    }


    public boolean isScrollble() {
        return scrollble;
    }

    public void setScrollble(boolean scrollble) {
        this.scrollble = scrollble;
    }

}

我们在创建 ViewPager 中的 Fragment 实例的时候需要通过构造函数将这个 ViewPager 传进去

 mFragments.add(new Fragment1(viewPager));
 mFragments.add(new Fragment2(viewPager));

在 Fragment 中 调用↓来重新计算内部高度并设置 ViewPager(第二个参数标识当前 fragment 在 ViewPager 中的位置)

viewPager.setObjectForPosition(view,0);

计算需要被固定的控件的位置

因为我们在监听 scrollView 滚动的时候需要知道,滚动到哪个地方就移除原 tab,添加新 tab,所以我们需要知道原来的控件位置, 我们在 onWindowFocusChanged 方法中去获取

@Override
public void onWindowFocusChanged(boolean hasFocus) {
    super.onWindowFocusChanged(hasFocus);
    if (hasFocus) {
        //获取 HeaderView 的高度,当滑动大于等于这个高度的时候,需要把 tabView 移除当前布局,放入到外层布局
        mHeight = centerRl.getTop();
    }
}

根据这个高度来写滑动监听事件

@Override
    public void onObservableScrollViewScrollChanged(int l, int t, int oldl, int oldt) {
        if (t >= mHeight) {
            if (tablayout.getParent() != topRl) {
                centerRl.removeView(tablayout);
                topRl.addView(tablayout);
            }
        } else {
            if (tablayout.getParent() != centerRl) {
                topRl.removeView(tablayout);
                centerRl.addView(tablayout);
            }
        }
    }

自动顶吸效果

自动顶吸的效果就是 用户向上滑动一点距离,页面自动滑动到 scrollView 固定的空间位置,完全展示 viewPager 中的内容。

我们使用 ScrollView 的 ScrollTo 来实现,不过因为这个方法滚动速度太快,我们需要对速度做一些处理并且禁用惯性滚动

对滚动速度的处理我们使用 Scroller 这个对象,在自定义 ScrollView 中:

 //调用此方法滚动到目标位置  duration 滚动时间
    public void smoothScrollToSlow(int fx, int fy, int duration) {
        int dx = fx - getScrollX();//mScroller.getFinalX();  普通 view 使用这种方法
        int dy = fy - getScrollY();  //mScroller.getFinalY();
        smoothScrollBySlow(dx, dy, duration);
    }

    //调用此方法设置滚动的相对偏移
    public void smoothScrollBySlow(int dx, int dy, int duration) {

        //设置 mScroller 的滚动偏移量
        mScroller.startScroll(getScrollX(), getScrollY(), dx, dy, duration);//scrollView 使用的方法(因为可以触摸拖动)
//        mScroller.startScroll(mScroller.getFinalX(), mScroller.getFinalY(), dx, dy, duration);  //普通 view 使用的方法
        invalidate();//这里必须调用 invalidate()才能保证 computeScroll()会被调用,否则不一定会刷新界面,看不到滚动效果
    }

禁用惯性滚动

@Override
    public void fling(int velocityY) {
//此处不进行任何操作就可以了
    }

修改 activity 中滑动监听

@Override
    public void onObservableScrollViewScrollChanged(int l, int t, int oldl, int oldt) {
        if (t >= mHeight) {
            if (tablayout.getParent() != topRl) {
                centerRl.removeView(tablayout);
                topRl.addView(tablayout);
                canJump = false;
            }
        } else {
            if (tablayout.getParent() != centerRl) {
                topRl.removeView(tablayout);
                centerRl.addView(tablayout);
                canJump = true;
            }
        }
        if (canJump && t >= oldt) {
            scrollView.smoothScrollToSlow(0, mHeight, 300);
        } else if (canJump && t < oldt) {
            scrollView.smoothScrollToSlow(0, 0, 300);
        }
    }

我们添加了一个布尔类型的判断标识,如果为 true 的时候就开启自动吸顶(ViewPager 没有占满一页的时候),为 false 的时候关闭自动吸顶。 利用 ScrollView 中自定义的 smoothScrollToSlow 方法来滑动到指定位置,最后一个参数可以调节滑动速度。

整套实现方式的关键代码都在这里了,具体的代码欢迎去顶部 github 地址下载跑一遍看看

Support Me
Apps
About Me
Google+: Trinea trinea
GitHub: Trinea