动画可见性模式，GONE 和 VISIBLE

Posted 2023-02-18

【中文标题】动画可见性模式，GONE 和 VISIBLE

【英文标题】：Animate visibility modes, GONE and VISIBLE

【发布时间】：2011-05-01 21:35:38

【问题描述】：

所以当我使用其他小部件设置线性布局的可见性时，我尝试制作动画，从 GONE 到 VISIBLE 以及相反。我使用切换按钮来显示和隐藏。这是一张图片来显示我想要做什么：

我可以显示和隐藏，但我不知道如何正确设置滑动动画....:(

这是我的 xml：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/LinearLayout01" 
    android:layout_
    android:layout_
    android:orientation="vertical">
<ScrollView 
    android:id="@+id/ScrollView01" 
    android:layout_
    android:layout_>
    <LinearLayout
        android:layout_
        android:layout_ 
        android:orientation="vertical">
        <!-- TITULO1 -->
            <LinearLayout 
                android:layout_
                android:layout_ 
                android:orientation="horizontal" 
                android:background="#848284"
                android:padding="4px">  
                <TextView 
                    android:layout_
                    android:layout_
                    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_
                    android:layout_ 
                    android:layout_gravity="right|center_vertical" android:gravity="right|center_vertical" android:paddingTop="2px">
                        <ToggleButton 
                            android:layout_ 
                            android:layout_ 
                            android:textOff="Expandir" 
                            android:textOn="Minimizar"
                            android:id="@+id/mostrar" 
                            android:>
                        </ToggleButton>
                </LinearLayout>

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

<!-- TITULO3 -->
<LinearLayout 
    android:layout_
    android:layout_ 
    android:orientation="horizontal" 
    android:background="#848284"
    android:padding="4px">  
    <TextView 
        android:layout_
        android:layout_
        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_
        android:layout_ 
        android:layout_gravity="right|center_vertical" 
        android:gravity="right|center_vertical" 
        android:paddingTop="2px">
        <ToggleButton 

            android:layout_ 
            android:layout_ 
            android:textOff="Expandir" 
            android:textOn="Minimizar"
            android:id="@+id/mostrar" 
            android:>
        </ToggleButton>
    </LinearLayout>     
</LinearLayout>
<!--LINHA SEPARADORA-->
<View 
    android:id="@+id/View01" 
    android:layout_ 
    android:background="#B5B5B5" 
    android:layout_>
</View>
<!-- TITULO4 -->
<LinearLayout 
    android:layout_
    android:layout_ 
    android:orientation="horizontal" 
    android:background="#848284"
    android:padding="4px">  
    <TextView 
        android:layout_
        android:layout_
        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_
        android:layout_ 
        android:layout_gravity="right|center_vertical" 
        android:gravity="right|center_vertical" 
        android:paddingTop="2px">
        <ToggleButton 

            android:layout_ 
            android:layout_ 
            android:textOff="Expandir" 
            android:textOn="Minimizar"
            android:id="@+id/mostrar" 
            android:>
        </ToggleButton>
    </LinearLayout>     
</LinearLayout>
<!--LINHA SEPARADORA-->
<View 
    android:id="@+id/View01" 
    android:layout_ 
    android:background="#B5B5B5" 
    android:layout_>
</View>
</LinearLayout>
</ScrollView>

下面是调用按钮事件的java代码：

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);;


            
        
);

【问题讨论】：

XML 的圣墙！ O.o

是的，它可能会变小：P

developer.android.com/guide/topics/ui/look-and-feel/themesxd

【参考方案1】：

要动画布局更改，您可以将以下属性添加到您的 LinearLayout

android:animateLayoutChanges="true"

它会自动为您制作动画变化。

---

关于信息，如果使用android:animateLayoutChanges="true"，那么通过anim xml自定义动画将不起作用。

【讨论】：

但仅来自 API 11 (Android 3.0)

你刚刚拯救了小世界=)

简单但省了很多力气。谢谢。

我在回收站视图中使用它，当它打开（可见）时，它的工作量更大，当它消失时，下面的项目会在动画结束前跳起来。有什么想法吗？

@itzhar 我也遇到了同样的问题，你解决了吗？

【参考方案2】：

通过重写 setVisibility 方法，可以轻松地对可见性更改本身进行动画处理。查看完整代码：

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);
    

【讨论】：

别忘了添加 public SimpleViewAnimator(Context context, AttributeSet attrs) super(context, attrs);否则，这不会从布局 xml 中膨胀！

【参考方案3】：

这是一个很老的问题，仍然 cmets 显示，仍然有人有问题，所以这是我的解决方案，具有以下附加功能：

调整动画（速度、类型……） 不需要扩展任何类 就我而言，animateLayoutChanges 在新的CoordinatorLayout 中存在问题

函数 - 示例（我在实用程序类中有此函数）

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();
    

调整动画

调用view.animate() 后，您可以将动画调整为您想要的任何内容（设置持续时间、设置插值器等等...）。您也可以通过缩放而不是调整其 alpha 值来隐藏视图，如果需要，只需在实用程序方法中将 alpha(...) 替换为 scaleX(...) 或 scaleY(...)

【参考方案4】：

就像tomash之前说的：没有捷径可走。

您可能想看看my answer here。 它解释了如何实现滑动（尺寸变化）视图。 在这种情况下，它是一个左右视图：左扩展，右消失。 它可能无法完全满足您的需求，但您可以凭借创新精神使其发挥作用；）

【参考方案5】：

您可能想要使用 ExpandableListView，这是一种允许您打开和关闭组的特殊 ListView。

【参考方案6】：

没有简单的方法来动画隐藏/显示视图。您可以尝试以下答案中描述的方法：How do I animate View.setVisibility(GONE)

【讨论】：

这是否保证当你展示一些已经消失的东西时，它会扩展并推动所有内容？

【参考方案7】：

您可以使用 API 演示中解释的可扩展列表视图来显示组

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

要为列表项设置动画，您必须重写 getView 方法并在每个列表项上应用平移动画。 动画的值取决于每个列表项的位置。 这是我很久以前在一个简单的列表视图上尝试过的。

【参考方案8】：

嗯，有一个非常简单的方法，但是仅仅设置android:animateLayoutChanges="true" 是行不通的。您需要在活动中启用TransitionType。查看此链接了解更多信息：http://www.thecodecity.com/2018/03/android-animation-on-view-visibility.html