Android ViewSwitcher 的使用

ViewSwitcher

ViewSwitcher 代表了视图切换组件, 本身继承了FrameLayout ,可以将多个View叠在一起 ,每次只显示一个组件.当程序控制从一个View切换到另个View时,ViewSwitcher 支持指定动画效果。

ViewAnimator是一个基类，它继承了 FrameLayout，因此它表现出FrameLayout的特征，可以将多个View组件叠在一起。 ViewAnimator额外增加的功能正如它的名字所暗示的一样，ViewAnimator可以在View切换时表现出动画效果。

iewAnimator及其子类的继承关系图如下图所示：

image.png

ViewAnimator
ViewAnimator及其子类也是一组非常重要的UI组件，这种组件的主要功能是增加动画效果，从而使界面更加炫。使用ViewAnimator 时可以指定如下常见XML属性。

android:animateFirstView：设置ViewAnimator显示第一个View组件时是否使用动画。
android:inAnimation：设置ViewAnimator显示组件时所使用的动画。
android:outAnimation：设置ViewAnimator隐藏组件时所使用的动画。

ViewSwitcher继承ViewAnimator，主要用于视图的切换：

public class ViewSwitcher extends ViewAnimator {

}

ViewSwitcher重写了addView(View, int, ViewGroup.LayoutParams)方法，使其子控件不超过2个：

   /**
     * {@inheritDoc}
     *
     * @throws IllegalStateException if this switcher already contains two children
     */
    @Override
    public void addView(View child, int index, ViewGroup.LayoutParams params) {
        if (getChildCount() >= 2) {
            throw new IllegalStateException("Can't add more than 2 views to a ViewSwitcher");
        }
        super.addView(child, index, params);
    }

通过配置属性指定切换动画：

android:inAnimation指定进入时动画
android:outAnimation指定退出时动画

调用ViewSwitcher的showNext()和showPrevious()来实现视图的切换。

setFactory设置视图

ViewSwitcher中setFactory(ViewFactory)方法设置了子视图，调用obtainView()方法添加了两个子控件。

public void setFactory(ViewFactory factory) {
    mFactory = factory;
    obtainView();
    obtainView();
}

private View obtainView() {
    View child = mFactory.makeView();
    LayoutParams lp = (LayoutParams) child.getLayoutParams();
    if (lp == null) {
        lp = new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT);
    }
    addView(child, lp);
    return child;
}

    public interface ViewFactory {
        /**
         * Creates a new {@link android.view.View} to be added in a
         * {@link android.widget.ViewSwitcher}.
         *
         * @return a {@link android.view.View}
         */
        View makeView();
    }

ViewSwitcher的使用

切换图片案例：

public class ViewSwitcherDemoActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_view_switcher_demo);

        ActivityViewSwitcherDemoBinding binding = DataBindingUtil.setContentView(this, R.layout.activity_view_switcher_demo);

        binding.btnNext.setOnClickListener(v -> {
            binding.viewSwitcher.showNext();
        });
    }
}

进入动画anim_enter_from_bottom.xml

退出动画anim_exit_to_top.xml

动态给ViewSwitcher添加子View

       //动态给ViewSwitcher添加子View
        binding.viewSwitcher.setFactory(() -> {
            ImageView iv = new ImageView(ViewSwitcherDemoActivity.this);
            iv.setImageResource(R.drawable.pic1);
            iv.setScaleType(ImageView.ScaleType.FIT_XY);
            iv.setLayoutParams(new FrameLayout.LayoutParams(-1, Utils.dip2px(200)));
            return iv;
        });

        binding.btnNext.setOnClickListener(v -> {
            if (binding.viewSwitcher.getDisplayedChild() == 0) {
                ImageView iv = (ImageView) binding.viewSwitcher.getChildAt(1);
                iv.setImageResource(R.drawable.pic2);
                binding.viewSwitcher.showNext();
            } else {
                binding.viewSwitcher.showPrevious();
            }
        });

多个视图切换

有多个视图需要时，需要自定义next()和previous()方法。

为了给ViewSwitcher 添加多个组件, 一般通过ViewSwitcher 的setFactory 方法为止设置ViewFactory ,并由ViewFactory为之创建View 即可.

public class ViewSwitcherDemoActivity extends AppCompatActivity {

    private ActivityViewSwitcherDemoBinding mBinding;

    private int[] mResIdArray = {
            R.drawable.pic1,
            R.drawable.pic2,
            R.drawable.pic3
    };

    private int mCount = mResIdArray.length;

    private int mPosition = 0;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_view_switcher_demo);

        mBinding = DataBindingUtil.setContentView(this, R.layout.activity_view_switcher_demo);

        mBinding.viewSwitcher.setFactory(() -> {
            ImageView iv = new ImageView(ViewSwitcherDemoActivity.this);
            iv.setScaleType(ImageView.ScaleType.FIT_XY);
            iv.setImageResource(mResIdArray[0]);
            iv.setLayoutParams(new FrameLayout.LayoutParams(-1, Utils.dip2px(200)));
            return iv;
        });

        //下一张
        mBinding.btnNext.setOnClickListener(v -> next());

        //上一张
        mBinding.btnPrevious.setOnClickListener(v -> previous());

    }

    private void next() {
        ++mPosition;
        setSelection((ImageView) mBinding.viewSwitcher.getNextView());

        mBinding.viewSwitcher.setInAnimation(this, R.anim.anim_enter_from_bottom);
        mBinding.viewSwitcher.setOutAnimation(this, R.anim.anim_exit_to_top);
        mBinding.viewSwitcher.showNext();
    }

    private void previous() {
        --mPosition;
        setSelection((ImageView) mBinding.viewSwitcher.getNextView());

        mBinding.viewSwitcher.setInAnimation(this, R.anim.anim_enter_from_top);
        mBinding.viewSwitcher.setOutAnimation(this, R.anim.anim_exit_to_bottom);
        mBinding.viewSwitcher.showPrevious();
    }

    private void setSelection(ImageView imageView) {
        if (mPosition < 0) {
            mPosition = mCount - 1;
        } else if (mPosition >= mCount) {
            mPosition = 0;
        }
        imageView.setImageResource(mResIdArray[mPosition]);
    }
}

进入动画anim_enter_from_top.xml

退出动画anim_exit_to_bottom.xml

ViewSwitcher实现切换登陆方式界面案例

手机快捷登录

账号密码登录

登陆界面布局：

ViewSwitcherActivity

public class ViewSwitcherActivity extends AppCompatActivity {

    private ActivityViewSwitcherBinding mBinding;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        mBinding = DataBindingUtil.setContentView(this, R.layout.activity_view_switcher);

        mBinding.tvSwitchLoginType.setOnClickListener(v -> {
            if (mBinding.vsInput.getDisplayedChild() == 0) {
                showPwd();
                mBinding.tvSwitchLoginType.setText("手机快捷登录");
            } else {
                showPhone();
                mBinding.tvSwitchLoginType.setText("账号密码登陆");
            }
        });
    }

    private void showPwd() {
        mBinding.vsInput.setInAnimation(this, R.anim.slide_in_from_right);
        mBinding.vsInput.setOutAnimation(this, R.anim.slide_out_to_left);
        mBinding.vsInput.showNext();

    }

    private void showPhone() {
        mBinding.vsInput.setInAnimation(this, R.anim.slide_in_from_left);
        mBinding.vsInput.setOutAnimation(this, R.anim.slide_out_to_right);
        mBinding.vsInput.showPrevious();
    }
}

slide_in_from_right.xml

slide_out_to_right.xml

slide_in_from_left.xml

slide_out_to_left.xml

ViewFlipper类

ViewFlipper继承ViewAnimator，用于视图的轮播。

android:flipInterval指定轮播间隔时间
android:autoStart是否自动开始轮播
android:inAnimation指定进入时动画
android:outAnimation指定退出时动画

主要方法：
startFlipping()用于手动开始轮播，而stopFlipping()则停止轮播。
showNext()和showPrevious()显示视图的切换。

// 显示上一个视图
private void previous() {
    mViewFlipper.stopFlipping();

    mViewFlipper.setInAnimation(this, R.anim.anim_enter_from_top);
    mViewFlipper.setOutAnimation(this, R.anim.anim_exit_to_bottom);
    mViewFlipper.showPrevious();
}

// 手动开始轮播
private void play() {
    mViewFlipper.setInAnimation(this, R.anim.anim_enter_from_bottom);
    mViewFlipper.setOutAnimation(this, R.anim.anim_exit_to_top);
    mViewFlipper.startFlipping();
}

// 显示下一个视图
private void next() {
    mViewFlipper.stopFlipping();

    mViewFlipper.setInAnimation(this, R.anim.anim_enter_from_bottom);
    mViewFlipper.setOutAnimation(this, R.anim.anim_exit_to_top);
    mViewFlipper.showNext();
}

TextSwitcher和ImageSwitcher

ImageSwitcher和TextSwitcher的继承关系是一样的。两个重要的父类：ViewSwitcher和ViewAnimator。