仿淘宝商品详情页顶部滑动渐变出现title

现在很多电商app都喜欢模仿淘宝页面效果。我之前网上找了一些资料，又改造了一些，也凑合做了一个类似的效果。

1.先写一个滑动的view,

public class TransChangeScrollview extends ScrollView {
    ScrollHeight scrollHeight;
    private int th1;//滑动的距离1
    private int th2;//滑动的距离2
    private int th3;//滑动的距离3

    public TransChangeScrollview(Context context) {
        super(context);
    }

    public TransChangeScrollview(Context context, AttributeSet attrs) {
        super(context, attrs);
        th1=changeDpToPx(100);//把滑动的距离1由dp转换成px
        th2=changeDpToPx(200);//把滑动的距离2由dp转换成px
        th3=changeDpToPx(300);//把滑动的距离3由dp转换成px

    }

    public TransChangeScrollview(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(scrollHeight!=null) {

            if (t <= 0) {
                scrollHeight.scrollVersion(0);
            } else if (t > 0 && t <= th1) {
                scrollHeight.scrollVersion(1);
            } else if (t > th1 && t <= th2) {
                scrollHeight.scrollVersion(2);
            } else if (t <= th2 && t > th3) {
                scrollHeight.scrollVersion(3);
            } else {
                scrollHeight.scrollVersion(4);

            }
        }



    }

    public interface ScrollHeight{
       void scrollVersion(int version);//回调方法
    }


    public ScrollHeight getScrollHeight() {
        return scrollHeight;
    }

    public void setScrollHeight(ScrollHeight scrollHeight) {
        this.scrollHeight = scrollHeight;
    }

    int changeDpToPx(int d) {
        final float scale = this.getResources().getDisplayMetrics().density;
        int px=(int) (d * scale + 0.5f);
        return px;
    }
}

2.页面layout布局：

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"

    tools:context=".MainActivity">


    <com.example.testdemoactivity.view.TransChangeScrollview
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
        android:id="@+id/tran_scrollview"
        >
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        >



      <ImageView
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          android:src="@mipmap/tt1"
          android:id="@+id/piv"
          />


        <TextView

            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="中间分割线"
            android:gravity="center"
            android:textColor="@color/colorPrimaryDark"
            />
        <ImageView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:src="@mipmap/tt1"

            />
        <ImageView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:src="@mipmap/tt1"

            />
        <ImageView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:src="@mipmap/tt1"

            />
    </LinearLayout>
</com.example.testdemoactivity.view.TransChangeScrollview>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:id="@+id/top_title"
        android:background="@color/white0"
        >

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="商品详情title"
            android:padding="10dp"
            android:gravity="center"
            android:textColor="@color/white0"
            android:id="@+id/t1"
            />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:padding="10dp"
            android:gravity="center"
            >
            <TextView
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="宝贝"
                android:gravity="center"
                android:id="@+id/tt1"
                android:textColor="@color/white0"
                />
            <TextView
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="评价"
                android:gravity="center"
                android:id="@+id/tt2"
                android:textColor="@color/white0"
                />
            <TextView
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="详情"
                android:gravity="center"
                android:id="@+id/tt3"
                android:textColor="@color/white0"
                />
            <TextView
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="推荐"
                android:gravity="center"
                android:id="@+id/tt4"
                android:textColor="@color/white0"
                />
        </LinearLayout>
    </LinearLayout>
</FrameLayout>

3.activity代码：

public class MainActivity extends AppCompatActivity implements TransChangeScrollview.ScrollHeight {

    @BindView(R.id.piv)
    ImageView piv;
    @BindView(R.id.top_title)
    LinearLayout topTitle;
    @BindView(R.id.tran_scrollview)
    TransChangeScrollview tranScrollview;
    @BindView(R.id.t1)
    TextView t1;
    @BindView(R.id.tt1)
    TextView tt1;
    @BindView(R.id.tt2)
    TextView tt2;
    @BindView(R.id.tt3)
    TextView tt3;
    @BindView(R.id.tt4)
    TextView tt4;

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

        tranScrollview.setScrollHeight(this);

    }


   

    @Override
    public void scrollVersion(int version) {
        if (version == 0) { //滑动到顶部，顶部背景颜色变透明
            topTitle.setBackgroundColor(getResources().getColor(R.color.white1));
            Log.d("Test", "version 0");
            setTextColor(false);//把字体颜色透明
        } else if (version == 1) {
            topTitle.setBackgroundColor(getResources().getColor(R.color.white2));//半透明颜色
            Log.d("Test", "version 1");
            setTextColor(true);//字体颜色变深
        } else if (version == 2) {
            topTitle.setBackgroundColor(getResources().getColor(R.color.white3));//半透明颜色（更接近白色）
            Log.d("Test", "version 2");
            setTextColor(true);//字体颜色变深
        } else if (version == 3) {
            topTitle.setBackgroundColor(getResources().getColor(R.color.white0));//透明的颜色
            Log.d("Test", "version 3");
            setTextColor(false);//字体颜色透明
        } else {
            topTitle.setBackgroundColor(getResources().getColor(R.color.white));//白色背景
            setTextColor(true);//字体颜色变深
        }
    }


    void setTextColor(boolean isView) {
       if(isView){
           t1.setTextColor(getResources().getColor(R.color.black));
           tt1.setTextColor(getResources().getColor(R.color.oricolor));
           tt2.setTextColor(getResources().getColor(R.color.black));
           tt3.setTextColor(getResources().getColor(R.color.black));
           tt4.setTextColor(getResources().getColor(R.color.black));
       }else{
           t1.setTextColor(getResources().getColor(R.color.white0));
           tt1.setTextColor(getResources().getColor(R.color.white0));
           tt2.setTextColor(getResources().getColor(R.color.white0));
           tt3.setTextColor(getResources().getColor(R.color.white0));
           tt4.setTextColor(getResources().getColor(R.color.white0));
       }

    }
}