我正在尝试实现雅虎天气应用程序所做的类似UI。我可以使用listview基于此链接模糊背景图像。 http://nicolaspomepuy.fr/?p=18。在上面的URL中，作者正在使用Listview onScrollListerner。但我必须使用scrollview实现该效果。 在scrollview中，我将有3个页面，包含3个视图。在滚动第一个视图时，我希望背景图像模糊。我编写了一个自定义scrollview，它扩展了Scrollview以实现onScroll Changed功能。
但无法根据滚动位置更改模糊图像的Alpha值。
这里我附上了我的示例代码。请帮我解决一下。
public class MainActivity extends Activity implements ScrollViewListener{
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initUI();
mBlurredImage.setAlpha(alpha);
DisplayMetrics displaymetrics = new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(displaymetrics);
screenWidth = displaymetrics.widthPixels;
empty.getLayoutParams().height = (int) (displaymetrics.heightPixels * 0.6);
// Try to find the blurred image
final File blurredImage = new File(getFilesDir() + BLURRED_IMG_PATH);
if (!blurredImage.exists()) {
new Thread(new Runnable() {
@Override
public void run() {
// No image found => let's generate it!
BitmapFactory.Options options = new BitmapFactory.Options();
options.inSampleSize = 2;
Bitmap image = BitmapFactory.decodeResource(getResources(), R.drawable.image, options);
Bitmap newImg = Blur.fastblur(MainActivity.this, image, 12);
ImageUtils.storeImage(newImg, blurredImage);
runOnUiThread(new Runnable() {
@Override
public void run() {
updateView(screenWidth);
}
});
}
}).start();
} else {
// The image has been found. Let's update the view
updateView(screenWidth);
}
}
private void updateView(final int screenWidth) {
Bitmap bmpBlurred = BitmapFactory.decodeFile(getFilesDir() + BLURRED_IMG_PATH);
bmpBlurred = Bitmap.createScaledBitmap(bmpBlurred, screenWidth, (int) (bmpBlurred.getHeight()
* ((float) screenWidth) / (float) bmpBlurred.getWidth()), false);
mBlurredImage.setImageBitmap(bmpBlurred);
}
private void initUI() {
textView = (TextView) findViewById(R.id.textview);
empty = (LinearLayout) findViewById(R.id.empty);
scrollView = (ObservableScrollView) findViewById(R.id.customScrollView);
mBlurredImage = (ImageView) findViewById(R.id.blurred_image);
normalImage = (ImageView) findViewById(R.id.normal_image);
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.main, menu);
return true;
}
@Override
public void onScrollChanged(ObservableScrollView scrollView, int x, int y,
int oldx, int oldy) {
// TODO Auto-generated method stub
Log.i("Scrolling", "X from ["+oldx+"] to ["+x+"]");
Toast.makeText(this,"HI welcome ", Toast.LENGTH_SHORT).show();
alpha = (float) -textView.getTop() / (float) TOP_HEIGHT;
// // Apply a ceil
if (alpha > 1) {
alpha = 1;
}
}
}
public class ObservableScrollView extends ScrollView{
private ScrollViewListener scrollViewListener = null;
public ObservableScrollView(Context context) {
super(context);
}
public ObservableScrollView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
}
public ObservableScrollView(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);
}
}
public interface ScrollViewListener {
void onScrollChanged(ObservableScrollView scrollView, int x, int y, int oldx, int oldy);
}
这是XML文件
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<com.example.blureffect.TopCenterImageView
android:id="@+id/normal_image"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="@drawable/image" />
<com.example.blureffect.TopCenterImageView
android:id="@+id/blurred_image"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:alpha="0" />
<com.example.blureffect.ObservableScrollView
android:id="@+id/customScrollView"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:id="@+id/empty"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
/>
<TextView
android:id="@+id/textview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="It was a good track to bowl on. It had good bounce, the ball was turning sharply as well. We bowled in the right areas. When batsmen bat in partnerships the job is easy. That is the same case with bowlers. Ashwin and I have formed a good partnership. It has been a honour to play with Sachin paaji. I would like to dedicate my five-wicket haul to Sachin paaji. We were all motivated from yesterday and we want to enjoy this occasion." />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="It was a good track to bowl on. It had good bounce, the ball was turning sharply as well. We bowled in the right areas. When batsmen bat in partnerships the job is easy. That is the same case with bowlers. Ashwin and I have formed a good partnership. It has been a honour to play with Sachin paaji. I would like to dedicate my five-wicket haul to Sachin paaji. We were all motivated from yesterday and we want to enjoy this occasion." />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="It was a good track to bowl on. It had good bounce, the ball was turning sharply as well. We bowled in the right areas. When batsmen bat in partnerships the job is easy. That is the same case with bowlers. Ashwin and I have formed a good partnership. It has been a honour to play with Sachin paaji. I would like to dedicate my five-wicket haul to Sachin paaji. We were all motivated from yesterday and we want to enjoy this occasion." />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="It was a good track to bowl on. It had good bounce, the ball was turning sharply as well. We bowled in the right areas. When batsmen bat in partnerships the job is easy. That is the same case with bowlers. Ashwin and I have formed a good partnership. It has been a honour to play with Sachin paaji. I would like to dedicate my five-wicket haul to Sachin paaji. We were all motivated from yesterday and we want to enjoy this occasion." />
</LinearLayout>
</com.example.blureffect.ObservableScrollView>
</FrameLayout>
答案 0 :(得分：2)
我不得不在很久以前实现类似的东西 - 在我的例子中，它是一个垂直的ScrollView，当滚动时，会影响背景的模糊。
首先，我实现了ObservableScrollView以公开onScrollChanged()方法，并且还能够为它设置我自己的监听器：
public void setScrollViewListener(ObservableScrollViewListener 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);
}
}
现在，为了实现模糊效果，我基本上改变了模糊背景ImageView的alpha - 显示在我的类中的片段中，该类负责ObservableScrollView和ImageViews：
@Override
public void onScrollChanged(ObservableScrollView scrollView, int x, int y, int oldX, int oldY) {
//...
// Blurring
float blurredImageAlpha = (float) y / SCROLL_VIEW_INITIAL_OFFSET;
if (blurredImageAlpha > 1.0) {
blurredImageAlpha = (float) 1.0;
}
imageBackgroundBlurred.setAlpha(blurredImageAlpha);
}
正如您所看到的，我将y除以某个值只是为了不让模糊立即开始 - 这取决于您的确切需要。
至于我的XML布局，它看起来像这样：
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/aboutMainView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@android:color/black"
android:padding="0dp" >
<ImageView
android:id="@+id/aboutImageBackground"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:contentDescription="@null"
android:scaleType="centerCrop"
android:src="@drawable/about_back_a" />
<ImageView
android:id="@+id/aboutImageBackgroundBlurred"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:alpha="0.0"
android:contentDescription="@null"
android:scaleType="centerCrop"
android:src="@drawable/about_back_b" />
<com.bronzelabs.maa.widgets.ObservableScrollView
android:id="@+id/aboutObservableScrollView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@android:color/transparent"
android:orientation="vertical" />
</RelativeLayout>
答案 1 :(得分：0)