Android 给scrollView添加毛玻璃效果的标题栏

效果如下



首先是布局文件，头部的标题栏是个压在scrollview上面的自定义控件

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/window"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.npi.blureffect.ScrollViewActivity" >

<com.npi.blureffect.CustomScrollView
android:id="@+id/scrollView1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true" >

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

<Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="50dp"
android:text="Button" />

<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="50dp"
android:text="Large Text"
android:textAppearance="?android:attr/textAppearanceLarge" />

<RatingBar
android:id="@+id/ratingBar1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="50dp" />

<RadioButton
android:id="@+id/radioButton1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="50dp"
android:text="RadioButton" />

<SeekBar
android:id="@+id/seekBar1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="50dp" />

<ToggleButton
android:id="@+id/toggleButton1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="50dp"
android:text="ToggleButton" />

<SeekBar
android:id="@+id/seekBar2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="50dp" />

<ProgressBar
android:id="@+id/progressBar1"
style="?android:attr/progressBarStyleLarge"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="50dp" />

<TextView
android:id="@+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="50dp"
android:text="Large Text"
android:textAppearance="?android:attr/textAppearanceLarge" />

<CalendarView
android:id="@+id/calendarView1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="50dp" />

</LinearLayout>
</com.npi.blureffect.CustomScrollView>

<com.npi.blureffect.ScrollableImageView
android:id="@+id/blurred_image_header"
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="#e8e8e8" />

</RelativeLayout>

下面是自定义的scrollVIew，其实就是把里面探测scrollView滚动的方法给暴露到监听器上去

package com.npi.blureffect;

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

public class CustomScrollView extends ScrollView {
private ScrollViewListener scrollViewListener;
public CustomScrollView(Context context) {
super(context);
// TODO Auto-generated constructor stub
}

public interface ScrollViewListener {

void onScrollChanged(CustomScrollView scrollView, int x, int y, int oldx, int oldy);

}
public CustomScrollView(Context context, AttributeSet attrs,
int defStyle) {
super(context, attrs, defStyle);
}

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

public void setScrollViewListener(ScrollViewListener scrollViewListener) {
this.scrollViewListener = scrollViewListener;
}

@Override
protected void onScrollChanged(int x, int y, int oldx, int oldy) {
super.onScrollChanged(x, y, oldx, oldy);
if (scrollViewListener != null) {
scrollViewListener.onScrollChanged(this, x, y, oldx, oldy);
}
//	        Log.i("Alex", "$$$x是:"+x+" oldx是:"+oldx+"  Y是"+y+"oldY是"+oldy);
}

}

然后是最主要的activity

package com.npi.blureffect;

import java.io.FileNotFoundException;
import java.io.FileOutputStream;
import java.io.IOException;

import com.npi.blureffect.CustomScrollView.ScrollViewListener;

import android.app.Activity;
import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Matrix;
import android.os.Bundle;
import android.util.Log;
import android.view.Menu;
import android.view.MenuItem;
import android.view.MotionEvent;
import android.view.View;
import android.view.View.OnTouchListener;
import android.widget.ScrollView;

public class ScrollViewActivity extends Activity {

ScrollableImageView header;
CustomScrollView scrollView ;
Bitmap screen;
<span style="white-space:pre">	</span>@Override
<span style="white-space:pre">	</span>protected void onCreate(Bundle savedInstanceState) {
<span style="white-space:pre">	</span>super.onCreate(savedInstanceState);
<span style="white-space:pre">	</span>setContentView(R.layout.activity_scroll_view);
<span style="white-space:pre">	</span>header = (ScrollableImageView) findViewById(R.id.blurred_image_header);
<span style="white-space:pre">	</span>scrollView = (CustomScrollView) findViewById(R.id.scrollView1);
<span style="white-space:pre">	</span>initScrollView(header, scrollView);

}
<span style="white-space:pre">	</span>public void  initScrollView(final ScrollableImageView header,final CustomScrollView scrollView){
<span style="white-space:pre">	</span>scrollView.setScrollViewListener(new ScrollViewListener() {
<span style="white-space:pre">	</span>
<span style="white-space:pre">	</span>@Override
<span style="white-space:pre">	</span>public void onScrollChanged(CustomScrollView scrollView, int x, int y,
<span style="white-space:pre">	</span>int oldx, int oldy) {
<span style="white-space:pre">	</span>// TODO Auto-generated method stub
<span style="white-space:pre">	</span>Log.i("Alex", "x是:"+x+" oldx是:"+oldx+"  Y是"+y+"oldY是"+oldy);
<span style="white-space:pre">	</span>header.handleScroll(y, 0);
<span style="white-space:pre">	</span>}
<span style="white-space:pre">	</span>});

<span style="white-space:pre">	</span>scrollView.post(new Runnable() {
<span style="white-space:pre">	</span>@Override
<span style="white-space:pre">	</span>public void run() {
<span style="white-space:pre">	</span>// TODO Auto-generated method stub
<span style="white-space:pre">	</span>screen = getBitmapByView(scrollView);
<span style="white-space:pre">	</span>header.setoriginalImage(screen);
<span style="white-space:pre">	</span>}
<span style="white-space:pre">	</span>});
}

<span style="white-space:pre">	</span>/**
   * 截取scrollview的屏幕
   * **/
  public static Bitmap getBitmapByView(ScrollView scrollView) {
      int h = 0;
      Bitmap bitmap = null;
      // 获取listView实际高度
      for (int i = 0; i < scrollView.getChildCount(); i++) {
          h += scrollView.getChildAt(i).getHeight();
      }
      Log.d("Alex", "实际高度:" + h);
      Log.d("Alex", " 高度:" + scrollView.getHeight());
      // 创建对应大小的bitmap
      bitmap = Bitmap.createBitmap(scrollView.getWidth(), h,
              Bitmap.Config.ARGB_8888);
      final Canvas canvas = new Canvas(bitmap);
      scrollView.draw(canvas);
     
      return bitmap;
  }
 

}

这里用到的自定义图片控件和模糊工具类请到我之前的博客去查看