25_ScrollView实现悬浮标题栏效果

Android基础汇总

效果图

 

 

Demo地址：http://download.csdn.net/download/baopengjian/9999013

 

#1 需求：

ScrollView上滑时，ScrollView中内容标题会“固定住”，下滑时，滚动一段距离标题又随着ScrollView滚动

#2 原理

1)两个标题栏造成视觉错觉，一个标题栏和ScrollView在相同的RelativeLayout中，开始时隐藏；

2）监听ScrollView的滚动，当滚动一定距离范围时，隐藏或显示“悬浮的标题栏”

3）获取“悬浮的标题栏”在屏幕的位置，ScrollView滚动时判断ScrollView中的标题位置与隐藏的标题位置

4）ScrollView滚动监听并未暴露，需要重写

5) 可以根据ScrollView的滚动距离，计算一个比例，来做渐变效果

6）注意两个title的状态同步，如含有tab时，注意tab的position保持一致

#3 结构图

 

#4 代码：

1）自定义ScrollView

public class MyScrollView extends ScrollView {
    private ScrollChangedListener mListener;

    public MyScrollView(Context context) {
        super(context);
    }
    public MyScrollView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }
    public MyScrollView(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);
        if(mListener != null){
            mListener.onScrollChanged(l,t,oldl,oldt);
        }
    }

    public void setScrollChangedListener(ScrollChangedListener listener){
        mListener = listener;
    }

    public static interface ScrollChangedListener{
        void onScrollChanged(int l, int t, int oldl, int oldt);
    }
}

2）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">
    <com.bpj.scrollviewsuspenion.MyScrollView
        android:id="@+id/sc"
        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="200dp"
                android:gravity="center"
                android:text="内容一" />

            <LinearLayout
                android:id="@+id/tv_title"
                android:orientation="horizontal"
                android:layout_width="match_parent"
                android:layout_height="40dp"
                android:gravity="center_vertical"
                android:background="@color/colorPrimary">

                <TextView
                    android:layout_width="0dp"
                    android:layout_weight="1"
                    android:layout_height="wrap_content"
                    android:background="@color/colorPrimary"
                    android:text="标题栏"
                    android:textColor="@android:color/white"
                    />
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:background="@color/colorPrimary"
                    android:text="（ScrollView中固定的）"
                    android:textColor="@android:color/white"
                    />
            </LinearLayout>
            <TextView
                android:layout_width="match_parent"
                android:layout_height="800dp"
                android:gravity="center"
                android:text="内容二" />
        </LinearLayout>

    </com.bpj.scrollviewsuspenion.MyScrollView>
    <LinearLayout
        android:id="@+id/tv_hide"
        android:visibility="gone"
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:gravity="center_vertical"
        android:background="@color/colorPrimary">

        <TextView
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="wrap_content"
            android:background="@color/colorPrimary"
            android:text="标题栏"
            android:textColor="@android:color/white"
             />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@color/colorPrimary"
            android:text="（隐藏的）"
            android:textColor="@android:color/white"
            />
    </LinearLayout>

</RelativeLayout>

3）设置

public class MainActivity extends AppCompatActivity {
    private View tv_title,tv_hide;
    private int[] mLocationHide = new int[2];
    int[] mTitleLocation = new int[2];

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        tv_title = findViewById(R.id.tv_title);
        tv_hide = findViewById(R.id.tv_hide);
        MyScrollView sc = (MyScrollView) findViewById(R.id.sc);
        sc.setScrollChangedListener(new MyScrollView.ScrollChangedListener() {
            @Override
            public void onScrollChanged(int l, int t, int oldl, int oldt) {
                tv_hide.getLocationOnScreen(mLocationHide);
               tv_title.getLocationOnScreen(mTitleLocation);
                //y方向坐标比较
                if(mTitleLocation[1]>mLocationHide[1]){
                    tv_hide.setVisibility(View.GONE);
                }else{
                    tv_hide.setVisibility(View.VISIBLE);
                }
            }
        });
    }
}