Android控制之垂直滚动广告条ViewFLipper解析

最近在作公司项目的时候发现，像淘宝首页和京东首页同样有一个垂直的广告滚动条，效果以下图。 这样的效果能够用Android的原生控件ViewFlipper来简单实现

ViewFlipper

使用方法

先来看看咱们的布局文件

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <ViewFlipper
        android:id="@+id/view_flipper"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:inAnimation="@anim/anim_in"
        android:outAnimation="@anim/anim_out"
        android:layout_gravity="center"/>


</FrameLayout>
复制代码

就是在FrameLayout里嵌入一个ViewFlipper

这里的属性 inAnimation和outAnimation是子元素的出入动画，经过设置这两个值才能展示动画效果，接下来看一下这个动画的xml代码，首先是anim_in.xml，很简单的进入动画，Y轴位置从下面100%移动到位置0，动画持续1s

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:fromYDelta="100%p"
        android:toYDelta="0"
        android:duration="1000"/>
</set>
复制代码

而后是anim_out.xml，一样的，出动画。从0位置移动到-100%的位置，动画持续1s

<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:fromYDelta="0"
        android:toYDelta="-100%p"
        android:duration="1000"/>
</set>
复制代码

接下来看一下咱们的ViewFlipper的子项布局

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/music" />

    <TextView
        android:layout_width="73dp"
        android:layout_height="16dp"
        android:layout_marginBottom="8dp"
        android:layout_marginLeft="84dp"
        android:layout_marginStart="84dp"
        android:layout_marginTop="8dp"
        android:text="@string/app_name"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toEndOf="@+id/imageView"
        app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
复制代码

很简单，就是一个图片+一个标题而已。 接着就能够设置ViewFlipper的子项了。

public class MainActivity extends AppCompatActivity {

    private ViewFlipper mViewFlipper;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mViewFlipper = (ViewFlipper)findViewById(R.id.view_flipper);
        for(int i=0;i<3;i++){
            View view = getLayoutInflater().inflate(R.layout.view_flipper_content,null);
            mViewFlipper.addView(view);
        }
        mViewFlipper.setFlipInterval(2000);
        mViewFlipper.startFlipping();
    }
}
复制代码

这里获取控件ViewFlipper以后，对控件addView，而后设置每一个控件滑动到下一个控件的时间，以后调用startFlipping()就能够开始滚动啦。

源码解析

ViewFlipper继承自ViewAnimator，实质上只是封装了一些ViewAnimator的方法来调用，真正执行操做的是ViewAnimator。 咱们来看ViewFlipper的核心方法startFlipping()。

public void startFlipping() {
        mStarted = true;
        updateRunning();
    }
复制代码

这里调用的是updateRuning()，咱们接着跳进去看看

private void updateRunning() {
        updateRunning(true);
    }
复制代码

一个私有方法，调用了重载的updateRunning，咱们继续跳进去看看。

private void updateRunning(boolean flipNow) {
        boolean running = mVisible && mStarted && mUserPresent;
        if (running != mRunning) {
            if (running) {
                showOnly(mWhichChild, flipNow);
                postDelayed(mFlipRunnable, mFlipInterval);
            } else {
                removeCallbacks(mFlipRunnable);
            }
            mRunning = running;
        }
        if (LOGD) {
            Log.d(TAG, "updateRunning() mVisible=" + mVisible + ", mStarted=" + mStarted
                    + ", mUserPresent=" + mUserPresent + ", mRunning=" + mRunning);
        }
    }
复制代码

在一系列的判断后调用基类的方法showOnly，咱们跳转过去看看。

void showOnly(int childIndex, boolean animate) {
        final int count = getChildCount();
        for (int i = 0; i < count; i++) {
            final View child = getChildAt(i);
            if (i == childIndex) {
                if (animate && mInAnimation != null) {
                    child.startAnimation(mInAnimation);
                }
                child.setVisibility(View.VISIBLE);
                mFirstTime = false;
            } else {
                if (animate && mOutAnimation != null && child.getVisibility() == View.VISIBLE) {
                //对可见子项调用退出动画
                    child.startAnimation(mOutAnimation);
                } else if (child.getAnimation() == mInAnimation)
                //不可见子项取消动画
                    child.clearAnimation();
                //同时设置不可见
                child.setVisibility(View.GONE);
            }
        }
    }
复制代码

根据官方文档这里的childIndex是要显示的子项的位置，animate是否启用动画，默认是启用的。

这个方法就是核心方法，这里遍历每个子项，若是找到childIndex的话则对他调用进入的动画，对可见的子项则调用退出的动画。

ViewAnimator继承自FrameLayout,它的使用方法和ViewFLipper相似。只不过没法自动滚动，而ViewFLipper使用Handler机制封装了自动滚动的功能。ViewAnimator则须要调用showNext()来显示下一个子项。自此咱们的分析结束。

结语

看了公司的自定义垂直滚动条感受仍是晦涩难懂，没想到原生的控件源码这么简单。看来仍是得多看看源码才好。