web-dev-qa-db-fra.com

Animations de présentation Android de bas en haut et de haut en bas sur ImageView, cliquez sur

J'ai créé une vue dans Android et je dois l'animer de bas en haut et inversement. Lorsque j'ai cliqué sur ImageView, je dois animer la RelativeLayout complète de bas en haut et le processus a abouti. Mais lorsque je clique à nouveau sur ImageView et que cela ne diminue pas. En outre, lorsque je clique sur son emplacement d'origine, lorsque je clique sur son emplacement d'origine de l'animation ImageView, celle-ci s'exécute mais que RelativeLayout descend de la position d'origine et non d'un sommet à l'autre.

Ceci est mon code:

ImageView iv_header;

RelativeLayout rl_footer;

boolean isBottom = true;

@Override
protected void onCreate(Bundle savedInstanceState) {
    // TODO Auto-generated method stub
    super.onCreate(savedInstanceState);
    setContentView(R.layout.rateus_layout);
    rl_footer = (RelativeLayout) findViewById(R.id.rl_footer);
    iv_header = (ImageView) findViewById(R.id.iv_up_arrow);

    iv_header.setOnClickListener(new OnClickListener() {

        @Override
        public void onClick(View v) {
            // TODO Auto-generated method stub
            if (isBottom) {
                FooterAnimation();
                isBottom = false;
            } else {
                headerAnimation();
                isBottom = true;
            }

        }
    });
}

public void FooterAnimation() {
    Animation hide = AnimationUtils.loadAnimation(this, R.anim.move);
    rl_footer.startAnimation(hide);
}

public void headerAnimation() {
    Animation hide = AnimationUtils.loadAnimation(this, R.anim.footer);
    rl_footer.startAnimation(hide);
}

Le fichier d'animation de bas en haut (la mise en page relative complète est déplacée de bas en haut):

<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:Android="http://schemas.Android.com/apk/res/Android"
Android:duration="1500"
Android:fillAfter="true"
Android:fromYDelta="0%p"
Android:toYDelta="-85%p" />

Le fichier d'animation de haut en bas (je veux à nouveau la disposition relative est déplacé de haut en bas):

<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:Android="http://schemas.Android.com/apk/res/Android"
Android:duration="1500"
Android:fillAfter="true"
Android:fromYDelta="0%p"
Android:toYDelta="84%p" />

Le fichier XML:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
Android:id="@+id/rl_main"
Android:layout_width="match_parent"
Android:layout_height="match_parent"
Android:background="@drawable/autograph_bg" >

<RelativeLayout
    Android:id="@+id/rl_footer"
    Android:layout_width="fill_parent"
    Android:layout_height="70dp"
    Android:layout_alignParentBottom="true"
    Android:background="@drawable/down_manu_bar1" >

    <ImageView
        Android:id="@+id/iv_new_file"
        Android:layout_width="25dp"
        Android:layout_height="25dp"
        Android:layout_alignParentLeft="true"
        Android:layout_centerVertical="true"
        Android:layout_marginLeft="18dp"
        Android:onClick="onNewFileClick"
        Android:src="@drawable/file_icon" />

    <TextView
        Android:id="@+id/tv_new_file"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:layout_alignLeft="@+id/iv_new_file"
        Android:layout_below="@+id/iv_new_file"
        Android:text="New"
        Android:textColor="#ffffff" />

    <ImageView
        Android:id="@+id/iv_insert"
        Android:layout_width="25dp"
        Android:layout_height="25dp"
        Android:layout_alignTop="@+id/iv_new_file"
        Android:layout_marginLeft="30dp"
        Android:layout_toRightOf="@+id/iv_new_file"
        Android:src="@drawable/insert_icon" />

    <TextView
        Android:id="@+id/tv_insert"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:layout_alignLeft="@+id/iv_insert"
        Android:layout_below="@+id/iv_insert"
        Android:text="Insert"
        Android:textColor="#ffffff" />

    <ImageView
        Android:id="@+id/iv_up_arrow"
        Android:layout_width="45dp"
        Android:layout_height="45dp"
        Android:layout_centerHorizontal="true"
        Android:layout_centerVertical="true"
        Android:paddingBottom="10dp"
        Android:src="@drawable/up_arrow" />

    <ImageView
        Android:id="@+id/iv_down_arrow"
        Android:layout_width="45dp"
        Android:layout_height="45dp"
        Android:layout_centerHorizontal="true"
        Android:layout_centerVertical="true"
        Android:background="@drawable/down_arrow"
        Android:paddingBottom="10dp"
        Android:visibility="gone" />

    <ImageView
        Android:id="@+id/iv_save"
        Android:layout_width="25dp"
        Android:layout_height="25dp"
        Android:layout_alignTop="@+id/iv_insert"
        Android:layout_marginLeft="30dp"
        Android:layout_toRightOf="@+id/iv_up_arrow"
        Android:src="@drawable/save" />

    <TextView
        Android:id="@+id/tv_save"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:layout_alignLeft="@+id/iv_save"
        Android:layout_alignParentBottom="true"
        Android:text="Save"
        Android:textColor="#ffffff" />

    <ImageView
        Android:id="@+id/iv_settings"
        Android:layout_width="25dp"
        Android:layout_height="25dp"
        Android:layout_alignTop="@+id/iv_save"
        Android:layout_marginLeft="27dp"
        Android:layout_toRightOf="@+id/tv_save"
        Android:paddingTop="2dp"
        Android:src="@drawable/icon_settings" />

    <TextView
        Android:id="@+id/tv_settings"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:layout_alignParentBottom="true"
        Android:layout_marginLeft="260dp"
        Android:text="Settings"
        Android:textColor="#ffffff" />
  </RelativeLayout>
 </RelativeLayout>
26
Farhan Shah

J'ai résolu mon problème et maintenant mon animation fonctionne bien:) Si quelqu'un a besoin de copier simplement mon code et mon fichier XML et avoir un codage heureux :)

Mon activité MainActivity:

import Android.os.Bundle;
import Android.app.Activity;
import Android.content.Intent;
import Android.view.Menu;
import Android.view.View;
import Android.view.View.OnClickListener;
import Android.view.animation.Animation;
import Android.view.animation.Animation.AnimationListener;
import Android.view.animation.AnimationUtils;
import Android.view.animation.TranslateAnimation;
import Android.widget.Button;
import Android.widget.ImageView;
import Android.widget.RelativeLayout;

public class MainActivity extends Activity {

RelativeLayout rl_footer;
ImageView iv_header;
boolean isBottom = true;
Button btn1;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    rl_footer = (RelativeLayout) findViewById(R.id.rl_footer);
    iv_header = (ImageView) findViewById(R.id.iv_up_arrow);
    iv_header.setOnClickListener(new OnClickListener() {

        @Override
        public void onClick(View v) {
            // TODO Auto-generated method stub
            iv_header.setImageResource(R.drawable.down_arrow);
            iv_header.setPadding(0, 10, 0, 0); 
            rl_footer.setBackgroundResource(R.drawable.up_manu_bar);
            if (isBottom) {
                SlideToAbove();
                isBottom = false;
            } else {
                iv_header.setImageResource(R.drawable.up_arrow);
                iv_header.setPadding(0, 0, 0, 10);
                rl_footer.setBackgroundResource(R.drawable.down_manu_bar1);
                SlideToDown();
                isBottom = true;
            }

        }
    });

}

public void SlideToAbove() {
    Animation slide = null;
    slide = new TranslateAnimation(Animation.RELATIVE_TO_SELF, 0.0f,
            Animation.RELATIVE_TO_SELF, 0.0f, Animation.RELATIVE_TO_SELF,
            0.0f, Animation.RELATIVE_TO_SELF, -5.0f);

    slide.setDuration(400);
    slide.setFillAfter(true);
    slide.setFillEnabled(true);
    rl_footer.startAnimation(slide);

    slide.setAnimationListener(new AnimationListener() {

        @Override
        public void onAnimationStart(Animation animation) {

        }

        @Override
        public void onAnimationRepeat(Animation animation) {
        }

        @Override
        public void onAnimationEnd(Animation animation) {

            rl_footer.clearAnimation();

            RelativeLayout.LayoutParams lp = new RelativeLayout.LayoutParams(
                    rl_footer.getWidth(), rl_footer.getHeight());
            // lp.setMargins(0, 0, 0, 0);
            lp.addRule(RelativeLayout.ALIGN_PARENT_TOP);
            rl_footer.setLayoutParams(lp);

        }

    });

}

public void SlideToDown() {
    Animation slide = null;
    slide = new TranslateAnimation(Animation.RELATIVE_TO_SELF, 0.0f,
            Animation.RELATIVE_TO_SELF, 0.0f, Animation.RELATIVE_TO_SELF,
            0.0f, Animation.RELATIVE_TO_SELF, 5.2f);

    slide.setDuration(400);
    slide.setFillAfter(true);
    slide.setFillEnabled(true);
    rl_footer.startAnimation(slide);

    slide.setAnimationListener(new AnimationListener() {

        @Override
        public void onAnimationStart(Animation animation) {

        }

        @Override
        public void onAnimationRepeat(Animation animation) {
        }

        @Override
        public void onAnimationEnd(Animation animation) {

            rl_footer.clearAnimation();

            RelativeLayout.LayoutParams lp = new RelativeLayout.LayoutParams(
                    rl_footer.getWidth(), rl_footer.getHeight());
            lp.setMargins(0, rl_footer.getWidth(), 0, 0);
            lp.addRule(RelativeLayout.ALIGN_PARENT_BOTTOM);
            rl_footer.setLayoutParams(lp);

        }

    });

}

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

 }

et mon activité XML_main:

 <?xml version="1.0" encoding="utf-8"?>
 <RelativeLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
  Android:id="@+id/rl_main"
  Android:layout_width="match_parent"
  Android:layout_height="match_parent"
  Android:background="@drawable/autograph_bg" >

 <RelativeLayout
    Android:id="@+id/rl_footer"
    Android:layout_width="fill_parent"
    Android:layout_height="70dp"
    Android:layout_alignParentBottom="true"
    Android:background="@drawable/down_manu_bar1" >

    <ImageView
        Android:id="@+id/iv_new_file"
        Android:layout_width="25dp"
        Android:layout_height="25dp"
        Android:layout_alignParentLeft="true"
        Android:layout_centerVertical="true"
        Android:layout_marginLeft="18dp"
        Android:onClick="onNewFileClick"
        Android:src="@drawable/file_icon" />

    <TextView
        Android:id="@+id/tv_new_file"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:layout_alignLeft="@+id/iv_new_file"
        Android:layout_below="@+id/iv_new_file"
        Android:text="New"
        Android:textColor="#ffffff" />

    <ImageView
        Android:id="@+id/iv_insert"
        Android:layout_width="25dp"
        Android:layout_height="25dp"
        Android:layout_alignTop="@+id/iv_new_file"
        Android:layout_marginLeft="30dp"
        Android:layout_toRightOf="@+id/iv_new_file"
        Android:src="@drawable/insert_icon" />

    <TextView
        Android:id="@+id/tv_insert"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:layout_alignLeft="@+id/iv_insert"
        Android:layout_below="@+id/iv_insert"
        Android:text="Insert"
        Android:textColor="#ffffff" />

    <ImageView
        Android:id="@+id/iv_up_arrow"
        Android:layout_width="45dp"
        Android:layout_height="45dp"
        Android:layout_centerHorizontal="true"
        Android:layout_centerVertical="true"
        Android:paddingBottom="10dp"
        Android:src="@drawable/up_arrow" />

    <ImageView
        Android:id="@+id/iv_down_arrow"
        Android:layout_width="45dp"
        Android:layout_height="45dp"
        Android:layout_centerHorizontal="true"
        Android:layout_centerVertical="true"
        Android:background="@drawable/down_arrow"
        Android:paddingBottom="10dp"
        Android:visibility="gone" />

    <ImageView
        Android:id="@+id/iv_save"
        Android:layout_width="25dp"
        Android:layout_height="25dp"
        Android:layout_alignTop="@+id/iv_insert"
        Android:layout_marginLeft="30dp"
        Android:layout_toRightOf="@+id/iv_up_arrow"
        Android:src="@drawable/save" />

    <TextView
        Android:id="@+id/tv_save"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:layout_alignLeft="@+id/iv_save"
        Android:layout_alignParentBottom="true"
        Android:text="Save"
        Android:textColor="#ffffff" />

    <ImageView
        Android:id="@+id/iv_settings"
        Android:layout_width="25dp"
        Android:layout_height="25dp"
        Android:layout_alignTop="@+id/iv_save"
        Android:layout_marginLeft="27dp"
        Android:layout_toRightOf="@+id/tv_save"
        Android:paddingTop="2dp"
        Android:src="@drawable/icon_settings" />

    <TextView
        Android:id="@+id/tv_settings"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:layout_alignParentBottom="true"
        Android:layout_marginLeft="260dp"
        Android:text="Settings"
        Android:textColor="#ffffff" />
 </RelativeLayout>

 </RelativeLayout>

créez simplement un nouveau projet Android et copiez-collez mon code et amusez-vous! :) Souvenez-vous aussi en xml que j’ai une vue d’image et que ses images d’arrière-plan remplacent vos propres images grâce à.

21
Farhan Shah

Essaye ça :

Créez le dossier anim dans votre dossier res et copiez ces quatre fichiers:

slide_in_bottom.xml:

<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:Android="http://schemas.Android.com/apk/res/Android"
Android:fromYDelta="100%p"
Android:duration="@Android:integer/config_longAnimTime"/>  

slide_out_bottom.xml:

<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:Android="http://schemas.Android.com/apk/res/Android"
Android:fromYDelta="0" 
Android:duration="@Android:integer/config_longAnimTime" /> 

slide_in_top.xml:

<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:Android="http://schemas.Android.com/apk/res/Android"
 Android:toYDelta="0%p"
Android:duration="@Android:integer/config_longAnimTime" />

slide_out_top.xml:

<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:Android="http://schemas.Android.com/apk/res/Android"
Android:toYDelta="100%p"
Android:duration="@Android:integer/config_longAnimTime" />

Lorsque vous cliquez sur l'appel de vue d'image:

overridePendingTransition(R.anim.slide_in_bottom, R.anim.slide_out_bottom);

Lorsque vous cliquez sur l'appel d'origine:

overridePendingTransition(R.anim.slide_in_top, R.anim.slide_out_top);

Activité principale :

package com.example.animationtest;

import Android.app.Activity;
import Android.content.Intent;
import Android.os.Bundle;
import Android.view.Menu;
import Android.view.View;
import Android.view.View.OnClickListener;
import Android.widget.Button;

public class MainActivity extends Activity {

Button btn1;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    btn1 = (Button) findViewById(R.id.btn1);


    btn1.setOnClickListener(new OnClickListener() {

        @Override
        public void onClick(View v) {
            startActivity(new Intent(MainActivity.this, test.class));

        }
    });


}
    }

activity_main.xml:

<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"
  tools:context=".MainActivity" >

<Button
    Android:id="@+id/btn1"
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    Android:text="Button1" />

 </LinearLayout>

test.Java:

package com.example.animationtest;

import Android.app.Activity;
import Android.content.Intent;
import Android.os.Bundle;
import Android.view.View;
import Android.view.View.OnClickListener;
import Android.widget.Button;

public class test extends Activity {

Button btn1;

@Override
protected void onCreate(Bundle savedInstanceState) {
    // TODO Auto-generated method stub
    super.onCreate(savedInstanceState);
    setContentView(R.layout.test);
    btn1 = (Button) findViewById(R.id.btn1);

    overridePendingTransition(R.anim.slide_in_left, R.anim.slide_out_left);

    btn1.setOnClickListener(new OnClickListener() {

        @Override
        public void onClick(View v) {
         finish();
            overridePendingTransition(R.anim.slide_in_right,
                    R.anim.slide_out_right);
            startActivity(new Intent(test.this, MainActivity.class));


        }
    });
}

    }

test.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
Android:layout_width="match_parent"
Android:layout_height="match_parent"
Android:orientation="vertical" >

<Button
    Android:id="@+id/btn1"
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    Android:text="Button1" />

 </LinearLayout>

J'espère que cela t'aides.

25
Siddharth_Vyas

créer un répertoire dans /res/anim.__ et créer bottom_to_original.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:Android="http://schemas.Android.com/apk/res/Android">
    <translate
        Android:duration="1500"
        Android:fromYDelta="100%"
        Android:toYDelta="1%" />
</set>





LinearLayout ll = findViewById(R.id.ll);

        Animation animation;
        animation = AnimationUtils.loadAnimation(getApplicationContext(),
                R.anim.sample_animation);
        ll .setAnimation(animation);
1