android - 模糊背景图像，如 android 中的雅虎天气应用程序

Question

我正在尝试实现与雅虎天气应用程序类似的用户界面。我可以基于此链接使用 ListView 模糊背景图像。 http://nicolaspomepuy.fr/?p=18 .在上面的 URL 中，作者使用的是 Listview onScrollListerner。但我必须使用 ScrollView 来实现该效果。在 ScrollView 中，我将有 3 个页面和 3 个 View 。在滚动第一个 View 时，我希望背景图像模糊。我编写了一个自定义 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>

Answer 1

不久前我不得不实现类似的东西 - 在我的例子中，它是一个垂直的 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 - 显示在我的类(class)的这个 fragment 中，它负责 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>