酷炫吸頂效果一：ScrollView如何實現的酷炫吸頂效果

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));
                }
            }
        });
複製代碼