Imagen de fondo borrosa como la aplicación de tiempo de yahoo en android

Estoy tratando de implementar un tipo similar de interfaz de usuario que yahoo tiempo aplicación hizo. Soy capaz de difuminar la imagen de fondo con el listview basado en este enlace. Http://nicolaspomepuy.fr/?p=18 . En la URL anterior el autor utiliza ListView onScrollListerner. Pero tengo que implementar ese efecto usando un scrollview. Dentro de un scrollview voy a tener 3 páginas con 3 vistas. Al desplazarse por la primera vista, quiero que la imagen de fondo se vea borrosa. Escribí un scrollview personalizado que extiende Scrollview para lograr la funcionalidad onScroll Changed.

Pero no fue capaz de cambiar los valores alfa de Blured Image basado en las posiciones de desplazamiento.

Aquí estoy adjuntando mi código de ejemplo. Por favor, ayúdame a averiguarlo.

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); } 

Aquí está el archivo 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> 

Tuve que implementar algo similar no hace mucho tiempo – en mi caso fue un ScrollView vertical que, cuando se desplaza, afectaría a la falta de definición del fondo.

En primer lugar, implementé ObservableScrollView para exponer el método onScrollChanged() y también para poder establecer mi propio detector:

 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); } } 

Ahora, para lograr el efecto borroso básicamente cambio el alfa del fondo borroso ImageView – se muestra en este fragmento de mi clase que es responsable de tanto el ObservableScrollView y el 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); } 

Como puede ver, divido el y por un cierto valor simplemente no tener el desenfoque empezar de inmediato – esto depende de lo que usted necesita exactamente.

En cuanto a mi diseño XML, se ve algo así:

 <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> 

Echa un vistazo a este proyecto de ejemplo: https://github.com/MoshDev/LikeYahooWeather

FlipAndroid es un fan de Google para Android, Todo sobre Android Phones, Android Wear, Android Dev y Aplicaciones para Android Aplicaciones.