学习笔记之——仿途牛详情界面标题栏透明度渐变

       仿途牛详情界面标题栏透明度渐变是之前开发的独立项目功能之一，今天新项目又做到了这个功能，索性封装一下做成单独demo，方便以后多次调用和学习。

       按照以往惯例先上效果图：

1.主要是标题栏的透明度跟着滑动的距离改变透明度

2.标题栏的字体跟着滑动改变透明度

3.标题栏的返回按钮逐渐替换新的图标，没有跳变的感觉

首先自定义一个ScrollViewExtend 继承 ScrollView，监听滑动的距离

public class ScrollViewExtend extends ScrollView {
	public interface OnScrollChangedListener {
		void onScrollChange(int offset);
	}

	private OnScrollChangedListener mListener;

	public void setOnScrollChangedListener(OnScrollChangedListener l) {
		this.mListener = l;
	}

	@Override
	protected void onScrollChanged(int l, int t, int oldl, int oldt) {
		super.onScrollChanged(l, t, oldl, oldt);
		if (mListener != null) {
			mListener.onScrollChange(t);
		}
	}

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

}

接下来是设置标题栏的布局，用帧布局来放置两个会覆盖的返回按钮图标：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@id/product_header_v2"
    android:layout_width="fill_parent"
    android:layout_height="@dimen/h_header"
    android:background="@color/header_background" >

    <FrameLayout  //返回按钮
        android:id="@id/frm_back"
        android:layout_width="wrap_content"
        android:layout_height="fill_parent" >

        <ImageView   //白色按钮
            android:id="@id/tv_back_group"
            android:layout_width="wrap_content"
            android:layout_height="fill_parent"
            android:layout_centerVertical="true"
            android:paddingLeft="15.0dip"
            android:paddingRight="15.0dip"
            android:src="@drawable/icon_bg_group_detail_back" />
 
        <ImageView   //绿色按钮
            android:id="@id/tv_back_background"
            android:layout_width="wrap_content"
            android:layout_height="fill_parent"
            android:layout_centerVertical="true"
            android:paddingLeft="15.0dip"
            android:paddingRight="15.0dip"
         android:visibility="invisible"
            android:src="@drawable/icon_bg_group_detail_back_backgroud" />
    </FrameLayout>

    <TextView   //标题
        android:id="@id/tv_header_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:layout_marginBottom="3.0dip"
        android:gravity="center_horizontal"
        android:singleLine="true"
        android:textColor="#00000000"
        android:textSize="@dimen/ts_header_title" />
    
    <View   //底部分割线
        android:id="@id/v_header_divider_v2"
        android:layout_width="fill_parent"
        android:layout_height="@dimen/h_divider"
        android:layout_alignParentBottom="true"
        android:background="#00000000" />

</RelativeLayout>

核心代码：

	@Override
	public void onScrollChange(int offset) {
		int height = mProductImage.getHeight();
		if (offset <= height) {
			int percent = offset * 100 / height;
			Log.e("onScrollChange", "percent: " + percent);
			alpha = 0xFF * percent / 100;
			if (percent >= 10) {
				baise.setVisibility(View.VISIBLE);
				baise.setAlpha(255 - alpha);
				lvse.setVisibility(View.VISIBLE);
				lvse.setAlpha(alpha);
			} else {
				baise.setAlpha(255 - alpha);
				mDetailTitlebar.setBackgroundColor(Color.WHITE);
				lvse.setAlpha(alpha);
			}
			Log.e("onScrollChange", "alpha: " + alpha);
			mDetailTitlebar.setBackgroundColor(Color.argb(alpha, 0xFF, 0xFF, 0xFF));
			tv_header_title.setTextColor(Color.argb(alpha, 0x33, 0x33, 0x33));
			v_header_divider_v2.setBackgroundColor(Color.argb(alpha, 0xee, 0xee, 0xee));
		} else {
			baise.setVisibility(View.INVISIBLE);
			lvse.setVisibility(View.VISIBLE);
			mDetailTitlebar.setBackgroundColor(Color.WHITE);
			v_header_divider_v2.setBackgroundColor(Color.parseColor("#eeeeee"));
			tv_header_title.setTextColor(Color.parseColor("#333333"));
		}
	}

Demo源码下载：http://download.youkuaiyun.com/detail/lxlyhm/9712701