web-dev-qa-db-ja.com

setvisibilityながら簡単なアニメーションを追加するAndroid（view.Gone）

シンプルなレイアウトをデザインしました。アニメーションなしでデザインを完成させましたが、テキストビュークリックイベント時にアニメーションを追加したいのですが、使い方がわかりません。私のxmlデザインは良く見えましたか？任意の提案は大歓迎です。

私のXML

<?xml version="1.0" encoding="UTF-8"?>
<LinearLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:layout_width="fill_parent"
    Android:layout_height="fill_parent"
    Android:longClickable="false"
    Android:orientation="vertical"
    Android:weightSum="16" >

<LinearLayout 
    Android:layout_width="fill_parent"
    Android:layout_height="0dp"
    Android:orientation="vertical"
    Android:background="#00DDA0"
    Android:layout_weight="3" >
</LinearLayout>
 <TextView
        Android:id="@+id/Information1"
        Android:layout_width="match_parent"
        Android:layout_height="1dp" 
        Android:text="Child Information" 
        Android:background="#0390BE"
        Android:layout_weight="0.75"
        Android:textColor="#FFFFFF"
        Android:layout_gravity="center|fill_horizontal"/>

 <LinearLayout
     Android:id="@+id/layout1"
     Android:layout_width="fill_parent"
     Android:layout_height="0dp"
     Android:layout_weight="8.5"
     Android:background="#BBBBBB"
     Android:orientation="vertical" >

     <TextView
         Android:id="@+id/textView1"
         Android:layout_width="match_parent"
         Android:layout_height="match_parent"        
         Android:text="TextView" />
 </LinearLayout>

  <TextView
        Android:id="@+id/Information2"
        Android:layout_width="match_parent"
        Android:layout_height="0dp" 
        Android:text="Parent Information" 
        Android:background="#0390BE"
        Android:layout_weight="0.75"
        Android:textColor="#FFFFFF"
        Android:layout_gravity="center|fill_horizontal"/>
  <LinearLayout 
          Android:id="@+id/layout2"
    Android:layout_width="fill_parent"
    Android:layout_height="0dp"
    Android:orientation="vertical"
    Android:background="#BBBBBB"
    Android:layout_weight="8.5" >
     <TextView
         Android:id="@+id/textView2"
         Android:layout_width="match_parent"
         Android:layout_height="match_parent"        
         Android:text="TextView" />
      </LinearLayout>
   <TextView
        Android:id="@+id/Information3"
        Android:layout_width="match_parent"
        Android:layout_height="0dp" 
        Android:text="Siblings" 
        Android:background="#0390BE"
        Android:layout_weight="0.75"
        Android:textColor="#FFFFFF"
        Android:layout_gravity="center|fill_horizontal"/>
   <LinearLayout 
          Android:id="@+id/layout3"
    Android:layout_width="fill_parent"
    Android:layout_height="0dp"
    Android:orientation="vertical"
    Android:background="#BBBBBB"
    Android:layout_weight="8.5" >
     <TextView
         Android:id="@+id/textView3"
         Android:layout_width="match_parent"
         Android:layout_height="match_parent"        
         Android:text="TextView" />
      </LinearLayout>
    <TextView
        Android:id="@+id/Information4"
        Android:layout_width="match_parent"
        Android:layout_height="0dp" 
        Android:text="Teacher Information" 
        Android:background="#0390BE"
        Android:layout_weight="0.75"
        Android:textColor="#FFFFFF"
        Android:layout_gravity="center|fill_horizontal"/>
    <LinearLayout 
          Android:id="@+id/layout4"
    Android:layout_width="fill_parent"
    Android:layout_height="0dp"
    Android:orientation="vertical"
    Android:background="#BBBBBB"
    Android:layout_weight="8.5" >
     <TextView
         Android:id="@+id/textView4"
         Android:layout_width="match_parent"
         Android:layout_height="match_parent"        
         Android:text="TextView" />
      </LinearLayout>
     <TextView
        Android:id="@+id/Information5"
        Android:layout_width="match_parent"
        Android:layout_height="0dp" 
        Android:text="Grade Information" 
        Android:background="#0390BE"
        Android:layout_weight="0.75"
        Android:textColor="#FFFFFF"
        Android:layout_gravity="center|fill_horizontal"/>
     <LinearLayout 
          Android:id="@+id/layout5"
    Android:layout_width="fill_parent"
    Android:layout_height="0dp"
    Android:orientation="vertical"
    Android:background="#BBBBBB"
    Android:layout_weight="8.5" >
     <TextView
         Android:id="@+id/textView5"
         Android:layout_width="match_parent"
         Android:layout_height="match_parent"        
         Android:text="TextView" />
      </LinearLayout>
      <TextView
        Android:id="@+id/Information6"
        Android:layout_width="match_parent"
        Android:layout_height="0dp" 
        Android:text="Health Information" 
        Android:background="#0390BE"
        Android:layout_weight="0.75"
        Android:textColor="#FFFFFF"
        Android:layout_gravity="center|fill_horizontal"/>
      <LinearLayout 
          Android:id="@+id/layout6"
    Android:layout_width="fill_parent"
    Android:layout_height="0dp"
    Android:orientation="vertical"
    Android:background="#BBBBBB"
    Android:layout_weight="8.5" >
    <TextView
         Android:id="@+id/textView5"
         Android:layout_width="match_parent"
         Android:layout_height="match_parent"        
         Android:text="TextView" 
         Android:layout_weight="8.5" />
      </LinearLayout>

</LinearLayout>

私のJava

public class Certify_Info extends Activity {

    private static TextView tv2,tv3,tv5,tv6,tv4,tv1;
    private static LinearLayout l1,l2,l3,l4,l5,l6;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        // TODO Auto-generated method stub
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_certify__info);

        tv1=(TextView) findViewById(R.id.Information1);
        tv2=(TextView) findViewById(R.id.Information2);
        tv3=(TextView) findViewById(R.id.Information3);
        tv4=(TextView) findViewById(R.id.Information4);
        tv5=(TextView) findViewById(R.id.Information5);
        tv6=(TextView) findViewById(R.id.Information6); 

        l1=(LinearLayout) findViewById(R.id.layout1);
        l2=(LinearLayout) findViewById(R.id.layout2);
        l3=(LinearLayout) findViewById(R.id.layout3);
        l4=(LinearLayout) findViewById(R.id.layout4);
        l5=(LinearLayout) findViewById(R.id.layout5);
        l6=(LinearLayout) findViewById(R.id.layout6); 

        l2.setVisibility(View.GONE);
        l3.setVisibility(View.GONE); 
        l4.setVisibility(View.GONE); 
        l5.setVisibility(View.GONE);
        l6.setVisibility(View.GONE);

        tv1.setOnClickListener(new OnClickListener() {

            @Override
            public void onClick(View v) {
                // TODO Auto-generated method stub
                l2.setVisibility(View.GONE);
                l3.setVisibility(View.GONE); 
                l4.setVisibility(View.GONE); 
                l5.setVisibility(View.GONE);
                l6.setVisibility(View.GONE);
                l1.setVisibility(View.VISIBLE);
            }
        });
        tv2.setOnClickListener(new OnClickListener() {

            @Override
            public void onClick(View v) {
                // TODO Auto-generated method stub
                l1.setVisibility(View.GONE);
                l3.setVisibility(View.GONE); 
                l4.setVisibility(View.GONE); 
                l5.setVisibility(View.GONE);
                l6.setVisibility(View.GONE);
                l2.setVisibility(View.VISIBLE);
            }
        });
        tv3.setOnClickListener(new OnClickListener() {

            @Override
            public void onClick(View v) {
                // TODO Auto-generated method stub
                l1.setVisibility(View.GONE);
                l2.setVisibility(View.GONE);
                l4.setVisibility(View.GONE); 
                l5.setVisibility(View.GONE);
                l6.setVisibility(View.GONE);
                l3.setVisibility(View.VISIBLE);

            }
        });
        tv4.setOnClickListener(new OnClickListener() {

            @Override
            public void onClick(View v) {
                // TODO Auto-generated method stub
                l1.setVisibility(View.GONE);
                l2.setVisibility(View.GONE);
                l3.setVisibility(View.GONE); 
                l4.setVisibility(View.GONE); 
                l5.setVisibility(View.GONE);
                l6.setVisibility(View.GONE);
                l4.setVisibility(View.VISIBLE); 
            }
        });
        tv5.setOnClickListener(new OnClickListener() {

            @Override
            public void onClick(View v) {
                // TODO Auto-generated method stub
                l1.setVisibility(View.GONE);
                l2.setVisibility(View.GONE);
                l3.setVisibility(View.GONE); 
                l4.setVisibility(View.GONE); 
                l6.setVisibility(View.GONE);
                l5.setVisibility(View.VISIBLE); 
            }
        });
        tv6.setOnClickListener(new OnClickListener() {

            @Override
            public void onClick(View v) {
                // TODO Auto-generated method stub
                l1.setVisibility(View.GONE);
                l2.setVisibility(View.GONE);
                l3.setVisibility(View.GONE); 
                l4.setVisibility(View.GONE); 
                l5.setVisibility(View.GONE);
                l6.setVisibility(View.VISIBLE);
            }
        });

    }
}
javaandroidandroid-animation
185
arun

アニメーションを追加するには2つのことができます。まず、Androidにレイアウトの変更をアニメーション化させることができます。そうすることで、ビューの表示設定やビュー位置の変更など、レイアウトで何かを変更するたびに、Androidは自動的にフェード/トランジションアニメーションを作成します。そのセットを使用する

Android:animateLayoutChanges="true"

レイアウトのルートノードにあります。

あなたの2番目の選択肢は手動でアニメーションを追加することでしょう。これには、Android 3.0（Honeycomb）で導入された新しいアニメーションAPIを使用することをお勧めします。いくつか例を挙げます。

これはViewをフェードアウトさせます。

view.animate().alpha(0.0f);

これはそれをフェードインします。

view.animate().alpha(1.0f);

これはViewをその高さだけ下に移動します。

view.animate().translationY(view.getHeight());

これは、他の場所に移動された後、Viewを開始位置に戻します。

view.animate().translationY(0);

アニメーションの継続時間を設定するためにsetDuration()を使うこともできます。たとえば、これは2秒間でViewをフェードアウトさせます。

view.animate().alpha(0.0f).setDuration(2000);

そして、あなたは好きなだけ多くのアニメーションを組み合わせることができます。例えば、これはViewをフェードアウトさせ、同時に0.3秒かけてそれを下に移動させます。

view.animate()
        .translationY(view.getHeight())
        .alpha(0.0f)
        .setDuration(300);

また、リスナーをアニメーションに割り当てて、あらゆる種類のイベントに反応することもできます。アニメーションの開始時、終了時または繰り返し時などと同様です。抽象クラスAnimatorListenerAdapterを使用することで、AnimatorListenerのすべてのコールバックを一度に実装する必要はなく、必要なものだけを実装する必要があります。これにより、コードが読みやすくなります。例えば、次のコードはViewがフェードアウトして高さ分0.3秒（300ミリ秒）かけてアニメーションを下げ、アニメーションが終了するとその可視性がView.GONEに設定されます。

view.animate()
        .translationY(view.getHeight())
        .alpha(0.0f)
        .setDuration(300)
        .setListener(new AnimatorListenerAdapter() {
            @Override
            public void onAnimationEnd(Animator animation) {
                super.onAnimationEnd(animation);
                view.setVisibility(View.GONE);
            }
        });
582
Xaver Kapeller

this linkを確認してください。これはL2R、R2L、T2B、B2Tアニメーションのようなアニメーションを可能にします。

このコードは左から右へのアニメーションを示しています

TranslateAnimation animate = new TranslateAnimation(0,view.getWidth(),0,0);
animate.setDuration(500);
animate.setFillAfter(true);
view.startAnimation(animate);
view.setVisibility(View.GONE);

あなたがR2Lからそれをしたいならば、それから使用してください

TranslateAnimation animate = new TranslateAnimation(0,-view.getWidth(),0,0);

下から上へ

TranslateAnimation animate = new TranslateAnimation(0,0,0,view.getHeight());

そしてその逆。

22
NullPointerException

@Xaver Kapellerの答えに基づいて、新しいビューが画面に表示されたときにスクロールアニメーション（およびそれらを非表示にするアニメーション）を作成する方法を考え出しました。

この状態から行きます：

  • ボタン
  • 最後のボタン

に

  • ボタン
  • ボタン1
  • ボタン2
  • ボタン3
  • ボタン4
  • 最後のボタン

およびその逆。

したがって、ユーザーが最初のボタンをクリックすると、要素「ボタン1」、「ボタン2」、「ボタン3」、および「ボタン4」がフェードアニメーションを使用して表示され、要素「最後のボタン」が最後まで移動します。レイアウトの高さも変わり、スクロールビューを適切に使用できるようになります。

これはアニメーションで要素を表示するためのコードです：

private void showElements() {
    // Precondition
    if (areElementsVisible()) {
        Log.w(TAG, "The view is already visible. Nothing to do here");
        return;
    }

    // Animate the hidden linear layout as visible and set
    // the alpha as 0.0. Otherwise the animation won't be shown
    mHiddenLinearLayout.setVisibility(View.VISIBLE);
    mHiddenLinearLayout.setAlpha(0.0f);
    mHiddenLinearLayout
            .animate()
            .setDuration(ANIMATION_TRANSITION_TIME)
            .alpha(1.0f)
            .setListener(new AnimatorListenerAdapter() {
                @Override
                public void onAnimationEnd(Animator animation) {
                    super.onAnimationEnd(animation);
                    updateShowElementsButton();
                    mHiddenLinearLayout.animate().setListener(null);
                }
            })
    ;

    mLastButton
            .animate()
            .setDuration(ANIMATION_TRANSITION_TIME)
            .translationY(mHiddenLinearLayoutHeight);

    // Update the high of all the elements relativeLayout
    LayoutParams layoutParams = mAllElementsRelativeLayout.getLayoutParams();

    // TODO: Add vertical margins
    layoutParams.height = mLastButton.getHeight() + mHiddenLinearLayoutHeight;
}

これは、アニメーションの要素を隠すためのコードです。

private void hideElements() {
    // Precondition
    if (!areElementsVisible()) {
        Log.w(TAG, "The view is already non-visible. Nothing to do here");
        return;
    }

    // Animate the hidden linear layout as visible and set
    mHiddenLinearLayout
            .animate()
            .setDuration(ANIMATION_TRANSITION_TIME)
            .alpha(0.0f)
            .setListener(new AnimatorListenerAdapter() {
                @Override
                public void onAnimationEnd(Animator animation) {
                    Log.v(TAG, "Animation ended. Set the view as gone");
                    super.onAnimationEnd(animation);
                    mHiddenLinearLayout.setVisibility(View.GONE);
                    // Hack: Remove the listener. So it won't be executed when
                    // any other animation on this view is executed
                    mHiddenLinearLayout.animate().setListener(null);
                    updateShowElementsButton();
                }
            })
    ;

    mLastButton
            .animate()
            .setDuration(ANIMATION_TRANSITION_TIME)
            .translationY(0);

    // Update the high of all the elements relativeLayout
    LayoutParams layoutParams = mAllElementsRelativeLayout.getLayoutParams();

    // TODO: Add vertical margins
    layoutParams.height = mLastButton.getHeight();
}

アニメーションを隠す方法には簡単なハックがあります。アニメーションリスナmHiddenLinearLayoutでは、次のようにしてリスナ自体を削除する必要がありました。

mHiddenLinearLayout.animate().setListener(null);

これは、一度アニメーションリスナーがビューにアタッチされると、次にこのビューで任意のアニメーションが実行されるときにリスナーも実行されるためです。これはアニメーションリスナーのバグかもしれません。

プロジェクトのソースコードはGitHubにあります。 https://github.com/jiahaoliuliu/ViewsAnimated

ハッピーコーディング！

更新：ビューにアタッチされているリスナーは、アニメーションが終了した後に削除する必要があります。これはを使用して行われます

view.animate().setListener(null);
11
jiahao

Visibilityの変更をアニメーション化する最も簡単な方法はsupport（androidx）パッケージで利用可能なTransition APIを使うことです。 TransitionManager.beginDelayedTransitionメソッドを呼び出すだけで、ビューの可視性を変更できます。 Fade、Slideのようないくつかのデフォルト遷移があります。

private void toggle() {
    Transition transition = new Fade();
    transition.setDuration(600);
    transition.addTarget(R.id.image);

    TransitionManager.beginDelayedTransition(parent, transition);
    image.setVisibility(show ? View.VISIBLE : View.GONE);
}

parentはアニメーションビューの親ViewGroupです。結果：

enter image description here

これがSlideの遷移の結果です。

Transition transition = new Slide(Gravity.BOTTOM);

enter image description here

別のものが必要な場合は、カスタムトランジションを書くのが簡単です。これは私が 他の答え で書いたCircularRevealTransitionの例です。 CircularRevealアニメーションでビューの表示と非表示を切り替えます。

Transition transition = new CircularRevealTransition();

enter image description here

Android:animateLayoutChanges="true"オプションも同じことをします、それはちょうど 自動移行 を移行として使います。

9
ashakirov

この行をaxmlの親レイアウトに追加してみてください

 Android:animateLayoutChanges="true"
8
Ricardo Romo

このようにしてメニューを表示/非表示にすることができました。

MenuView.Java（FrameLayoutを拡張したもの）

private final int ANIMATION_DURATION = 500;

public void showMenu()
{
    setVisibility(View.VISIBLE);
    animate()
            .alpha(1f)
            .setDuration(ANIMATION_DURATION)
            .setListener(null);
}

private void hideMenu()
{
    animate()
            .alpha(0f)
            .setDuration(ANIMATION_DURATION)
            .setListener(new AnimatorListenerAdapter() {
                @Override
                public void onAnimationEnd(Animator animation) {
                    setVisibility(View.GONE);
                }
            });
}

出典

5
Nelson Almendra