Android

HOME
Android
【AndroidのViewを制する】 ViewAnimatorを使いこなしてViewを切り替える

2017年4月20日 / 最終更新日 : 2017年4月20日 yona Android

【AndroidのViewを制する】 ViewAnimatorを使いこなしてViewを切り替える

Pocket

[`yahoo` not found]

今回、紹介するViewAnimatorはFrameLayoutを継承していて、自身のViewツリーにある複数の子Viewを切り替えて表示することができます。
また、切り替える時にアニメーションを付けることができます。

ViewAnimator#addViewを使ってViewを追加する

ViewAnimatorはFrameLayoutを継承したクラスのため、Viewを追加するaddViewはたくさんあります。
ViewAnimatorで追加されたaddViewは下記の引数を持ちます。

View child : 追加する子Viewを設定する
int index : 何番目の子Viewとして追加するかを指定する
ViewGroup.LayoutParams params : 子Viewに適用するレイアウトパラムス

    // ViewAnimatorをインスタンス化
    final ViewAnimator viewAnimator = new ViewAnimator(this);
    // TextViewを5つ追加する
    for (int i = 0; i < 5; i++) {
        FrameLayout.LayoutParams layoutParams =
                new FrameLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT , ViewGroup.LayoutParams.MATCH_PARENT);
        layoutParams.setMargins(50,50,50,50);
        TextView textView = new TextView(this);
        textView.setText((i + 1) + "個目のTextView");
        textView.setTextSize(30);
        textView.setGravity(Gravity.CENTER);
        // TextViewを追加する
        viewAnimator.addView(textView, 0 , layoutParams);
    }
    // ViewAnimatorを設定したViewを表示する。
    setContentView(viewAnimator);

ViewAnimator#showPreviousとViewAnimator#showNextを使って子Viewを切り替える

ViewAnimator#showPreviousは現在表示している子Viewの前にある子Viewに切り替える、先頭のViewが表示されている場合は、末尾のViewが表示されます。
ViewAnimator#showNextは現在表示している子Viewの後にある子Viewに切り替える、末尾のViewが表示されている場合は、先頭のViewが表示されます。

    LinearLayout linearLayout = new LinearLayout(this);
    linearLayout.setOrientation(LinearLayout.VERTICAL);
    // ViewAnimatorをインスタンス化
    final ViewAnimator viewAnimator = new ViewAnimator(this);
    // TextViewを5つ追加する
    for (int i = 0; i < 5; i++) {
        FrameLayout.LayoutParams layoutParams =
                new FrameLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT , ViewGroup.LayoutParams.MATCH_PARENT);
        layoutParams.setMargins(50,50,50,50);
        TextView textView = new TextView(this);
        textView.setText((i + 1) + "個目のTextView");
        textView.setTextSize(30);
        textView.setGravity(Gravity.CENTER);
        // TextViewを追加する
        viewAnimator.addView(textView, i , layoutParams);
    }

    // showNextを使って後の子Viewに切り替える
    Button nextButton = new Button(this);
    nextButton.setText("次へ");
    nextButton.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            viewAnimator.showNext();
        }
    });

    // showPreviousを使って前の子Viewに切り替える
    Button previousButton = new Button(this);
    previousButton.setText("前へ");
    previousButton.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            viewAnimator.showPrevious();
        }
    });

    linearLayout.addView(viewAnimator);
    linearLayout.addView(nextButton);
    linearLayout.addView(previousButton);

    // ViewAnimatorを設定したViewを表示する。
    setContentView(linearLayout);

ViewAnimator#setOutAnimationとViewAnimator#setInAnimationでアニメーションを追加する ViewAnimator#getOutAnimationとViewAnimator#getInAnimationでアニメーションを取得する

ViewAnimator#setOutAnimationを使うことで現在表示されている子Viewが切り替わる時のアニメーションを設定することができます。
ViewAnimator#setInAnimationを使うことで次に表示される子Viewが切り替わる時のアニメーションを設定することができます。
ViewAnimator#getOutAnimationを使うことで現在表示されている子Viewに設定されているアニメーションを取得することができます。
ViewAnimator#getInAnimationを使うことで次に表示される子Viewに設定されているアニメーションを取得することができます。

    LinearLayout linearLayout = new LinearLayout(this);
    linearLayout.setOrientation(LinearLayout.VERTICAL);
    // ViewAnimatorをインスタンス化
    final ViewAnimator viewAnimator = new ViewAnimator(this);
    // TextViewを5つ追加する
    for (int i = 0; i < 5; i++) {
        FrameLayout.LayoutParams layoutParams =
                new FrameLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT , ViewGroup.LayoutParams.MATCH_PARENT);
        layoutParams.setMargins(50,50,50,50);
        TextView textView = new TextView(this);
        textView.setText((i + 1) + "個目のTextView");
        textView.setTextSize(30);
        textView.setGravity(Gravity.CENTER);
        // TextViewを追加する
        viewAnimator.addView(textView, i , layoutParams);
    }

    // showNextを使って後の子Viewに切り替える
    Button nextButton = new Button(this);
    nextButton.setText("次へ");
    nextButton.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            viewAnimator.showNext();
        }
    });

    // フェードアウトアニメーションを作成
    AlphaAnimation outAnimation = new AlphaAnimation(1,0);
    outAnimation.setDuration(500);
    // フェードアウトアニメーションを設定する
    viewAnimator.setOutAnimation(outAnimation);

    // フェードインアニメーションを作成
    AlphaAnimation inAnimation = new AlphaAnimation(0,1);
    inAnimation.setDuration(500);
    inAnimation.setStartOffset(500);
    // フェードインアニメーションを設定する
    viewAnimator.setInAnimation(inAnimation);

    linearLayout.addView(viewAnimator);
    linearLayout.addView(nextButton);

    // ViewAnimatorを設定したViewを表示する。
    setContentView(linearLayout);

ViewAnimator#setDisplayedChildを使ってViewを切り替える

ViewAnimator#setDisplayedChildは子Viewのindexを指定して、子Viewを切り替えます。

    LinearLayout linearLayout = new LinearLayout(this);
    linearLayout.setOrientation(LinearLayout.VERTICAL);
    // ViewAnimatorをインスタンス化
    final ViewAnimator viewAnimator = new ViewAnimator(this);
    // TextViewを5つ追加する
    for (int i = 0; i < 5; i++) {
        FrameLayout.LayoutParams layoutParams =
                new FrameLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT , ViewGroup.LayoutParams.MATCH_PARENT);
        layoutParams.setMargins(50,50,50,50);
        TextView textView = new TextView(this);
        textView.setText((i + 1) + "個目のTextView");
        textView.setTextSize(30);
        textView.setGravity(Gravity.CENTER);
        // TextViewを追加する
        viewAnimator.addView(textView, i , layoutParams);
    }

    // showNextを使って前の子Viewに切り替える
    Button nextButton = new Button(this);
    nextButton.setText("次へ");
    nextButton.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            viewAnimator.showNext();
        }
    });

    // setDisplayedChildを使って先頭の子Viewに切り替える
    Button firstViewButton = new Button(this);
    firstViewButton.setText("最初のViewへ");
    firstViewButton.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            viewAnimator.setDisplayedChild(0);
        }
    });

    linearLayout.addView(viewAnimator);
    linearLayout.addView(nextButton);
    linearLayout.addView(firstViewButton);

    // ViewAnimatorを設定したViewを表示する。
    setContentView(linearLayout);

ViewAnimator#getCurrentViewを使ってViewを取得する

ViewAnimator#getCurrentViewは現在表示されている子Viewインスタンスを返却します。

    LinearLayout linearLayout = new LinearLayout(this);
    linearLayout.setOrientation(LinearLayout.VERTICAL);
    // ViewAnimatorをインスタンス化
    final ViewAnimator viewAnimator = new ViewAnimator(this);
    // TextViewを5つ追加する
    for (int i = 0; i < 5; i++) {
        FrameLayout.LayoutParams layoutParams =
                new FrameLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT , ViewGroup.LayoutParams.MATCH_PARENT);
        layoutParams.setMargins(50,50,50,50);
        TextView textView = new TextView(this);
        textView.setText((i + 1) + "個目のTextView");
        textView.setTextSize(30);
        textView.setGravity(Gravity.CENTER);
        // TextViewを追加する
        viewAnimator.addView(textView, i , layoutParams);
    }

    // showNextを使って前の子Viewに切り替える
    Button nextButton = new Button(this);
    nextButton.setText("次へ");
    nextButton.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            viewAnimator.showNext();
        }
    });

    // getCurrentViewを使って現在表示されている子Viewのテキストを表示する
    Button currentTextButton = new Button(this);
    currentTextButton.setText("現在のTextViewの文字列を表示");
    currentTextButton.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            Toast.makeText(ViewAnimatorActivity.this, "テキスト : " + ((TextView)viewAnimator.getCurrentView()).getText().toString() , Toast.LENGTH_SHORT).show();
        }
    });

    linearLayout.addView(viewAnimator);
    linearLayout.addView(nextButton);
    linearLayout.addView(currentTextButton);

    // ViewAnimatorを設定したViewを表示する。
    setContentView(linearLayout);

ViewAnimator#getDisplayedChildを使ってインデックスを取得する

ViewAnimator#getDisplayedChildは現在表示されている子Viewのインデックスを返却します。

    LinearLayout linearLayout = new LinearLayout(this);
    linearLayout.setOrientation(LinearLayout.VERTICAL);
    // ViewAnimatorをインスタンス化
    final ViewAnimator viewAnimator = new ViewAnimator(this);
    // TextViewを5つ追加する
    for (int i = 0; i < 5; i++) {
        FrameLayout.LayoutParams layoutParams =
                new FrameLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT , ViewGroup.LayoutParams.MATCH_PARENT);
        layoutParams.setMargins(50,50,50,50);
        TextView textView = new TextView(this);
        textView.setText((i + 1) + "個目のTextView");
        textView.setTextSize(30);
        textView.setGravity(Gravity.CENTER);
        // TextViewを追加する
        viewAnimator.addView(textView, i , layoutParams);
    }

    // showNextを使って前の子Viewに切り替える
    Button nextButton = new Button(this);
    nextButton.setText("次へ");
    nextButton.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            viewAnimator.showNext();
            Toast.makeText(ViewAnimatorActivity.this, "getDisplayedChild : " + viewAnimator.getDisplayedChild() , Toast.LENGTH_SHORT).show();
        }
    });

    linearLayout.addView(viewAnimator);
    linearLayout.addView(nextButton);

    // ViewAnimatorを設定したViewを表示する。
    setContentView(linearLayout);

ViewAnimator#removeAllViewsを使ってViewを除去する

ViewAnimator#removeAllViewsは子Viewをすべて除去します。

    LinearLayout linearLayout = new LinearLayout(this);
    linearLayout.setOrientation(LinearLayout.VERTICAL);
    // ViewAnimatorをインスタンス化
    final ViewAnimator viewAnimator = new ViewAnimator(this);
    // TextViewを5つ追加する
    for (int i = 0; i < 5; i++) {
        FrameLayout.LayoutParams layoutParams =
                new FrameLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT , ViewGroup.LayoutParams.MATCH_PARENT);
        layoutParams.setMargins(50,50,50,50);
        TextView textView = new TextView(this);
        textView.setText((i + 1) + "個目のTextView");
        textView.setTextSize(30);
        textView.setGravity(Gravity.CENTER);
        // TextViewを追加する
        viewAnimator.addView(textView, i , layoutParams);
    }

    // showNextを使って後の子Viewに切り替える
    Button nextButton = new Button(this);
    nextButton.setText("次へ");
    nextButton.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            viewAnimator.showNext();
        }
    });

    // showPreviousを使って前の子Viewに切り替える
    Button previousButton = new Button(this);
    previousButton.setText("前へ");
    previousButton.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            viewAnimator.showPrevious();
        }
    });

    linearLayout.addView(viewAnimator);
    linearLayout.addView(nextButton);
    linearLayout.addView(previousButton);

    // ViewAnimatorを設定したViewを表示する。
    setContentView(linearLayout);
    viewAnimator.removeAllViews();

ViewAnimator#removeViewとViewAnimator#removeViewInLayoutを使ってViewを除去する

ViewAnimator#removeViewとViewAnimator#removeViewInLayoutは子Viewインスタンスを指定してViewを除去します。
この二つのメソッドの違いはわかりませんでした。

    LinearLayout linearLayout = new LinearLayout(this);
    linearLayout.setOrientation(LinearLayout.VERTICAL);
    // ViewAnimatorをインスタンス化
    final ViewAnimator viewAnimator = new ViewAnimator(this);
    // TextViewを5つ追加する
    TextView textView = null;
    for (int i = 0; i < 5; i++) {
        FrameLayout.LayoutParams layoutParams =
                new FrameLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT , ViewGroup.LayoutParams.MATCH_PARENT);
        layoutParams.setMargins(50,50,50,50);
        TextView textView = new TextView(this);
        textView.setText((i + 1) + "個目のTextView");
        textView.setTextSize(30);
        textView.setGravity(Gravity.CENTER);
        // TextViewを追加する
        viewAnimator.addView(textView, i , layoutParams);
    }
    // Viewを除去する
    viewAnimator.removeView(textView);

    // showNextを使って後の子Viewに切り替える
    Button nextButton = new Button(this);
    nextButton.setText("次へ");
    nextButton.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            viewAnimator.showNext();
        }
    });

    // showPreviousを使って前の子Viewに切り替える
    Button previousButton = new Button(this);
    previousButton.setText("前へ");
    previousButton.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            viewAnimator.showPrevious();
        }
    });

    linearLayout.addView(viewAnimator);
    linearLayout.addView(nextButton);
    linearLayout.addView(previousButton);

    // ViewAnimatorを設定したViewを表示する。
    setContentView(linearLayout);

ViewAnimator#removeViewAtを使ってViewを除去する

ViewAnimator#removeViewAtは子Viewのインデックスを指定してViewを除去します。

    LinearLayout linearLayout = new LinearLayout(this);
    linearLayout.setOrientation(LinearLayout.VERTICAL);
    // ViewAnimatorをインスタンス化
    final ViewAnimator viewAnimator = new ViewAnimator(this);
    // TextViewを5つ追加する
    for (int i = 0; i < 5; i++) {
        FrameLayout.LayoutParams layoutParams =
                new FrameLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT , ViewGroup.LayoutParams.MATCH_PARENT);
        layoutParams.setMargins(50,50,50,50);
        TextView textView = new TextView(this);
        textView.setText((i + 1) + "個目のTextView");
        textView.setTextSize(30);
        textView.setGravity(Gravity.CENTER);
        // TextViewを追加する
        viewAnimator.addView(textView, i , layoutParams);
    }

    // showNextを使って後の子Viewに切り替える
    Button nextButton = new Button(this);
    nextButton.setText("次へ");
    nextButton.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            viewAnimator.showNext();
        }
    });

    // showPreviousを使って前の子Viewに切り替える
    Button previousButton = new Button(this);
    previousButton.setText("前へ");
    previousButton.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            viewAnimator.showPrevious();
        }
    });

    linearLayout.addView(viewAnimator);
    linearLayout.addView(nextButton);
    linearLayout.addView(previousButton);

    // ViewAnimatorを設定したViewを表示する。
    setContentView(linearLayout);
    // 0番目の子Viewを除去
    viewAnimator.removeViewAt(0);

ViewAnimator#removeViewsとViewAnimator#removeViewsInLayoutを使ってViewを除去する

ViewAnimator#removeViewsとViewAnimator#removeViewsInLayoutは開始インデックスと削除する個数を引数に渡します。
この二つのメソッドの違いはわかりませんでした。

    LinearLayout linearLayout = new LinearLayout(this);
    linearLayout.setOrientation(LinearLayout.VERTICAL);
    // ViewAnimatorをインスタンス化
    final ViewAnimator viewAnimator = new ViewAnimator(this);
    // TextViewを5つ追加する
    for (int i = 0; i < 5; i++) {
        FrameLayout.LayoutParams layoutParams =
                new FrameLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT , ViewGroup.LayoutParams.MATCH_PARENT);
        layoutParams.setMargins(50,50,50,50);
        TextView textView = new TextView(this);
        textView.setText((i + 1) + "個目のTextView");
        textView.setTextSize(30);
        textView.setGravity(Gravity.CENTER);
        // TextViewを追加する
        viewAnimator.addView(textView, i , layoutParams);
    }

    // showNextを使って後の子Viewに切り替える
    Button nextButton = new Button(this);
    nextButton.setText("次へ");
    nextButton.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            viewAnimator.showNext();
        }
    });

    // showPreviousを使って前の子Viewに切り替える
    Button previousButton = new Button(this);
    previousButton.setText("前へ");
    previousButton.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            viewAnimator.showPrevious();
        }
    });

    linearLayout.addView(viewAnimator);
    linearLayout.addView(nextButton);
    linearLayout.addView(previousButton);

    // ViewAnimatorを設定したViewを表示する。
    setContentView(linearLayout);
    // 0番目から2個のViewを削除する
    viewAnimator.removeViews(0,2);

ViewAnimator#getAnimateFirstViewとViewAnimator#setAnimateFirstView

ViewAnimator#setAnimateFirstViewは一つ目の子Viewが追加された時にアニメーションを行うかどうかを設定できます。
ViewAnimator#getAnimateFirstViewは一つ目の子Viewが追加された時にアニメーションを行うかどうかを取得できます。

    LinearLayout linearLayout = new LinearLayout(this);
    linearLayout.setOrientation(LinearLayout.VERTICAL);
    // ViewAnimatorをインスタンス化
    final ViewAnimator viewAnimator = new ViewAnimator(this);
    // アニメーションを有効にする
    viewAnimator.setAnimateFirstView(true);
    // フェードアウトアニメーションを作成
    AlphaAnimation outAnimation = new AlphaAnimation(1,0);
    outAnimation.setDuration(500);
    // フェードアウトアニメーションを設定する
    viewAnimator.setOutAnimation(outAnimation);

    // フェードインアニメーションを作成
    AlphaAnimation inAnimation = new AlphaAnimation(0,1);
    inAnimation.setDuration(500);
    inAnimation.setStartOffset(500);
    // フェードインアニメーションを設定する
    viewAnimator.setInAnimation(inAnimation);

    linearLayout.addView(viewAnimator);
    // ViewAnimatorを設定したViewを表示する。
    setContentView(linearLayout);
    linearLayout.postDelayed(new Runnable() {
        @Override
        public void run() {
            // TextViewを5つ追加する
            TextView textView = null;
            for (int i = 0; i < 5; i++) {
                FrameLayout.LayoutParams layoutParams =
                        new FrameLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT , ViewGroup.LayoutParams.MATCH_PARENT);
                layoutParams.setMargins(50,50,50,50);
                textView = new TextView(this);
                textView.setText((i + 1) + "個目のTextView");
                textView.setTextSize(30);
                textView.setGravity(Gravity.CENTER);
                viewAnimator.addView(textView, i , layoutParams);
            }
        }
    },1000);

カテゴリー: Android

タグ: Android View ViewAnimator