自定義Scrollview--實現仿淘寶Toolbar透明度漸變效果

1，上個月做了下電商的項目，本來以為本簡單的，但做起來還是遇到了不少的問題，上個周五項目就上線了，不過時間還是很緊，PM給了我兩天時間總結總結，然后又要開始一個新的項目和這個項目的迭代，感覺又要開始累死了。不瞎扯了，今天是要實現類似於淘寶Toobar的效果，先看一下淘寶的效果：

再看看我們項目中實現的效果：

 

2，這里我上面的返回和購物車的圖片在漸變的時候沒有細節的處理，所以導致切換照片的時候有點突然，不過大體的功能還是差不多的，其實實現這種效果還是挺簡單的，就是自營以一個Scrollview監聽他的滑動事件，然后更新上面的Toobar透明度，好了，不多說了 ，直接看代碼把。

TranslucentScrollView.java

package com.qianmo.projectfunctionpoint;

/**
 * Created by wangjitao on 2016/8/29 0029.
 */

import android.content.Context;
import android.util.AttributeSet;
import android.widget.ScrollView;

public class TranslucentScrollView extends ScrollView {
    private OnScrollChangedListener mOnScrollChangedListener;

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

    public TranslucentScrollView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public TranslucentScrollView(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 (mOnScrollChangedListener != null) {
            mOnScrollChangedListener.onScrollChanged(this, l, t, oldl, oldt);
        }
    }

    public void setOnScrollChangedListener(OnScrollChangedListener listener) {
        mOnScrollChangedListener = listener;
    }

    public interface OnScrollChangedListener {
        void onScrollChanged(ScrollView who, int l, int t, int oldl, int oldt);
    }
}

 activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    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"
    >

    <include layout="@layout/toolbar"/>

    <com.qianmo.projectfunctionpoint.TranslucentScrollView
        android:id="@+id/scrollview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        >

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical"
            >

            <ImageView
                android:id="@+id/iv_head"
                android:layout_width="match_parent"
                android:layout_height="@dimen/dimen_300"
                android:scaleType="centerCrop"
                android:src="@mipmap/bg_image"
                />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="200dp"
                android:background="#ff0000"
                />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="200dp"
                android:background="#00ff00"
                />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="200dp"
                android:background="#0000ff"
                />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="200dp"
                android:background="#00ffff"
                />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="200dp"
                android:background="#ff00ff"
                />
        </LinearLayout>
    </com.qianmo.projectfunctionpoint.TranslucentScrollView>

</RelativeLayout>

　　MainActivity.java

package com.qianmo.projectfunctionpoint;

import android.graphics.Color;
import android.os.Bundle;
import android.support.design.widget.FloatingActionButton;
import android.support.design.widget.Snackbar;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.View;
import android.view.Menu;
import android.view.MenuItem;
import android.widget.ScrollView;

public class MainActivity extends AppCompatActivity implements TranslucentScrollView.OnScrollChangedListener {
    private TranslucentScrollView scrollView;
    private Toolbar toolbar;

    private float headerHeight;//頂部高度
    private float minHeaderHeight;//頂部最低高度，即Bar的高度

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

        initView();
    }

    private void initView() {
        scrollView = (TranslucentScrollView) findViewById(R.id.scrollview);
        scrollView.setOnScrollChangedListener(this);
        toolbar = (Toolbar) findViewById(R.id.toolbar);
        toolbar.setBackgroundColor(Color.argb(0, 18, 176, 242));
        initMeasure();
    }

    private void initMeasure() {
        headerHeight = getResources().getDimension(R.dimen.dimen_300);
        minHeaderHeight = getResources().getDimension(R.dimen.abc_action_bar_default_height_material);

    }

    @Override
    public void onScrollChanged(ScrollView who, int l, int t, int oldl, int oldt) {
        //Y軸偏移量
        float scrollY = who.getScrollY();

        //變化率
        float headerBarOffsetY = headerHeight - minHeaderHeight;//Toolbar與header高度的差值
        float offset = 1 - Math.max((headerBarOffsetY - scrollY) / headerBarOffsetY, 0f);

        //Toolbar背景色透明度
        toolbar.setBackgroundColor(Color.argb((int) (offset * 255), 18, 176, 242));

//        //header背景圖Y軸偏移
//        imgHead.setTranslationY(scrollY / 2);
    }
}

ok這樣的話我們的效果就實現了，看一下抽出來的Demo

 補：Demo下載鏈接 http://download.csdn.net/detail/w543441727/9615978 （對不起，開啟騙積分模式 2333）