Cool top effect one: ScrollView how to achieve cool top effect

1. Look at the effect picture first

The key point is:

A. Normal code: the MyScrollView control contains the top part of layout_top_view

B. At the same level of MyScrollView, duplicate the same top layout_stick_view code, also at the top, of course, you can customize the background color and image of the two layouts

Note: Here is the simplified layout code

<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>
Copy the code

2. Add a slide listener to the scrollView control

Listen to the distance of the scrollView’s sliding Y-coordinate, dynamically control the show and hide of the two top layouts (layoutTopView and layoutStickView), and set the animation effect

 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 is obtained by the tool, or provided by the artist}else if(y > 0 && y <= layoutTopView.getHeight()) { layoutStickView.setVisibility(View.VISIBLE); // Get the percentage of images that disappear when ScrollView slides downfloat scale = (float) y / layoutTopView.getHeight(); // Increase the ratio to make the title color from light to darkfloatalpha = (255 * scale); / / just a layout background transparent layoutStickView. SetBackgroundColor (. Color argb (alpha (int), 255, 255, 255)); }else{ layoutStickView.setVisibility(View.VISIBLE); layoutStickView.setBackgroundColor(getResources().getColor(R.color.colorWhite)); }}});Copy the code