web-dev-qa-db-ja.com

可視性モード、GONEおよびVISIBLEのアニメーション化

だから私は他のウィジェットで線形レイアウトの可視性をGONEからVISIBLE、そしてその逆に設定したときにアニメーション化しようとしています。表示と非表示にトグルボタンを使用しています。ここに私がやりたいことを示す画像があります：

enter image description here

私は表示と非表示を切り替えることができますが、スライドを正しくアニメーション化するにはどうすればいいですか？... :(

私の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>

次に、ボタンイベントを呼び出す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);;


            }
        }
});
androidanimationvisibilityslide
114
Maxrunner

tomash 前に言ったように：簡単な方法はありません。

ここに答えてください をご覧ください。
スライド（寸法変更）ビューを実現する方法を説明します。
この場合、それは左右のビューでした：左に拡大、右に消えます。
それはあなたが必要とするものを正確にやらないかもしれませんが、独創的な精神であなたはそれを機能させることができます;）

14
Knickedi

レイアウトの変更をアニメーション化するには、次の属性をLinearLayoutに追加できます

Android:animateLayoutChanges="true"

変更が自動的にアニメーション化されます。

詳細については、Android:animateLayoutChanges="true"が使用されている場合、anim xmlを介したカスタムアニメーションは機能しません。

274
Christian Göllner

可視性の変更自体は、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);
    }
}
22
Ruslan Yanchyshyn

これはかなり古い質問であり、まだコメントが示しているように、まだ人々には問題があるので、以下の追加機能を備えた私の解決策があります：

  • アニメーションを調整する（速度、タイプ、...）
  • クラスを拡張する必要はありません
  • 私の場合、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(...)をscaleX(...)またはscaleY(...)に置き換えてください。

12
prom85

他の誰かが現在これで苦労しているなら、ここにはるかに簡単なバージョンがあります：

XMLで親レイアウトのプロパティを設定することができます。

Android:animateLayoutChanges="true"

これにより、ビューが追加/削除されたときにアニメーション化されます。
ビューへの参照を保持し、適切なインデックスに再挿入すると、ゴールドになります。

2
Max Izrin

おそらく、グループを開いたり閉じたりできる特別なリストビューであるExpandableListViewを使用する必要があります。

2
yingted

APIデモで説明されている展開可能なリストビューを使用して、グループを表示できます

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

リストアイテムの動きをアニメーション化するには、getViewメソッドをオーバーライドし、各リストアイテムに翻訳アニメーションを適用する必要があります。アニメーションの値は、各リストアイテムの位置によって異なります。これは長い間、単純なリストビューで試したものでした。

1
Ajit Pratap Singh

ビューの非表示/表示をアニメーション化する簡単な方法はありません。次の回答で説明されている方法を試すことができます： View.setVisibility（GONE） をアニメーション化するには

1
tomash

非常に簡単な方法がありますが、Android:animateLayoutChanges="true"を設定するだけでは機能しません。アクティビティでTransitionTypeを有効にする必要があります。詳細については、このリンクを確認してください： http://www.thecodecity.com/2018/03/Android-animation-on-view-visibility.html

0
Vishal