android - Android - トランジションアニメーションを使用した TabActivity

Question

TabActivty にアニメーションを追加しようとしています。たとえば、ユーザーが 2 番目のタブを選択すると、新しいアクティビティが右側から来るようにします。ユーザーが最初のタブを選択すると、アクティビティが左から来ます。

アニメーションを 1 つ追加する方法を見つけましたが、もう一度追加したいと思います。私が使用しているコードは次のとおりです。

public Animation inFromRightAnimation()
{
    Animation inFromRight = new TranslateAnimation(
            Animation.RELATIVE_TO_PARENT, +1.0f,
            Animation.RELATIVE_TO_PARENT, 0.0f,
            Animation.RELATIVE_TO_PARENT, 0.0f,
            Animation.RELATIVE_TO_PARENT, 0.0f);
    inFromRight.setDuration(240);
    inFromRight.setInterpolator(new AccelerateInterpolator());
    return inFromRight;
}

と

getTabHost().setOnTabChangedListener(new OnTabChangeListener() {
       public void onTabChanged(String tabId)
       {
           View currentView = getTabHost().getCurrentView();
           currentView.setAnimation( inFromRightAnimation() );
       }
});

どうやってやるの？

ありがとう。

よろしく。

V.

score 14 · Accepted Answer

これは正しく動作します:

getTabHost().setOnTabChangedListener(new OnTabChangeListener() {
     public void onTabChanged(String tabId)
     {
            View currentView = getTabHost().getCurrentView();
            if (getTabHost().getCurrentTab() > currentTab)
            {
                currentView.setAnimation( inFromRightAnimation() );
            }
            else
            {
                currentView.setAnimation( outToRightAnimation() );
            }

            currentTab = getTabHost().getCurrentTab();
     }
});

そしてアニメーション：

public Animation inFromRightAnimation()
{
    Animation inFromRight = new TranslateAnimation(
            Animation.RELATIVE_TO_PARENT, +1.0f,
            Animation.RELATIVE_TO_PARENT, 0.0f,
            Animation.RELATIVE_TO_PARENT, 0.0f,
            Animation.RELATIVE_TO_PARENT, 0.0f);
    inFromRight.setDuration(240);
    inFromRight.setInterpolator(new AccelerateInterpolator());
    return inFromRight;
}

public Animation outToRightAnimation()
{
    Animation outtoLeft = new TranslateAnimation(
            Animation.RELATIVE_TO_PARENT, -1.0f,
            Animation.RELATIVE_TO_PARENT, 0.0f,
            Animation.RELATIVE_TO_PARENT, 0.0f,
            Animation.RELATIVE_TO_PARENT, 0.0f);
    outtoLeft.setDuration(240);
    outtoLeft.setInterpolator(new AccelerateInterpolator());
    return outtoLeft;
}

score 5 · Accepted Answer

共有したいこのコードに基づいて、カスタム OnTabChangeListener を作成しました。うまくいけば、誰かがそれを使用できます:)。元のコードは Vomenki の功績によるものです。

package net.danielkvist.receipttracker.listener;

import android.view.View;
import android.view.animation.AccelerateInterpolator;
import android.view.animation.Animation;
import android.view.animation.TranslateAnimation;
import android.widget.TabHost;
import android.widget.TabHost.OnTabChangeListener;

/**
 * A custom OnTabChangeListener that uses the TabHost its related to to fetch information about the current and previous
 * tabs. It uses this information to perform some custom animations that slide the tabs in and out from left and right.
 * 
 * @author Daniel Kvist
 * 
 */
public class AnimatedTabHostListener implements OnTabChangeListener
{

    private static final int ANIMATION_TIME = 240;
    private TabHost tabHost;
    private View previousView;
    private View currentView;
    private int currentTab;

    /**
     * Constructor that takes the TabHost as a parameter and sets previousView to the currentView at instantiation
     * 
     * @param tabHost
     */
    public AnimatedTabHostListener(TabHost tabHost)
    {
        this.tabHost = tabHost;
        this.previousView = tabHost.getCurrentView();
    }

    /**
     * When tabs change we fetch the current view that we are animating to and animate it and the previous view in the
     * appropriate directions.
     */
    @Override
    public void onTabChanged(String tabId)
    {

        currentView = tabHost.getCurrentView();
        if (tabHost.getCurrentTab() > currentTab)
        {
            previousView.setAnimation(outToLeftAnimation());
            currentView.setAnimation(inFromRightAnimation());
        }
        else
        {
            previousView.setAnimation(outToRightAnimation());
            currentView.setAnimation(inFromLeftAnimation());
        }
        previousView = currentView;
        currentTab = tabHost.getCurrentTab();

    }

    /**
     * Custom animation that animates in from right
     * 
     * @return Animation the Animation object
     */
    private Animation inFromRightAnimation()
    {
        Animation inFromRight = new TranslateAnimation(Animation.RELATIVE_TO_PARENT, 1.0f, Animation.RELATIVE_TO_PARENT, 0.0f,
                Animation.RELATIVE_TO_PARENT, 0.0f, Animation.RELATIVE_TO_PARENT, 0.0f);
        return setProperties(inFromRight);
    }

    /**
     * Custom animation that animates out to the right
     * 
     * @return Animation the Animation object
     */
    private Animation outToRightAnimation()
    {
        Animation outToRight = new TranslateAnimation(Animation.RELATIVE_TO_PARENT, 0.0f, Animation.RELATIVE_TO_PARENT, 1.0f,
                Animation.RELATIVE_TO_PARENT, 0.0f, Animation.RELATIVE_TO_PARENT, 0.0f);
        return setProperties(outToRight);
    }

    /**
     * Custom animation that animates in from left
     * 
     * @return Animation the Animation object
     */
    private Animation inFromLeftAnimation()
    {
        Animation inFromLeft = new TranslateAnimation(Animation.RELATIVE_TO_PARENT, -1.0f, Animation.RELATIVE_TO_PARENT, 0.0f,
                Animation.RELATIVE_TO_PARENT, 0.0f, Animation.RELATIVE_TO_PARENT, 0.0f);
        return setProperties(inFromLeft);
    }

    /**
     * Custom animation that animates out to the left
     * 
     * @return Animation the Animation object
     */
    private Animation outToLeftAnimation()
    {
        Animation outtoLeft = new TranslateAnimation(Animation.RELATIVE_TO_PARENT, 0.0f, Animation.RELATIVE_TO_PARENT, -1.0f,
                Animation.RELATIVE_TO_PARENT, 0.0f, Animation.RELATIVE_TO_PARENT, 0.0f);
        return setProperties(outtoLeft);
    }

    /**
     * Helper method that sets some common properties
     * @param animation the animation to give common properties
     * @return the animation with common properties
     */
    private Animation setProperties(Animation animation)
    {
        animation.setDuration(ANIMATION_TIME);
        animation.setInterpolator(new AccelerateInterpolator());
        return animation;
    }
}

score 1 · Accepted Answer

必要に応じて、Android サポートパッケージを使用できます - http://developer.android.com/sdk/compatibility-library.html

フラグメントを使用するようにアクティビティを変更して、YouTube アプリと同じようにタブにトランジションアニメーションを表示することができます。これを実装する方法のサンプルコードを次に示します - http://developer.android.com/sdk/compatibility-library.html

編集：サポートパッケージを使用したくない場合は、この実装が役立つかもしれません

プライベートクラス MyGestureDetector は SimpleOnGestureListener を拡張します {

      private static final int SWIPE_MIN_DISTANCE = 120;
      private static final int SWIPE_MAX_OFF_PATH = 250;
      private static final int SWIPE_THRESHOLD_VELOCITY = 200;

      public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) {
        //get density   
          final DisplayMetrics metrics = getResources().getDisplayMetrics();
          final float density = metrics.density;
       //System.out.println(" in onFling() :: ");
          //off path
          if (Math.abs(e1.getY() - e2.getY()) > density*SWIPE_MAX_OFF_PATH)
              return false;
          //fling from right to left
          if (e1.getX() - e2.getX() > density*SWIPE_MIN_DISTANCE && Math.abs(velocityX) > density*SWIPE_THRESHOLD_VELOCITY) {
              //if the first tab is selected
              if(currentSelection.equalsIgnoreCase(getString(R.string.tab_details_info))) {
                  //switch to second tab and save current selection
                  tabs.setCurrentTab(1);
                  currentSelection = tabs.getCurrentTabTag();
              }
              //if the second tab is selected
              else if(currentSelection.equalsIgnoreCase(getString(R.string.tab_details_details))) {
                  //switch to second tab and save current selection
                  tabs.setCurrentTab(2);
                  currentSelection = tabs.getCurrentTabTag();
              }
          }
          //fling from left to right
          else if (e2.getX() - e1.getX() > density*SWIPE_MIN_DISTANCE && Math.abs(velocityX) > density*SWIPE_THRESHOLD_VELOCITY) {

              //if the second tab is selected
              if(currentSelection.equalsIgnoreCase(getString(R.string.tab_details_details))) {
                  //switch to second tab and save current selection
                  tabs.setCurrentTab(0);
                  currentSelection = tabs.getCurrentTabTag();
              }
              //if the third tab is selected
              else if(currentSelection.equalsIgnoreCase(getString(R.string.tab_details_company))) {
                  //switch to second tab and save current selection
                  tabs.setCurrentTab(1);
                  currentSelection = tabs.getCurrentTabTag();
              }
          }
          return super.onFling(e1, e2, velocityX, velocityY);
      }
}

次に、タブを変更したリスナーで、適切なアニメーションをロードするだけです。これは、ジェスチャの前にどちらが選択され、後で切り替えているかがわかっているためです。

        @Override
        public void onTabChanged(String tabId) {



            //if the first tab is selected
            if(currentSelection.equalsIgnoreCase(getResources().getString(R.string.tab_details_info))) {
                //if we switch to second
                if(tabId.equalsIgnoreCase(getResources().getString(R.string.tab_details_details))) {
                    linearInfo.setAnimation(AnimationUtils.loadAnimation(getApplicationContext(), R.anim.push_left_out));
                    linearDetails.setAnimation(AnimationUtils.loadAnimation(getApplicationContext(), R.anim.push_left_in));
                    linearCompany.setAnimation(null);
                }
                //if switch to third
                else if(tabId.equalsIgnoreCase(getResources().getString(R.string.tab_details_company))) {
                    linearInfo.setAnimation(AnimationUtils.loadAnimation(getApplicationContext(), R.anim.push_left_out));
                    linearDetails.setAnimation(null);
                    linearCompany.setAnimation(AnimationUtils.loadAnimation(getApplicationContext(), R.anim.push_left_in));
                }
            }
            //if the second tab is selected
            else if(currentSelection.equalsIgnoreCase(getResources().getString(R.string.tab_details_details))) {
                //if we switch to first
                if(tabId.equalsIgnoreCase(getResources().getString(R.string.tab_details_info))) {
                    linearInfo.setAnimation(AnimationUtils.loadAnimation(getApplicationContext(), R.anim.push_right_in));
                    linearDetails.setAnimation(AnimationUtils.loadAnimation(getApplicationContext(), R.anim.push_right_out));
                    linearCompany.setAnimation(null);
                }
                //if switch to third
                else if(tabId.equalsIgnoreCase(getResources().getString(R.string.tab_details_company))) {
                    linearInfo.setAnimation(null);
                    linearDetails.setAnimation(AnimationUtils.loadAnimation(getApplicationContext(), R.anim.push_left_out));
                    linearCompany.setAnimation(AnimationUtils.loadAnimation(getApplicationContext(), R.anim.push_left_in));
                }
            }
            //if the third tab is selected
            else if(currentSelection.equalsIgnoreCase(getResources().getString(R.string.tab_details_company))) {
                //if we switch to first
                if(tabId.equalsIgnoreCase(getResources().getString(R.string.tab_details_info))) {
                    linearInfo.setAnimation(AnimationUtils.loadAnimation(getApplicationContext(), R.anim.push_right_in));
                    linearDetails.setAnimation(null);
                    linearCompany.setAnimation(AnimationUtils.loadAnimation(getApplicationContext(), R.anim.push_right_out));
                }
                //if switch to second
                else if(tabId.equalsIgnoreCase(getResources().getString(R.string.tab_details_details))) {
                    linearInfo.setAnimation(null);
                    linearDetails.setAnimation(AnimationUtils.loadAnimation(getApplicationContext(), R.anim.push_right_in));
                    linearCompany.setAnimation(AnimationUtils.loadAnimation(getApplicationContext(), R.anim.push_right_out));
                }
            }

            currentSelection = tabId;
        }
    };

また、カスタムジェスチャ検出器で onTouchListener をオーバーライドしてジェスチャをキャッチする必要があります (また、ジェスチャがスワイプアクションであるかどうかを判断するときに、異なる画面密度を考慮する必要があります)。

長い回答で申し訳ありませんが、お役に立てば幸いです:)

score 1 · Accepted Answer

これを使用String tabIdしてチェックしてから、左からアニメーションを右からアニメーションを配置する必要があります。iftabId==firstTabelse

android - Android - トランジション アニメーションを使用した TabActivity

4 に答える 4

Related

Reference

android - Android - トランジションアニメーションを使用した TabActivity