Afficher et masquer une vue avec une animation de diapositive
J'ai une LinearLayout à afficher ou à masquer avec une Animation qui pousse la présentation vers le haut ou vers le bas chaque fois que je modifie sa visibilité.
J'ai vu quelques échantillons, mais aucun ne répond à mes besoins.
J'ai créé deux fichiers XML pour les animations mais je ne sais pas comment les démarrer lorsque je change la visibilité d'une LinearLayout.
Avec la nouvelle API d'animation introduite dans Android 3.0 (Honeycomb), il est très simple de créer de telles animations.
Glisser une View par une distance:
view.animate().translationY(distance);
Vous pouvez ensuite faire glisser la View dans sa position d'origine, comme suit:
view.animate().translationY(0);
Vous pouvez également facilement combiner plusieurs animations. L’animation suivante fera glisser une View par sa hauteur et s’affichera en même temps:
// Prepare the View for the animation
view.setVisibility(View.VISIBLE);
view.setAlpha(0.0f);
// Start the animation
view.animate()
.translationY(view.getHeight())
.alpha(1.0f)
.setListener(null);
Vous pouvez ensuite faire disparaître la View et le faire revenir à sa position initiale. Nous avons également défini une AnimatorListener afin de pouvoir redéfinir la visibilité de la View sur GONE une fois l'animation terminée:
view.animate()
.translationY(0)
.alpha(0.0f)
.setListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationEnd(Animator animation) {
super.onAnimationEnd(animation);
view.setVisibility(View.GONE);
}
});
J'avais du mal à comprendre comment appliquer la réponse acceptée. J'avais besoin d'un peu plus de contexte. Maintenant que j'ai compris, voici un exemple complet:
MainActivity.Java
public class MainActivity extends AppCompatActivity {
Button myButton;
View myView;
boolean isUp;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
myView = findViewById(R.id.my_view);
myButton = findViewById(R.id.my_button);
// initialize as invisible (could also do in xml)
myView.setVisibility(View.INVISIBLE);
myButton.setText("Slide up");
isUp = false;
}
// slide the view from below itself to the current position
public void slideUp(View view){
view.setVisibility(View.VISIBLE);
TranslateAnimation animate = new TranslateAnimation(
0, // fromXDelta
0, // toXDelta
view.getHeight(), // fromYDelta
0); // toYDelta
animate.setDuration(500);
animate.setFillAfter(true);
view.startAnimation(animate);
}
// slide the view from its current position to below itself
public void slideDown(View view){
TranslateAnimation animate = new TranslateAnimation(
0, // fromXDelta
0, // toXDelta
0, // fromYDelta
view.getHeight()); // toYDelta
animate.setDuration(500);
animate.setFillAfter(true);
view.startAnimation(animate);
}
public void onSlideViewButtonClick(View view) {
if (isUp) {
slideDown(myView);
myButton.setText("Slide up");
} else {
slideUp(myView);
myButton.setText("Slide down");
}
isUp = !isUp;
}
}
activity_mail.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
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"
tools:context="com.example.slideview.MainActivity">
<Button
Android:id="@+id/my_button"
Android:layout_centerHorizontal="true"
Android:layout_marginTop="100dp"
Android:onClick="onSlideViewButtonClick"
Android:layout_width="150dp"
Android:layout_height="wrap_content"/>
<LinearLayout
Android:id="@+id/my_view"
Android:background="#a6e1aa"
Android:orientation="vertical"
Android:layout_alignParentBottom="true"
Android:layout_width="match_parent"
Android:layout_height="200dp">
</LinearLayout>
</RelativeLayout>
Remarques
- Merci à cet article pour m'avoir orienté dans la bonne direction. C'était plus utile que les autres réponses sur cette page.
- Si vous souhaitez commencer avec la vue à l'écran, ne l'initialisez pas avec
INVISIBLE. - Comme nous l’animons complètement en dehors de l’écran, il n’est pas nécessaire de le redéfinir sur
INVISIBLE. Si vous n'animez pas complètement en dehors de l'écran, vous pouvez ajouter une animation alpha et définir la visibilité avec une variableAnimatorListenerAdapter. - Documents d'animation de propriété
Solution la plus simple: définissez Android:animateLayoutChanges="true" sur le conteneur contenant vos vues.
Pour le mettre dans un certain contexte: Si vous avez une disposition comme celle ci-dessous, toutes les modifications de visibilité dans les vues de ce conteneur seront automatiquement animées.
<LinearLayout Android:id="@+id/container"
Android:layout_width="match_parent"
Android:layout_height="match_parent"
Android:animateLayoutChanges="true"
>
<Views_which_change_visibility>
</LinearLayout>
Vous trouverez plus de détails à ce sujet sur Animation des modifications de mise en page - Développeurs Android
Vous pouvez démarrer le correct Animation lorsque la visibilité de LinearLayout change en créant une nouvelle sous-classe de LinearLayout et en remplaçant setVisibility() pour démarrer Animations. Considérons quelque chose comme ceci:
public class SimpleViewAnimator extends LinearLayout
{
private Animation inAnimation;
private Animation outAnimation;
public SimpleViewAnimator(Context context)
{
super(context);
}
public void setInAnimation(Animation inAnimation)
{
this.inAnimation = inAnimation;
}
public void setOutAnimation(Animation outAnimation)
{
this.outAnimation = outAnimation;
}
@Override
public void setVisibility(int visibility)
{
if (getVisibility() != visibility)
{
if (visibility == VISIBLE)
{
if (inAnimation != null) startAnimation(inAnimation);
}
else if ((visibility == INVISIBLE) || (visibility == GONE))
{
if (outAnimation != null) startAnimation(outAnimation);
}
}
super.setVisibility(visibility);
}
}
if (filter_section.getVisibility() == View.GONE) {
filter_section.animate()
.translationY(filter_section.getHeight()).alpha(1.0f)
.setListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationStart(Animator animation) {
super.onAnimationStart(animation);
filter_section.setVisibility(View.VISIBLE);
filter_section.setAlpha(0.0f);
}
});
} else {
filter_section.animate()
.translationY(0).alpha(0.0f)
.setListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationEnd(Animator animation) {
super.onAnimationEnd(animation);
filter_section.setVisibility(View.GONE);
}
});
}
Kotlin
Basé sur Suragch 's answer , voici une manière élégante d'utiliser View extension:
fun View.slideUp(duration: Int = 500) {
visibility = View.VISIBLE
val animate = TranslateAnimation(0f, 0f, this.height.toFloat(), 0f)
animate.duration = duration.toLong()
animate.fillAfter = true
this.startAnimation(animate)
}
fun View.slideDown(duration: Int = 500) {
visibility = View.VISIBLE
val animate = TranslateAnimation(0f, 0f, 0f, this.height.toFloat())
animate.duration = duration.toLong()
animate.fillAfter = true
this.startAnimation(animate)
}
Et puis, où que vous souhaitiez l'utiliser, vous avez simplement besoin de myView.slideUp() ou myView.slideDown()
vous pouvez faire glisser de haut en bas n’importe quelle vue ou mise en page en utilisant le code ci-dessous dans l’application Android
boolean isClicked=false;
LinearLayout mLayoutTab = (LinearLayout)findViewById(R.id.linearlayout);
if(isClicked){
isClicked = false;
mLayoutTab.animate()
.translationYBy(120)
.translationY(0)
.setDuration(getResources().getInteger(Android.R.integer.config_mediumAnimTime));
}else{
isClicked = true;
mLayoutTab.animate()
.translationYBy(0)
.translationY(120)
.setDuration(getResources().getInteger(Android.R.integer.config_mediumAnimTime));
}
Utilisez cette classe:
public class ExpandCollapseExtention {
public static void expand(View view) {
view.setVisibility(View.VISIBLE);
final int widthSpec = View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED);
final int heightSpec = View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED);
view.measure(widthSpec, heightSpec);
ValueAnimator mAnimator = slideAnimator(view, 0, view.getMeasuredHeight());
mAnimator.start();
}
public static void collapse(final View view) {
int finalHeight = view.getHeight();
ValueAnimator mAnimator = slideAnimator(view, finalHeight, 0);
mAnimator.addListener(new Animator.AnimatorListener() {
@Override
public void onAnimationEnd(Animator animator) {
view.setVisibility(View.GONE);
}
@Override
public void onAnimationStart(Animator animation) {
}
@Override
public void onAnimationCancel(Animator animation) {
}
@Override
public void onAnimationRepeat(Animator animation) {
}
});
mAnimator.start();
}
private static ValueAnimator slideAnimator(final View v, int start, int end) {
ValueAnimator animator = ValueAnimator.ofInt(start, end);
animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator valueAnimator) {
int value = (Integer) valueAnimator.getAnimatedValue();
ViewGroup.LayoutParams layoutParams = v.getLayoutParams();
layoutParams.height = value;
v.setLayoutParams(layoutParams);
}
});
return animator;
}
}
Voici ma solution. Obtenez juste une référence à votre vue et appelez cette méthode:
public static void animateViewFromBottomToTop(final View view){
view.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
@Override
public void onGlobalLayout() {
view.getViewTreeObserver().removeOnGlobalLayoutListener(this);
final int TRANSLATION_Y = view.getHeight();
view.setTranslationY(TRANSLATION_Y);
view.setVisibility(View.GONE);
view.animate()
.translationYBy(-TRANSLATION_Y)
.setDuration(500)
.setStartDelay(200)
.setListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationStart(final Animator animation) {
view.setVisibility(View.VISIBLE);
}
})
.start();
}
});
}
Pas besoin de faire autre chose =)
J'ai eu un cas de coin où la hauteur de ma vue était toujours zero alors ...
import Android.animation.Animator;
import Android.animation.AnimatorListenerAdapter;
import Android.view.View;
public final class AnimationUtils {
public static void slideDown(final View view) {
view.animate()
.translationY(view.getHeight())
.alpha(0.f)
.setListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationEnd(Animator animation) {
// superfluous restoration
view.setVisibility(View.GONE);
view.setAlpha(1.f);
view.setTranslationY(0.f);
}
});
}
public static void slideUp(final View view) {
view.setVisibility(View.VISIBLE);
view.setAlpha(0.f);
if (view.getHeight() > 0) {
slideUpNow(view);
} else {
// wait till height is measured
view.post(new Runnable() {
@Override
public void run() {
slideUpNow(view);
}
});
}
}
private static void slideUpNow(final View view) {
view.setTranslationY(view.getHeight());
view.animate()
.translationY(0)
.alpha(1.f)
.setListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationEnd(Animator animation) {
view.setVisibility(View.VISIBLE);
view.setAlpha(1.f);
}
});
}
}
Vous pouvez utiliser les simples trois lignes de code pour afficher l'animation ...
//getting the hiding view by animation
mbinding.butn.setOnClickListener {
val SlideOutLeft = AnimationUtils.loadAnimation(this, R.anim.slide_out_left)
simplelayout.visibility = View.INVISIBLE
simplelayout.startAnimation(SlideOutLeft)
val SlideInRight = AnimationUtils.loadAnimation(applicationContext, R.anim.slide_in_right)
animation1.visibility = View.VISIBLE
animation1.startAnimation(SlideInRight)
}
//again unhide the view animation
mbinding.buttn.setOnClickListener {
val SlideInLeft=AnimationUtils.loadAnimation(this,R.anim.slide_in_left)
//set the layout
simplelayout.visibility=View.VISIBLE
simplelayout.startAnimation(SlideInLeft)
val SlideOutRight=AnimationUtils.loadAnimation(this,R.anim.slide_out_right)
animation1.visibility=View.INVISIBLE
animation1.startAnimation(SlideOutRight)
}
Maintenant, les animations de changement de visibilité doivent être effectuées via Transition API, disponible dans le package de support (androidx). Appelez simplement TransitionManager.beginDelayedTransition method avec Slide transition puis modifiez la visibilité de la vue.
import androidx.transition.Slide;
import androidx.transition.Transition;
import androidx.transition.TransitionManager;
private void toggle() {
View redLayout = findViewById(R.id.redLayout);
ViewGroup parent = findViewById(R.id.parent);
Transition transition = new Slide(Gravity.BOTTOM);
transition.setDuration(600);
transition.addTarget(R.id.redLayout);
TransitionManager.beginDelayedTransition(parent, transition);
redLayout.setVisibility(show ? View.VISIBLE : View.GONE);
}
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
Android:id="@+id/parent"
Android:layout_width="match_parent"
Android:layout_height="match_parent"
Android:orientation="vertical">
<Button
Android:id="@+id/btn"
Android:layout_width="wrap_content"
Android:layout_height="wrap_content"
Android:text="play" />
<LinearLayout
Android:id="@+id/redLayout"
Android:layout_width="match_parent"
Android:layout_height="400dp"
Android:background="#5f00"
Android:layout_alignParentBottom="true" />
</RelativeLayout>
Vérifiez cette réponse avec un autre exemple de transition par défaut et personnalisé.
La réponse de Suragch à Kotlin. Cela a fonctionné pour moi.
class MainActivity : AppCompatActivity() {
var isUp: Boolean = false
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
var myView: View = findViewById(R.id.my_view)
var myButton: Button = findViewById(R.id.my_button)
//Initialize as invisible
myView.visibility = View.INVISIBLE
myButton.setText("Slide up")
isUp = false
}
fun View.slideUp(duration: Int = 500){
visibility = View.VISIBLE
val animate = TranslateAnimation(0f, 0f, this.height.toFloat(), 0f)
animate.duration = duration.toLong()
animate.fillAfter = true
this.startAnimation(animate)
}
fun View.slideDown(duration: Int = 500) {
visibility = View.VISIBLE
val animate = TranslateAnimation(0f, 0f, 0f, this.height.toFloat())
animate.duration = duration.toLong()
animate.fillAfter = true
this.startAnimation(animate)
}
fun onSlideViewButtonClick(view: View){
if(isUp){
my_view.slideDown()
my_button.setText("Slide Up")
}
else{
my_view.slideUp()
my_button.setText("Slide Down")
}
isUp = !isUp
}
}