ScrollView实现悬浮标题栏效果

来源：互联网发布：女程序员能干到多少岁编辑：程序博客网时间：2024/06/06 08:43

效果图

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);                }            }        });    }}

阅读全文

0 0