Cómo animar una diapositiva en la vista de notificación que empuja hacia abajo la vista de contenido

Tengo dos vistas en la pantalla

uno se sienta en la parte superior de la pantalla y se sienta directamente debajo de él

Necesito la vista verde para deslizar la parte superior y hacer que la vista azul ocupe toda la pantalla como resultado

enter image description here

esto es lo que trato de hacer:

– el problema es que, cuando la animación finaliza, la vista azul simplemente “salta” hacia arriba, y quiero que disminuya con la desaparición de la vista verde, ¿cómo hago eso?

slide_in_animation.xml

    

slide_out_animation.xml

     

MainActivity.java

 slideInAnimation = AnimationUtils.loadAnimation(mActivity, R.anim.slide_in_animation); slideOutAnimation = AnimationUtils.loadAnimation(mActivity,R.anim.slide_out_animation); slideInAnimation.setAnimationListener(new AnimationListener() { @Override public void onAnimationStart(Animation animation) { mGreenView.setVisibility(View.VISIBLE); } @Override public void onAnimationRepeat(Animation animation) { // TODO Auto-generated method stub } @Override public void onAnimationEnd(Animation animation) { } }); slideOutAnimation.setAnimationListener(new AnimationListener() { @Override public void onAnimationStart(Animation animation) { } @Override public void onAnimationEnd(Animation animation) { mGreenView.setVisibility(View.GONE); } @Override public void onAnimationRepeat(Animation animation) { // To change body of implemented methods use File | Settings // | File Templates. } }); 

Esto funcionó para mí

Sin notificaciónNotificación de animaciónNotificación visibleNotificación de animaciónSin notificación

Primero debe importar esta biblioteca: http://nineoldandroids.com/

La importación se realiza mediante la importación de proyectos Android existentes en su espacio de trabajo, luego haga clic con el botón secundario en su Poject -> Propiedades -> Android. Aquí verá una sección de biblioteca, haga clic en el botón Agregar y agregue la biblioteca nineoldandroids.

Primero, aquí está el xml de diseño utilizado para que esto funcione:

          

Aviso: tanto el ListView como la Vista verde podrían ser diseños de cualquier tipo con cualquier tipo de contenido.

Y luego una prueba de concepto Actividad.

 public class TestActivity extends Activity { private View greenView; private ListView listView; private int greenHeight; private boolean isShowingBox; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_test); // The animated view greenView = (View)findViewById(R.id.greenView); listView = (ListView)findViewById(R.id.listView1); // Instanciating an array list (you don't need to do this, you already have yours) ArrayList your_array_list = new ArrayList(); your_array_list.add("1"); your_array_list.add("2"); your_array_list.add("3"); your_array_list.add("4"); your_array_list.add("5"); your_array_list.add("6"); your_array_list.add("7"); your_array_list.add("8"); your_array_list.add("9"); your_array_list.add("10"); your_array_list.add("11"); your_array_list.add("12"); your_array_list.add("13"); your_array_list.add("14"); your_array_list.add("15"); // This is the array adapter, it takes the context of the activity as a first // parameter, the type of list view as a second parameter and your array as a third parameter ArrayAdapter arrayAdapter = new ArrayAdapter(this,android.R.layout.simple_list_item_1, your_array_list); listView.setAdapter(arrayAdapter); final LinearLayout layout = (LinearLayout)findViewById(R.id.parentLayout); final ViewTreeObserver vto = layout.getViewTreeObserver(); vto.addOnGlobalLayoutListener(new OnGlobalLayoutListener() { @Override public void onGlobalLayout() { if (Build.VERSION.SDK_INT < 16) { layout.getViewTreeObserver().removeGlobalOnLayoutListener(this); } else { layout.getViewTreeObserver().removeOnGlobalLayoutListener(this); } greenHeight = greenView.getHeight(); } }); } public void clickHandler(View v) { if (isShowingBox) { isShowingBox = false; slideOut(1500, 0); } else { isShowingBox = true; slideIn(1500, 0); } } private void slideIn(int duration, int delay) { AnimatorSet set = new AnimatorSet(); set.playTogether( // animate from off-screen in to screen ObjectAnimator.ofFloat(greenView, "translationY", -greenHeight, 0), ObjectAnimator.ofFloat(listView, "translationY", 0, greenHeight), ObjectAnimator.ofFloat(greenView, "alpha", 0, 0.25f, 1) // add other animations if you wish ); set.setStartDelay(delay); set.setDuration(duration).start(); } private void slideOut(int duration, int delay) { AnimatorSet set = new AnimatorSet(); set.playTogether( // animate from on-screen and out ObjectAnimator.ofFloat(greenView, "translationY", 0, -greenHeight), ObjectAnimator.ofFloat(listView, "translationY", greenHeight, 0), ObjectAnimator.ofFloat(greenView, "alpha", 1, 1, 1) // add other animations if you wish ); set.setStartDelay(delay); set.setDuration(duration).start(); } } 

Nota importante: ¡ Recuerde importar AnimatorSet y ObjectAnimator de nineoldandroids en su clase y no los de Android SDK!

Una posible solución que hace que una salida sea agradable y fluida es usar el atributo de peso de LinearLayout con un ValueAnimator. Suponiendo que está utilizando LinearLayout como vista principal para sus bloques verde y azul, su código se vería así.

layout.xml

      

Ahora con esto, en su código puede usar ValueAnimator de la siguiente manera:

 public class MainActivity extends Activity implements AnimatorUpdateListener { View view1; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); view1 = (View)findViewById(R.id.view1); } public void someAction() { //This is the important part, because it is FROM the first value TO //the second. Notice that it must be a float type ValueAnimator anim = ValueAnimator.ofFloat(1f, 0f); anim.setDuration(200); anim.addUpdateListener(this); anim.start(); } @Override public void onAnimationUpdate(ValueAnimator animation) { view1.setLayoutParams(new LinearLayout.LayoutParams(0, LayoutParams.MATCH_PARENT, (Float) animation.getAnimatedValue())); } } 

El ValueAnimator calculará automáticamente los incrementos y los ejecutará para obtener la transición suave que desea con el beneficio adicional de mantener su vista en funcionamiento.

También es posible que deba manejar algunas extrañas instancias de IU como resultado de la reducción de la vista (es decir, TextViews puede actuar de forma divertida en la transición), pero no tuve demasiados problemas para parcharlas y mantenerlas ordenadas.

¡Buena suerte! Espero que esto ayude.

Usa el siguiente código

 < ?xml version="1.0" encoding="utf-8"?>