pantallas - resoluciones de pantalla android studio
Deslice un diseño desde la parte inferior de la pantalla (9)
Tengo un diseño oculto de la vista. En un botón, haga clic en Quiero que se deslice desde la parte inferior empujando hacia arriba el contenido de la pantalla completa, muy similar a cómo WhatsApp muestra el panel de emoticones en la pantalla de chat.
He visto SlidingDrawer, eso no funciona para mí. Requiere una imagen como asa que se muestra en el centro de la pantalla, no quiero eso. También se desliza sobre el contenido de la pantalla existente, estoy buscando una forma de mover el contenido existente hacia arriba.
Actualización 1:
Intenté usar las animaciones según lo sugerido por Sanket Kachhela. Pero el diseño oculto nunca se muestra. Aquí está el código.
Diseño (activity_main.xml):
<RelativeLayout
android:id="@+id/main_screen"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/hello_world"
android:layout_alignParentTop="true"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/hello_world"
android:layout_centerInParent="true"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Slide up / down"
android:layout_alignParentBottom="true"
android:onClick="slideUpDown"/>
</RelativeLayout>
<RelativeLayout
android:id="@+id/hidden_panel"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@id/main_screen">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/app_name" />
</RelativeLayout>
Actividad (MainActivity.java):
package com.example.slideuplayout;
import android.app.Activity;
import android.os.Bundle;
import android.view.Menu;
import android.view.View;
import android.view.ViewGroup;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
public class MainActivity extends Activity {
private ViewGroup hiddenPanel;
private boolean isPanelShown;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
hiddenPanel = (ViewGroup)findViewById(R.id.hidden_panel);
hiddenPanel.setVisibility(View.INVISIBLE);
isPanelShown = false;
}
@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;
}
public void slideUpDown(final View view) {
if(!isPanelShown) {
// Show the panel
Animation bottomUp = AnimationUtils.loadAnimation(this,
R.anim.bottom_up);
hiddenPanel.startAnimation(bottomUp);
hiddenPanel.setVisibility(View.VISIBLE);
isPanelShown = true;
}
else {
// Hide the Panel
Animation bottomDown = AnimationUtils.loadAnimation(this,
R.anim.bottom_down);
hiddenPanel.startAnimation(bottomDown);
hiddenPanel.setVisibility(View.INVISIBLE);
isPanelShown = false;
}
}
}
Animaciones:
bottom_up.xml:
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate
android:fromYDelta="75%p"
android:toYDelta="0%p"
android:fillAfter="true"
android:duration="500" />
</set>
bottom_down.xml:
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate
android:fromYDelta="0%p"
android:toYDelta="100%p"
android:fillAfter="true"
android:interpolator="@android:anim/linear_interpolator"
android:duration="500" />
</set>
¿Alguna idea de cómo se puede hacer esto?
Gracias.
Aquí es lo que funcionó al final para mí.
Diseños:
activity_main.xml
<RelativeLayout
android:id="@+id/main_screen"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentTop="true"
android:layout_alignParentBottom="true">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/hello_world"
android:layout_alignParentTop="true"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/hello_world"
android:layout_centerInParent="true" />
<Button
android:id="@+id/slideButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Slide up / down"
android:layout_alignParentBottom="true"
android:onClick="slideUpDown"/>
</RelativeLayout>
hidden_panel.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/hidden_panel"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Test" />
</LinearLayout>
Java: paquete com.example.slideuplayout;
import android.app.Activity;
import android.os.Bundle;
import android.view.Menu;
import android.view.View;
import android.view.ViewGroup;
import android.view.ViewTreeObserver;
import android.view.ViewTreeObserver.OnGlobalLayoutListener;
import android.view.animation.Animation;
import android.view.animation.Animation.AnimationListener;
import android.view.animation.AnimationUtils;
public class MainActivity extends Activity {
private ViewGroup hiddenPanel;
private ViewGroup mainScreen;
private boolean isPanelShown;
private ViewGroup root;
int screenHeight = 0;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mainScreen = (ViewGroup)findViewById(R.id.main_screen);
ViewTreeObserver vto = mainScreen.getViewTreeObserver();
vto.addOnGlobalLayoutListener(new OnGlobalLayoutListener() {
@Override
public void onGlobalLayout() {
screenHeight = mainScreen.getHeight();
mainScreen.getViewTreeObserver().removeGlobalOnLayoutListener(this);
}
});
root = (ViewGroup)findViewById(R.id.root);
hiddenPanel = (ViewGroup)getLayoutInflater().inflate(R.layout.hidden_panel, root, false);
hiddenPanel.setVisibility(View.INVISIBLE);
root.addView(hiddenPanel);
isPanelShown = false;
}
@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;
}
public void slideUpDown(final View view) {
if(!isPanelShown) {
// Show the panel
mainScreen.layout(mainScreen.getLeft(),
mainScreen.getTop() - (screenHeight * 25/100),
mainScreen.getRight(),
mainScreen.getBottom() - (screenHeight * 25/100));
hiddenPanel.layout(mainScreen.getLeft(), mainScreen.getBottom(), mainScreen.getRight(), screenHeight);
hiddenPanel.setVisibility(View.VISIBLE);
Animation bottomUp = AnimationUtils.loadAnimation(this,
R.anim.bottom_up);
hiddenPanel.startAnimation(bottomUp);
isPanelShown = true;
}
else {
isPanelShown = false;
// Hide the Panel
Animation bottomDown = AnimationUtils.loadAnimation(this,
R.anim.bottom_down);
bottomDown.setAnimationListener(new AnimationListener() {
@Override
public void onAnimationStart(Animation arg0) {
// TODO Auto-generated method stub
}
@Override
public void onAnimationRepeat(Animation arg0) {
// TODO Auto-generated method stub
}
@Override
public void onAnimationEnd(Animation arg0) {
isPanelShown = false;
mainScreen.layout(mainScreen.getLeft(),
mainScreen.getTop() + (screenHeight * 25/100),
mainScreen.getRight(),
mainScreen.getBottom() + (screenHeight * 25/100));
hiddenPanel.layout(mainScreen.getLeft(), mainScreen.getBottom(), mainScreen.getRight(), screenHeight);
}
});
hiddenPanel.startAnimation(bottomDown);
}
}
}
Estabas cerca. La clave es hacer que el diseño oculto se infle para match_parent
tanto en altura como en peso. Simplemente comienza como View.GONE
. De esta forma, usar el porcentaje en los animadores funciona correctamente.
Diseño (activity_main.xml):
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/main_screen"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:text="@string/hello_world" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="@string/hello_world" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:onClick="slideUpDown"
android:text="Slide up / down" />
<RelativeLayout
android:id="@+id/hidden_panel"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@android:color/white"
android:visibility="gone" >
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/app_name"
android:layout_centerInParent="true"
android:onClick="slideUpDown" />
</RelativeLayout>
</RelativeLayout>
Actividad (MainActivity.java):
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.ViewGroup;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
public class OffscreenActivity extends Activity {
private View hiddenPanel;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main_activity);
hiddenPanel = findViewById(R.id.hidden_panel);
}
public void slideUpDown(final View view) {
if (!isPanelShown()) {
// Show the panel
Animation bottomUp = AnimationUtils.loadAnimation(this,
R.anim.bottom_up);
hiddenPanel.startAnimation(bottomUp);
hiddenPanel.setVisibility(View.VISIBLE);
}
else {
// Hide the Panel
Animation bottomDown = AnimationUtils.loadAnimation(this,
R.anim.bottom_down);
hiddenPanel.startAnimation(bottomDown);
hiddenPanel.setVisibility(View.GONE);
}
}
private boolean isPanelShown() {
return hiddenPanel.getVisibility() == View.VISIBLE;
}
}
Solo otra cosa que cambié estaba en bottom_up.xml
. En lugar de
android:fromYDelta="75%p"
Solía:
android:fromYDelta="100%p"
Pero eso es una cuestión de preferencia, supongo.
Mi código para hacer que la animación se deslice hacia arriba, deslice hacia abajo sin XML
private static ObjectAnimator createBottomUpAnimation(View view,
AnimatorListenerAdapter listener, float distance) {
ObjectAnimator animator = ObjectAnimator.ofFloat(view, "translationY", -distance);
// animator.setDuration(???)
animator.removeAllListeners();
if (listener != null) {
animator.addListener(listener);
}
return animator;
}
public static ObjectAnimator createTopDownAnimation(View view, AnimatorListenerAdapter listener,
float distance) {
view.setTranslationY(-distance);
ObjectAnimator animator = ObjectAnimator.ofFloat(view, "translationY", 0);
animator.removeAllListeners();
if (listener != null) {
animator.addListener(listener);
}
return animator;
}
Usar para deslizar hacia abajo
createTopDownAnimation(myYellowView, null, myYellowView.getHeight()).start();
Para deslizarse hacia arriba
createBottomUpAnimation(myYellowView, null, myYellowView.getHeight()).start();
Ok, hay dos enfoques posibles. El más simple es usar una biblioteca de menú deslizante . Permite crear un menú deslizante inferior, puede animar el contenedor superior para hacer que el fondo sea visible, permite arrastrarlo con el dedo o animarlo programáticamente mediante el botón (StaticDrawer).
Una forma más difícil: si desea usar Animaciones, como ya se sugirió. Con las animaciones, primero debe cambiar sus diseños. Intenta primero hacer que tu diseño cambie al estado final sin animaciones de ningún tipo. Debido a que es muy probable que no esté exponiendo correctamente sus vistas en RelativeLayout, aunque muestre su vista inferior, permanece oculta por la superior. Una vez que haya logrado el cambio de diseño adecuado, todo lo que debe hacer es recordar las traducciones antes del diseño y aplicar la animación de traducir DESPUÉS del diseño.
Pruebe este código a continuación, es muy corto y simple.
transalate_anim.xml
<?xml version="1.0" encoding="utf-8"?><!-- Copyright (C) 2013 The Android Open Source Project
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate
android:duration="4000"
android:fromXDelta="0"
android:fromYDelta="0"
android:repeatCount="infinite"
android:toXDelta="0"
android:toYDelta="-90%p" />
<alpha xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="4000"
android:fromAlpha="0.0"
android:repeatCount="infinite"
android:toAlpha="1.0" />
</set>
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.naveen.congratulations.MainActivity">
<ImageView
android:id="@+id/image_1"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginBottom="8dp"
android:layout_marginStart="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:srcCompat="@drawable/balloons" />
</android.support.constraint.ConstraintLayout>
MainActivity.java
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
final ImageView imageView1 = (ImageView) findViewById(R.id.image_1);
imageView1.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
startBottomToTopAnimation(imageView1);
}
});
}
private void startBottomToTopAnimation(View view) {
view.startAnimation(AnimationUtils.loadAnimation(this, R.anim.translate_anim));
}
}
Puede definir la pantalla principal y la otra pantalla que desea desplazar hacia arriba como fragmentos. Cuando se presiona el botón en la pantalla principal, el fragmento enviará un mensaje a la actividad que luego reemplazaría la pantalla principal con la que desea desplazarse hacia arriba y animar el reemplazo.
Solo necesita agregar algo de línea en su aplicación, por favor, busque en el siguiente enlace:
Mostrar y ocultar una vista con una animación deslizante arriba / abajo
Simplemente agregue una animación a su diseño de esta manera:
mLayoutTab.animate()
.translationYBy(120)
.translationY(0)
.setDuration(getResources().getInteger(android.R.integer.config_mediumAnimTime));
Usa este diseño Si desea animar la vista principal disminuyendo, deberá agregar animación a la altura de la barra oculta, comprarla puede ser lo suficientemente buena para usar la animación de traducción en la barra y hacer saltar la altura de la vista principal en lugar de animar.
<LinearLayout 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"
android:orientation="vertical" >
<RelativeLayout
android:id="@+id/main_screen"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:text="@string/hello_world" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="@string/hello_world" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:onClick="slideUpDown"
android:text="Slide up / down" />
</RelativeLayout>
<RelativeLayout
android:id="@+id/hidden_panel"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:background="#fcc"
android:visibility="visible" >
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/app_name" />
</RelativeLayout>
</LinearLayout>
Use estas animaciones:
bottom_up.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate android:fromYDelta="75%p" android:toYDelta="0%p"
android:fillAfter="true"
android:duration="500"/>
</set>
bottom_down.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate android:fromYDelta="0%p" android:toYDelta="100%p" android:fillAfter="true"
android:interpolator="@android:anim/linear_interpolator"
android:duration="500" />
</set>
Use este código en su actividad para ocultar / animar su vista:
Animation bottomUp = AnimationUtils.loadAnimation(getContext(),
R.anim.bottom_up);
ViewGroup hiddenPanel = (ViewGroup)findViewById(R.id.hidden_panel);
hiddenPanel.startAnimation(bottomUp);
hiddenPanel.setVisibility(View.VISIBLE);