Android控制之垂直滾動廣告條ViewFLipper解析

陳呆賊發表於2018-06-21
AndroidView

最近在做公司專案的時候發現，像淘寶首頁和京東首頁一樣有一個垂直的廣告滾動條，效果如下圖。 這樣的效果可以用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()來顯示下一個子項。自此我們的分析結束。

結語

看了公司的自定義垂直滾動條感覺還是晦澀難懂，沒想到原生的控制元件原始碼這麼簡單。看來還是得多看看原始碼才好。

相關文章