酷炫吸顶效果一:ScrollView如何实现的酷炫吸顶效果

5,829 阅读2分钟

1.先看效果图

2.我的xml文件代码

关键点在于:

a.正常代码:在MyScrollView控件中包含着顶部部分layout_top_view

b.在MyScrollView控件同一级,再复制一份相同的顶部代码layout_stick_view,同样是居于顶部,当然两个布局的背景色和图片,你可以任意自定义

注意:以下是简化了的布局代码

<layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools">
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity">
    <com.example.jingbin.zkfudou.view.MyScrollView
        android:id="@+id/scrollView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scrollbars="none"
        android:fillViewport="true">
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:background="@color/color_F7F4F8"
        tools:context=".ui.GoodDetailActivity">

        <RelativeLayout
            xmlns:app="http://schemas.android.com/apk/res-auto"
            android:id="@+id/layout_top"
            android:layout_width="match_parent"
            android:layout_height="320dp"
            android:orientation="vertical">
            <com.youth.banner.Banner
                android:id="@+id/banner"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="@null"
                app:indicator_drawable_selected="@drawable/banner_selected"
                app:indicator_drawable_unselected="@drawable/banner_unselected"
                app:indicator_height="3dp"
                app:indicator_margin="5dp"
                app:indicator_width="14dp" />
            <RelativeLayout
                android:id="@+id/layout_top_view"
                android:layout_width="match_parent"
                android:layout_height="wrap_content">
            <ImageView
                android:layout_width="48dp"
                android:layout_height="48dp"
                android:onClick="clickBack"
                android:padding="14dp"
                android:layout_marginTop="25dp"
                android:layout_marginLeft="5dp"
                android:layout_marginRight="5dp"
                android:scaleType="centerCrop"
                android:src="@mipmap/icon_detail_back" />

            <ImageView
                android:layout_width="48dp"
                android:layout_height="48dp"
                android:layout_alignParentRight="true"
                android:onClick="onClickShare"
                android:padding="14dp"
                android:layout_marginTop="25dp"
                android:layout_marginLeft="5dp"
                android:layout_marginRight="5dp"
                android:scaleType="centerCrop"
                android:src="@mipmap/icon_share_white" />

            </RelativeLayout>
        </RelativeLayout>
            </RelativeLayout>
    </com.example.jingbin.zkfudou.view.MyScrollView>
            <RelativeLayout
            android:id="@+id/layout_stick_view"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/colorWhite"
            android:visibility="gone">
            <ImageView
                android:layout_width="48dp"
                android:layout_height="48dp"
                android:onClick="clickBack"
                android:padding="14dp"
                android:layout_marginTop="25dp"
                android:layout_marginLeft="5dp"
                android:layout_marginRight="5dp"
                android:scaleType="centerCrop"
                android:src="@mipmap/icon_detail_back_33" />

            <ImageView
                android:layout_width="48dp"
                android:layout_height="48dp"
                android:layout_alignParentRight="true"
                android:onClick="onClickShare"
                android:padding="14dp"
                android:layout_marginTop="25dp"
                android:layout_marginLeft="5dp"
                android:layout_marginRight="5dp"
                android:scaleType="centerCrop"
                android:src="@mipmap/icon_share" />
        </RelativeLayout>
     </RelativeLayout>

2.给scrollView控件添加滑动监听

监听scrollView的滑动y坐标的距离,动态控制两个顶部布局(layoutTopView和layoutStickView)的显示和隐藏,以及设置动画效果

 scrollView.setScrollViewListener(new MyScrollView.ScrollViewListener() {
        @Override
        public void onScrollChanged(MyScrollView scrollView, int x, int y, int oldx, int oldy) {
                if (y <= 0) {
                    layoutStickView.setVisibility(View.GONE);
                    layoutStickView.setBackgroundColor(Color.argb((int) 0, 227, 29, 26));//AGB由相关工具获得,或者美工提供
                } else if (y > 0 && y <= layoutTopView.getHeight()) {
                    layoutStickView.setVisibility(View.VISIBLE);
                    //获取ScrollView向下滑动图片消失的比例
                    float scale = (float) y / layoutTopView.getHeight();
                    //更加这个比例,让标题颜色由浅入深
                    float alpha = (255 * scale);
                    // 只是layout背景透明
                    layoutStickView.setBackgroundColor(Color.argb((int) alpha, 255, 255, 255));
                }else {
                    layoutStickView.setVisibility(View.VISIBLE);
                    layoutStickView.setBackgroundColor(getResources().getColor(R.color.colorWhite));
                }
            }
        });