android - Android - 带有过渡动画的 TabActivity

Question

我正在尝试向我的 TabActivty 添加动画。例如，当用户选择第二个选项卡时，我希望新活动来自右侧。当用户选择第一个选项卡时，我希望活动来自左侧。

我找到了如何添加一个动画，但我想再添加一个。这是我正在使用的代码：

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

我怎样才能做到这一点？

谢谢。

问候。

五。

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

1

您必须使用String tabId并检查if它tabId==firstTab，然后从右侧放置左侧else动画。

于 2012-04-04T10:27:16.377 回答

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 来捕捉手势（并且在确定手势是否为滑动动作时可能会考虑不同的屏幕密度）

对不起，答案很长，但我希望它有所帮助:)

android - Android - 带有过渡动画的 TabActivity

4 回答 4

Related

Reference