एंड्रॉइड: एक एनीमेशन का उपयोग करके एक दृश्य दिखा / छिपाएं


81

मैं एक ऊर्ध्वाधर एनीमेशन के माध्यम से किसी दृश्य को दिखाने / छिपाने के तरीके को निर्धारित करने के लिए यहां कई Google परिणामों / प्रश्नों के माध्यम से देख रहा हूं, लेकिन मुझे ऐसा नहीं लग रहा है कि यह बिल्कुल सही है या बहुत अस्पष्ट है।

मेरे पास एक लेआउट (पूर्ववत बार) है जो किसी अन्य लेआउट के नीचे और कई अन्य विजेट से ऊपर है; परिस्थितियों के आधार पर इस बार को लंबवत रूप से खुला और स्लाइड बंद होना चाहिए।

वर्तमान में मैं अभी जो कुछ भी करता हूं वह दृश्य या चला गया दृश्य सेट है।

जवाबों:


64

android:animateLayoutChanges="true" अभिभावक लेआउट के अंदर विशेषता सेट करें ।

अगर यह नहीं है और android:animateLayoutChanges="true"उस लेआउट के लिए सेट एक लेआउट में दृश्य रखो ।

नोट: यह केवल API स्तर 11+ (Android 3.0) से काम करता है


19

मैंने RelativeLayoutउस शो के लिए एक एक्सटेंशन बनाया / एनिमेशन के साथ लेआउट छिपाता है। यह Viewइन सुविधाओं को प्राप्त करने के लिए किसी भी प्रकार का विस्तार कर सकता है।

import android.content.Context;
import android.util.AttributeSet;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.AnimationSet;
import android.view.animation.AnimationUtils;
import android.widget.RelativeLayout;

public class AnimatingRelativeLayout extends RelativeLayout
{
    Context context;
    Animation inAnimation;
    Animation outAnimation;

    public AnimatingRelativeLayout(Context context)
    {
        super(context);
        this.context = context;
        initAnimations();

    }

    public AnimatingRelativeLayout(Context context, AttributeSet attrs)
    {
        super(context, attrs);
        this.context = context;
        initAnimations();
    }

    public AnimatingRelativeLayout(Context context, AttributeSet attrs, int defStyle)
    {
        super(context, attrs, defStyle);
        this.context = context;
        initAnimations();
    }

    private void initAnimations()
    {
        inAnimation = (AnimationSet) AnimationUtils.loadAnimation(context, R.anim.in_animation);
        outAnimation = (Animation) AnimationUtils.loadAnimation(context, R.anim.out_animation);
    }

    public void show()
    {
        if (isVisible()) return;
        show(true);
    }

    public void show(boolean withAnimation)
    {
        if (withAnimation) this.startAnimation(inAnimation);
        this.setVisibility(View.VISIBLE);
    }

    public void hide()
    {
        if (!isVisible()) return;
        hide(true);
    }

    public void hide(boolean withAnimation)
    {
        if (withAnimation) this.startAnimation(outAnimation);
        this.setVisibility(View.GONE);
    }

    public boolean isVisible()
    {
        return (this.getVisibility() == View.VISIBLE);
    }

    public void overrideDefaultInAnimation(Animation inAnimation)
    {
        this.inAnimation = inAnimation;
    }

    public void overrideDefaultOutAnimation(Animation outAnimation)
    {
        this.outAnimation = outAnimation;
    }
}

आप मूल Animations का उपयोग करके ओवरराइड कर सकते हैं overrideDefaultInAnimationऔरoverrideDefaultOutAnimation

मेरा मूल एनिमेशन फीका था / बाहर, मैं स्क्रीन के अंदर / बाहर अनुवाद करने के लिए XML एनीमेशन फ़ाइलों को जोड़ रहा हूं (अनुवाद शीर्ष या शीर्ष पर)

in_animation.xml:

    <?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="600"
    android:fillAfter="false"
    android:fromXDelta="0"
    android:fromYDelta="-100%p"
    android:toXDelta="0"
    android:toYDelta="0" />

out_animation.xml:

  <?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="600"
    android:fillAfter="false"
    android:fromXDelta="0"
    android:fromYDelta="0"
    android:toXDelta="0"
    android:toYDelta="-100%p" />

15

यह यथोचित रूप से एपीआई 12 और इसके बाद के संस्करण में एकल पंक्ति स्टेटमेंट में प्राप्त किया जा सकता है। नीचे एक उदाहरण है जहां vदृश्य है जिसे आप चेतन करना चाहते हैं;

v.animate().translationXBy(-1000).start();

यह View1000px तक बाईं ओर के प्रश्न में स्लाइड जाएगा । UI पर वापस देखने के लिए हम केवल निम्नलिखित कार्य कर सकते हैं।

v.animate().translationXBy(1000).start();

मुझे आशा है कि किसी को यह उपयोगी लगता है।


11

यदि आप केवल एक दृश्य की ऊँचाई (निश्चित संख्या से 0 तक) को एनिमेट करना चाहते हैं, तो आप अपने स्वयं के एनीमेशन को लागू कर सकते हैं:

final View v = getTheViewToAnimateHere();
Animation anim=new Animation(){
    protected void applyTransformation(float interpolatedTime, Transformation t) {
        super.applyTransformation(interpolatedTime, t);
        // Do relevant calculations here using the interpolatedTime that runs from 0 to 1
        v.setLayoutParams(new LinearLayout.LayoutParams(LayoutParams.FILL_PARENT, (int)(30*interpolatedTime)));
    }};
anim.setDuration(500);
v.startAnimation(anim);

7

मैंने इस दो फ़ंक्शन का उपयोग संक्रमण एनीमेशन के साथ सुचारू रूप से छिपाने और दिखाने के लिए किया है।

@TargetApi(Build.VERSION_CODES.HONEYCOMB)
    public void expand(final View v, int duration, int targetHeight, final int position) {

        int prevHeight = v.getHeight();

        v.setVisibility(View.VISIBLE);
        ValueAnimator valueAnimator = ValueAnimator.ofInt(0, targetHeight);
        valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                v.getLayoutParams().height = (int) animation.getAnimatedValue();
                v.requestLayout();
            }
        });
        valueAnimator.setInterpolator(new DecelerateInterpolator());
        valueAnimator.setDuration(duration);
        valueAnimator.start();
        valueAnimator.addListener(new AnimatorListenerAdapter() {

            @Override
            public void onAnimationEnd(Animator animation) {
                v.clearAnimation();
            }
        });

    }

    @TargetApi(Build.VERSION_CODES.HONEYCOMB)
    public void collapse(final View v, int duration, int targetHeight, final int position) {
        if (position == (data.size() - 1)) {
            return;
        }
        int prevHeight = v.getHeight();
        ValueAnimator valueAnimator = ValueAnimator.ofInt(prevHeight, targetHeight);
        valueAnimator.setInterpolator(new DecelerateInterpolator());
        valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                v.getLayoutParams().height = (int) animation.getAnimatedValue();
                v.requestLayout();
            }
        });
        valueAnimator.setInterpolator(new DecelerateInterpolator());
        valueAnimator.setDuration(duration);
        valueAnimator.start();
        valueAnimator.addListener(new AnimatorListenerAdapter() {
            @Override
            public void onAnimationEnd(Animator animation) {
                animBoolArray.put(position, false);
                v.clearAnimation();

            }
        });
    }

4

TranslateAnimation वर्ग का उपयोग करने का प्रयास करें , जो स्थिति परिवर्तनों के लिए एनीमेशन बनाता है। मदद के लिए इसे पढ़ने की कोशिश करें - http://developer.android.com/reference/android/view/animation/TranslateAnimation.html

अद्यतन: यहाँ इस के लिए उदाहरण है। यदि आपके पास अपने दृश्य की ऊंचाई 50 है और छिपाने की विधि में आप केवल 10 px दिखाना चाहते हैं। नमूना कोड होगा -

TranslateAnimation anim=new TranslateAnimation(0,0,-40,0);
anim.setFillAfter(true);
view.setAnimation(anim);

पुनश्च: आपकी आवश्यकता के अनुसार एनीमेशन का उपयोग करने में मदद करने के लिए बहुत सारे या अन्य तरीके हैं। यदि आप पूरी तरह से कोड को कस्टमाइज़ करना चाहते हैं, तो RelativeLayout.LayoutParams पर भी एक नज़र डालें, हालाँकि TranslateAnimation का उपयोग करना आसान है।

EDIT: -Complex संस्करण लेआउटप्रैम का उपयोग कर

RelativeLayout relParam=new RelativeLayout.LayoutParam(RelativeLayout.LayoutParam.FILL_PARENT,RelativeLayout.LayoutParam.WRAP_CONTENT); //you can give hard coded width and height here in (width,height) format.
relParam.topMargin=-50; //any number that work.Set it to 0, when you want to show it.
view.setLayoutParams(relparam);

यह उदाहरण कोड मानता है कि आप अपने विचार RelativeLayout में रख रहे हैं, अगर लेआउट का नाम नहीं बदला, हालांकि अन्य लेआउट काम नहीं कर सकते। यदि आप उन पर एक एनीमेशन प्रभाव देना चाहते हैं, तो टॉपमैर्जिन को धीरे-धीरे कम करें या बढ़ाएं। आप वहां भी Thread.sleep () का उपयोग करने पर विचार कर सकते हैं।


1
ScaleAnimation स्थिति नहीं बदलता है, यह दृश्य को मापता है ... आप TranslateAnimation के साथ भ्रमित कर रहे हैं।
रोटेमिज़

मुझे लगता है कि आपको वह मिल गया है जिसकी आपको आवश्यकता है, और यदि यहां एक नमूना कोड नहीं है - TranslateAnimation anim = new TranslateAnimation (fromX, toX, fromY, toY); view.setAnimation (anim);
दोपहर

3

इसे इस्तेमाल करे।

view.animate()
    .translationY(0)
    .alpha(0.0f)
    .setListener(new AnimatorListenerAdapter() {
        @Override
        public void onAnimationEnd(Animator animation) {
            super.onAnimationEnd(animation);
            view.setVisibility(View.GONE);
        }
    });

1

सबसे पहले देखें दृश्य की ऊँचाई को देखना चाहते हैं और यदि दृश्य दिखा रहा है तो बचाने के लिए बूलियन बनाना चाहते हैं:

int heigth=0;
boolean showing=false;
LinearLayout layout = (LinearLayout) view.findViewById(R.id.layout);

        proDetailsLL.getViewTreeObserver().addOnGlobalLayoutListener(new OnGlobalLayoutListener() {

            @Override
            public void onGlobalLayout() {
                // gets called after layout has been done but before display
                // so we can get the height then hide the view

                proHeight = proDetailsLL.getHeight(); // Ahaha!  Gotcha

                proDetailsLL.getViewTreeObserver().removeGlobalOnLayoutListener(this);
                proDetailsLL.setLayoutParams(new LinearLayout.LayoutParams(LayoutParams.MATCH_PARENT, 0));
            }
        });

फिर दृश्य को छुपाने के लिए विधि कॉल करें, और बूलियन का मान बदलें:

slideInOutAnimation(showing, heigth, layout);
proShowing = !proShowing;

प्रक्रिया:

/**
     * Method to slide in out the layout
     * 
     * @param isShowing
     *            if the layout is showing
     * @param height
     *            the height to slide
     * @param slideLL
     *            the container to show
     */
private void slideInOutAnimation(boolean isShowing, int height, final LinearLayout slideLL, final ImageView arroIV) {

        if (!isShowing) {
        Animation animIn = new Animation() {
        protected void applyTransformation(float interpolatedTime, Transformation t) {
                    super.applyTransformation(interpolatedTime, t);
        // Do relevant calculations here using the interpolatedTime that runs from 0 to 1
        slideLL.setLayoutParams(new LinearLayout.LayoutParams(LayoutParams.MATCH_PARENT, (int) (heigth * interpolatedTime)));

                }
            };
            animIn.setDuration(500);
            slideLL.startAnimation(animIn);
        } else {

            Animation animOut = new Animation() {
                protected void applyTransformation(float interpolatedTime, Transformation t) {
                    super.applyTransformation(interpolatedTime, t);
                    // Do relevant calculations here using the interpolatedTime that runs from 0 to 1


                        slideLL.setLayoutParams(new LinearLayout.LayoutParams(LayoutParams.MATCH_PARENT,
                                (int) (heigth * (1 - interpolatedTime))));

                }
            };
            animOut.setDuration(500);
            slideLL.startAnimation(animOut);


        }

    }

1

ViewAnimator:

XML में:

  <ViewAnimator
    android:id="@+id/animator_message"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:inAnimation="@anim/slide_down_text"
    android:outAnimation="@anim/slide_up_text">

    <TextView
        android:id="@+id/text_message_authentication"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center_horizontal"
        android:text="message_error_authentication" />

    <TextView
        android:id="@+id/text_message_authentication_connection"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center_horizontal"
        android:text="message_error_authentication_connection" />

    <TextView
        android:id="@+id/text_message_authentication_empty"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center_horizontal"
        android:text="message_error_authentication_field_empty" />

</ViewAnimator>

कार्य:

public void show(int viewId) {
    ViewAnimator animator = (ViewAnimator) findView(animatorId);
    View view = findViewById(viewId);

    if (animator.getDisplayedChild() != animator.indexOfChild(view)) {
        animator.setDisplayedChild(animator.indexOfChild(view));
     }
 }


 private void showAuthenticationConnectionFailureMessage() {
    show(R.id.text_message_authentication_connection);
}
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.