最近要實現(xiàn)類似于淘寶樣式的垂直廣告滾動條，這樣的效果可以用Android的原生控件ViewFlipper來簡單實現(xiàn)

效果如下：

效果圖

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=".Guanggao">

    <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是子元素的出入動畫，通過設(shè)置這兩個值才能展現(xiàn)動畫效果，接下來看一下這個動畫的xml代碼，首先是anim_in.xml，很簡單的進(jìn)入動畫，Y軸位置從下面100%移動到位置0，動畫持續(xù)1s

anim_in

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" android:duration="1000">
    <!--打開有神奇的效果-->
    <!--<translate android:fromXDelta="100%p" android:toYDelta="0" />-->
    <translate android:fromYDelta="100%p"  android:toYDelta="0"/>
</set>

然后是anim_out.xml，同樣的，出動畫。從0位置移動到-100%的位置，動畫持續(xù)1s

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

</set>

接下來看一下我們的ViewFlipper的子項布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal">
    <ImageView
        android:id="@+id/img"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:src="@mipmap/ic_launcher"/>

    <TextView
        android:id="@+id/tv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="我是廣告"
        android:textSize="22sp"
        android:layout_marginLeft="20dp"
        android:layout_gravity="center"/>

</LinearLayout>

很簡單就一個圖片加一個標(biāo)題，下面代碼開始設(shè)置

public class Guanggao extends AppCompatActivity {

    private ViewFlipper view_flipper;

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

    private void initView() {
        view_flipper = (ViewFlipper) findViewById(R.id.view_flipper);
        for(int i=0;i<3;i++){
            View view = getLayoutInflater().inflate(R.layout.item_flipper,null);
            view_flipper.addView(view);

            /*view.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    Log.d("Guanggao", "點(diǎn)擊了" + i);
                }
            });*/
        }
        view_flipper.setFlipInterval(2000);
        view_flipper.startFlipping();
       /* if(view_flipper.getDisplayedChild()==0){
            view_flipper.getCurrentView().setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View arg0) {
                    Log.d("Guanggao", "點(diǎn)擊了");
                }
            });*/
        }
    }

這里獲取控件ViewFlipper之后，對控件addView，然后設(shè)置每個控件滑動到下一個控件的時間，之后調(diào)用startFlipping()就可以開始滾動啦。

源碼解析

ViewFlipper繼承自ViewAnimator，實質(zhì)上只是封裝了一些ViewAnimator的方法來調(diào)用，真正執(zhí)行操作的是ViewAnimator。 我們來看ViewFlipper的核心方法startFlipping()。

 public void startFlipping() {
        mStarted = true;
        updateRunning();
    }

這里調(diào)用的是updateRuning()，我們接著跳進(jìn)去看看

private void updateRunning() {
        updateRunning(true);
    }

一個私有方法，調(diào)用了重載的updateRunning，我們繼續(xù)跳進(jìn)去看看。

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

在一系列的判斷后調(diào)用基類的方法showOnly，我們跳轉(zhuǎn)過去看看。

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) {
                //對可見子項調(diào)用退出動畫
                    child.startAnimation(mOutAnimation);
                } else if (child.getAnimation() == mInAnimation)
                //不可見子項取消動畫
                    child.clearAnimation();
                //同時設(shè)置不可見
                child.setVisibility(View.GONE);
            }
        }
    }

根據(jù)官方文檔這里的childIndex是要顯示的子項的位置，animate是否啟用動畫，默認(rèn)是啟用的。
這個方法就是核心方法，這里遍歷每一個子項，如果找到childIndex的話則對他調(diào)用進(jìn)入的動畫，對可見的子項則調(diào)用退出的動畫。
ViewAnimator繼承自FrameLayout,它的使用方法和ViewFLipper類似。只不過無法自動滾動，而ViewFLipper使用Handler機(jī)制封裝了自動滾動的功能。ViewAnimator則需要調(diào)用showNext()來顯示下一個子項。自此我們的分析結(jié)束。
項目地址 https://github.com/biao941122/RedBook