Animate visibility modes, GONE and VISIBLE

2019-03-07 20:25发布

站内文章 / Android
44 0 0

问题:

So im trying to animate when i set the visibility of a linearlayout with other widgets, from GONE to VISIBLE and the opposite.Im using togglebuttons to show and hide. Here's an image to show what i want to do:

I can show and hide, but im not following how can i animate the sliding correctly....:(

Heres my xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/LinearLayout01" 
    android:layout_height="wrap_content"
    android:layout_width="fill_parent"
    android:orientation="vertical">
<ScrollView 
    android:id="@+id/ScrollView01" 
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">
    <LinearLayout
        android:layout_height="wrap_content"
        android:layout_width="fill_parent" 
        android:orientation="vertical">
        <!-- TITULO1 -->
            <LinearLayout 
                android:layout_height="wrap_content"
                android:layout_width="fill_parent" 
                android:orientation="horizontal" 
                android:background="#848284"
                android:padding="4px">  
                <TextView 
                    android:layout_height="wrap_content"
                    android:layout_width="wrap_content"
                    android:id="@+id/TextView01" 
                    android:text="Informação Geral" 
                    android:textColor="#FFFFFF"
                    android:gravity="left"
                    android:textStyle="bold"
                    android:singleLine="true"
                    android:ellipsize="end"
                    android:layout_gravity="center_vertical"
                    android:textSize="18px" 
                    android:paddingLeft="4px">
                </TextView>
                <LinearLayout 
                    android:layout_height="wrap_content"
                    android:layout_width="fill_parent" 
                    android:layout_gravity="right|center_vertical" android:gravity="right|center_vertical" android:paddingTop="2px">
                        <ToggleButton 
                            android:layout_height="wrap_content" 
                            android:layout_width="wrap_content" 
                            android:textOff="Expandir" 
                            android:textOn="Minimizar"
                            android:id="@+id/mostrar" 
                            android:width="80px">
                        </ToggleButton>
                </LinearLayout>

            </LinearLayout>
            <!--LINHA SEPARADORA-->
            <View 
                android:id="@+id/View01" 
                android:layout_width="wrap_content" 
                android:background="#B5B5B5" 
                android:layout_height="2px">
            </View>
            <!-- CONTENT INITIALLY HIDDEN (GONE) -->
            <LinearLayout 
                android:layout_width="fill_parent" 
                android:layout_height="wrap_content"
                android:visibility="gone"  
                android:id="@+id/informgeral"
                android:orientation="vertical"> 
                <LinearLayout 
                    android:id="@+id/LinearLayout01" 
                    android:layout_height="wrap_content"
                    android:layout_width="fill_parent" 
                    android:paddingBottom="5px" 
                    android:paddingTop="5px" 
                    android:paddingLeft="8px"
                    android:orientation="vertical">
                    <LinearLayout
                        android:layout_width="fill_parent"
                        android:layout_height="wrap_content"
                        android:orientation="horizontal">
                        <TextView
                            android:id="@+id/consult_nrprocesso"
                            android:textStyle="bold"
                            android:layout_height="wrap_content"
                            android:layout_weight="1"
                            android:gravity="left"
                            android:ellipsize="end"
                            android:layout_width="wrap_content" 
                            android:singleLine="true" 
                            android:text="@string/srch_number_proc"/>
                        <TextView
                            android:id="@+id/consult_nrprocessovalue"
                            android:layout_width="0px"
                            android:layout_height="wrap_content"
                            android:layout_weight="1"
                            android:gravity="right"
                            android:singleLine="true"
                            android:ellipsize="end"/>
                    </LinearLayout>
                    <LinearLayout
                        android:layout_height="wrap_content" 
                        android:layout_width="fill_parent">
                        <TextView
                            android:id="@+id/consult_tipoprocinfo"
                            android:text="Numero Atribuido ao Processo"
                            android:layout_height="wrap_content"
                            android:layout_weight="1"
                            android:gravity="left"
                            android:singleLine="true"
                            android:ellipsize="end" 
                            android:layout_width="wrap_content" 
                            android:textSize="12px"/>
                    </LinearLayout>
                </LinearLayout>
                <View 
                    android:id="@+id/View01" 
                    android:layout_width="wrap_content" 
                    android:background="#B5B5B5" 
                    android:layout_height="1px">
                </View>
<LinearLayout 
    android:id="@+id/LinearLayout02" 
    android:layout_height="wrap_content"
    android:orientation="vertical" 
    android:paddingTop="5px" 
    android:paddingBottom="5px" 
    android:layout_width="fill_parent" 
    android:paddingLeft="8px">
    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">
            <TextView
                android:id="@+id/consult_tipoproc"
                android:textStyle="bold"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:gravity="left"
                android:ellipsize="end"
                android:layout_width="wrap_content" 
                android:singleLine="true" 
                android:text="@string/proc_type"/>
            <TextView
                android:id="@+id/consult_tipoprocvalue"
                android:layout_width="0px"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:gravity="right"
                android:singleLine="true"
                android:ellipsize="end"/>
    </LinearLayout>
    <LinearLayout
        android:layout_height="wrap_content" 
        android:layout_width="fill_parent">
    <TextView
            android:id="@+id/consult_tipoprocinfo"
            android:text="Variante do Processo em causa"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="left"
            android:singleLine="true"
            android:ellipsize="end" 
            android:layout_width="wrap_content" 
            android:textSize="12px"/>
    </LinearLayout>     
</LinearLayout>
<View android:id="@+id/View01" 
        android:layout_width="fill_parent" 
        android:background="#B5B5B5" 
        android:layout_height="1px">
</View>
<LinearLayout
    android:id="@+id/LinearLayout03" 
    android:layout_height="wrap_content"
    android:orientation="vertical" 
    android:paddingTop="5px" 
    android:paddingBottom="5px" 
    android:layout_width="fill_parent" 
    android:paddingLeft="8px">
    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">
            <TextView
                android:id="@+id/consult_etapa"
                android:textStyle="bold"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:gravity="left"
                android:ellipsize="end"
                android:layout_width="wrap_content" 
                android:singleLine="true" 
                android:text="@string/srch_task"/>
            <TextView
                android:id="@+id/consult_etapavalue"
                android:layout_width="0px"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:gravity="right"
                android:singleLine="true"
                android:ellipsize="end"/>
    </LinearLayout>
    <LinearLayout
        android:layout_height="wrap_content" 
        android:layout_width="wrap_content">
    <TextView
            android:id="@+id/consult_etapainfo"
            android:text="Etapa onde se encontra o processo"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="left"
            android:singleLine="true"
            android:ellipsize="end" 
            android:layout_width="wrap_content" 
            android:textSize="12px"/>
    </LinearLayout>     
</LinearLayout>
<View android:id="@+id/View01" 
        android:layout_width="wrap_content" 
        android:background="#B5B5B5" 
        android:layout_height="1px">
</View>
    <LinearLayout
    android:id="@+id/LinearLayout04" 
    android:layout_height="wrap_content"
    android:orientation="vertical" 
    android:paddingTop="5px" 
    android:paddingBottom="5px" 
    android:layout_width="fill_parent" 
    android:paddingLeft="8px">
    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">
            <TextView
                android:id="@+id/consult_criadopor"
                android:textStyle="bold"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:gravity="left"
                android:ellipsize="end"
                android:layout_width="wrap_content" 
                android:singleLine="true" 
                android:text="@string/criado_por"/>
            <TextView
                android:id="@+id/consult_criadoporvalue"
                android:layout_width="0px"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:gravity="right"
                android:singleLine="true"
                android:ellipsize="end"/>
    </LinearLayout>
    <LinearLayout
        android:layout_height="wrap_content" 
        android:layout_width="wrap_content">
    <TextView
            android:id="@+id/consult_criadoporinfo"
            android:text="Entidade responsável pela criação do Processo."
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="left"
            android:singleLine="true"
            android:ellipsize="end" 
            android:layout_width="wrap_content" 
            android:textSize="12px"/>
    </LinearLayout>     
</LinearLayout>
<View android:id="@+id/View01" 
        android:layout_width="wrap_content" 
        android:background="#B5B5B5" 
        android:layout_height="1px">
</View>
<LinearLayout
    android:id="@+id/LinearLayout05" 
    android:layout_height="wrap_content"
    android:orientation="vertical" 
    android:paddingTop="5px" 
    android:paddingBottom="5px" 
    android:layout_width="fill_parent" 
    android:paddingLeft="8px">
    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">
            <TextView
                android:id="@+id/consult_assunto"
                android:textStyle="bold"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:gravity="left"
                android:ellipsize="end"
                android:layout_width="wrap_content" 
                android:singleLine="true" 
                android:text="@string/proc_subject"/>
            <TextView
                android:id="@+id/consult_assuntovalue"
                android:layout_width="0px"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:gravity="right"
                android:singleLine="true"
                android:ellipsize="end"/>
    </LinearLayout>
    <LinearLayout
        android:layout_height="wrap_content" 
        android:layout_width="wrap_content">
    <TextView
            android:id="@+id/consult_assuntoinfo"
            android:text="Assunto do Processo"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="left"
            android:singleLine="true"
            android:ellipsize="end" 
            android:layout_width="wrap_content" 
            android:textSize="12px"/>
    </LinearLayout>     
</LinearLayout>
<View android:id="@+id/View01" 
        android:layout_width="wrap_content" 
        android:background="#B5B5B5" 
        android:layout_height="1px">
</View>
<LinearLayout
    android:id="@+id/LinearLayout05" 
    android:layout_height="wrap_content"
    android:orientation="vertical" 
    android:paddingTop="5px" 
    android:paddingBottom="5px" 
    android:layout_width="fill_parent" 
    android:paddingLeft="8px">
    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">
            <TextView
                android:id="@+id/consult_datainicio"
                android:textStyle="bold"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:gravity="left"
                android:ellipsize="end"
                android:layout_width="wrap_content" 
                android:singleLine="true" 
                android:text="@string/srch_datebeg"/>
            <TextView
                android:id="@+id/consult_datainiciovalue"
                android:layout_width="0px"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:gravity="right"
                android:singleLine="true"
                android:ellipsize="end"/>
    </LinearLayout>
    <LinearLayout
        android:layout_height="wrap_content" 
        android:layout_width="wrap_content">
    <TextView
            android:id="@+id/consult_dataincioinfo"
            android:text="Data da criação do Processo"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="left"
            android:singleLine="true"
            android:ellipsize="end" 
            android:layout_width="wrap_content" 
            android:textSize="12px"/>
    </LinearLayout>     
</LinearLayout>
</LinearLayout>
<!-- TITULO2 -->
<LinearLayout 
    android:layout_height="wrap_content"
    android:layout_width="fill_parent" 
    android:orientation="horizontal" 
    android:background="#848284" android:padding="4px"> 
    <TextView 
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:id="@+id/TextView01" 
        android:text="Informação Complementar" 
        android:textColor="#FFFFFF"
        android:gravity="left"
        android:textStyle="bold"
        android:singleLine="true"
        android:ellipsize="end"
        android:layout_gravity="center_vertical" android:paddingLeft="4px" android:textSize="16px">
    </TextView>
    <LinearLayout 
        android:layout_height="wrap_content"
        android:layout_width="fill_parent" 
        android:layout_gravity="right|center_vertical" 
        android:gravity="right|center_vertical" 
        android:paddingTop="2px">
        <ToggleButton 
            android:layout_height="wrap_content" 
            android:layout_width="wrap_content" 
            android:textOff="Expandir" 
            android:textOn="Minimizar"
            android:id="@+id/mostrar2" 
            android:width="80px">
        </ToggleButton>
    </LinearLayout>
</LinearLayout>
<View 
    android:id="@+id/View01" 
    android:layout_width="wrap_content" 
    android:background="#B5B5B5" 
    android:layout_height="2px">
</View>

<!-- TITULO3 -->
<LinearLayout 
    android:layout_height="wrap_content"
    android:layout_width="fill_parent" 
    android:orientation="horizontal" 
    android:background="#848284"
    android:padding="4px">  
    <TextView 
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:id="@+id/TextView01" 
        android:text="Documentos Anexados" 
        android:textColor="#FFFFFF"
        android:gravity="left"
        android:textStyle="bold"
        android:singleLine="true"
        android:ellipsize="end"
        android:layout_gravity="center_vertical"
        android:textSize="18px" 
        android:paddingLeft="4px">
    </TextView>
    <LinearLayout 
        android:layout_height="wrap_content"
        android:layout_width="fill_parent" 
        android:layout_gravity="right|center_vertical" 
        android:gravity="right|center_vertical" 
        android:paddingTop="2px">
        <ToggleButton 

            android:layout_height="wrap_content" 
            android:layout_width="wrap_content" 
            android:textOff="Expandir" 
            android:textOn="Minimizar"
            android:id="@+id/mostrar" 
            android:width="80px">
        </ToggleButton>
    </LinearLayout>     
</LinearLayout>
<!--LINHA SEPARADORA-->
<View 
    android:id="@+id/View01" 
    android:layout_width="wrap_content" 
    android:background="#B5B5B5" 
    android:layout_height="2px">
</View>
<!-- TITULO4 -->
<LinearLayout 
    android:layout_height="wrap_content"
    android:layout_width="fill_parent" 
    android:orientation="horizontal" 
    android:background="#848284"
    android:padding="4px">  
    <TextView 
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:id="@+id/TextView01" 
        android:text="Etapas" 
        android:textColor="#FFFFFF"
        android:gravity="left"
        android:textStyle="bold"
        android:singleLine="true"
        android:ellipsize="end"
        android:layout_gravity="center_vertical"
        android:textSize="18px" 
        android:paddingLeft="4px">
    </TextView>
    <LinearLayout 
        android:layout_height="wrap_content"
        android:layout_width="fill_parent" 
        android:layout_gravity="right|center_vertical" 
        android:gravity="right|center_vertical" 
        android:paddingTop="2px">
        <ToggleButton 

            android:layout_height="wrap_content" 
            android:layout_width="wrap_content" 
            android:textOff="Expandir" 
            android:textOn="Minimizar"
            android:id="@+id/mostrar" 
            android:width="80px">
        </ToggleButton>
    </LinearLayout>     
</LinearLayout>
<!--LINHA SEPARADORA-->
<View 
    android:id="@+id/View01" 
    android:layout_width="wrap_content" 
    android:background="#B5B5B5" 
    android:layout_height="2px">
</View>
</LinearLayout>
</ScrollView>

And here's the java code that calls the button event:

final ToggleButton bt=(ToggleButton) findViewById(R.id.mostrar);


    bt.setOnClickListener(new OnClickListener() {
        public void onClick(View v) {
            if (bt.isChecked()) {

                /*TranslateAnimation slide = new TranslateAnimation(0, 0, 0,
                          -findViewById(R.id.informgeral).getHeight()*2);
                           slide.setDuration(500);
                           slide.setFillAfter(true);
                           findViewById(R.id.informgeral).startAnimation(slide);*/

                findViewById(R.id.informgeral).setVisibility(View.VISIBLE);;

            } else {

            /*  TranslateAnimation slide = new TranslateAnimation(0, 0, 0,
                          findViewById(R.id.informgeral).getHeight());
                           slide.setDuration(500);
                           slide.setFillAfter(true);
                           findViewById(R.id.informgeral).startAnimation(slide);*/


                           //findViewById(R.id.listBut).startAnimation(slide);


                findViewById(R.id.informgeral).setVisibility(View.GONE);;


            }
        }
});

回答1:

Like tomash said before: There's no easy way.

You might want to take a look at my answer here.
It explains how to realize a sliding (dimension changing) view.
In this case it was a left and right view: Left expanding, right disappearing.
It's might not do exactly what you need but with inventive spirit you can make it work ;)



回答2:

To animate layout changes, you can add the following attribute to your LinearLayout

android:animateLayoutChanges="true"

and it will animate changes automatically for you.

For information, if android:animateLayoutChanges="true" is used, then custom animation via anim xml will not work.



回答3:

Visibility change itself can be easy animated by overriding setVisibility method. Look at complete code:

public class SimpleViewAnimator extends FrameLayout
{
    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);
    }
}


回答4:

This is a quite old question, still comments show, that still people have problems, so here is my solution with following additional features:

  • adjust the animation (speed, type, ...)
  • does not need to extend any class
  • in my case, animateLayoutChanges has problems in the new CoordinatorLayout

Function - Example (I have this function in an utility class)

public static void animateViewVisibility(final View view, final int visibility)
{
    // cancel runnning animations and remove and listeners
    view.animate().cancel();
    view.animate().setListener(null);

    // animate making view visible
    if (visibility == View.VISIBLE)
    {
        view.animate().alpha(1f).start();
        view.setVisibility(View.VISIBLE);
    }
    // animate making view hidden (HIDDEN or INVISIBLE)
    else
    {
        view.animate().setListener(new AnimatorListenerAdapter()
        {
            @Override
            public void onAnimationEnd(Animator animation)
            {
                view.setVisibility(visibility);
            }
        }).alpha(0f).start();
    }
}

Adjust animation

After calling view.animate() you can adjust the animation to whatever you want (set duration, set interpolator and more...). You may as well hide a view by scaling it instead of adjusting it's alpha value, just replace the alpha(...) with scaleX(...) or scaleY(...) in the utility method if you want that



回答5:

You probably want to use an ExpandableListView, a special ListView that allows you to open and close groups.



回答6:

If anyone else is strugelling with this in the present, here is a much easier version:

It is possible to set a property of the parent layout in the XML: 

android:animateLayoutChanges="true"

This will animate views when they are added/removed.
Keep a reference to the view and reinsert it at its proper index and you're gold.



回答7:

There is no easy way to animate hiding/showing views. You can try method described in following answer: How do I animate View.setVisibility(GONE)



回答8:

You can use the expandable list view explained in API demos to show groups

http://developer.android.com/resources/samples/ApiDemos/src/com/example/android/apis/view/ExpandableList1.html.

To animate the list items motion, you will have to override the getView method and apply translate animation on each list item. The values for animation depend on the position of each list item. This was something which i tried on a simple list view long time back.



回答9:

Well there is a very easy way, but just setting android:animateLayoutChanges="true" will not work. You need to enableTransitionType in you activity. Check this link for more info: http://www.thecodecity.com/2018/03/android-animation-on-view-visibility.html



标签： android animation visibility slide
举报

收藏的人(0)

Ta的文章 更多文章
登录 后发表评论
0条评论
还没有人评论过~