Android——仿淘寶頭條垂直滾動廣告

淘寶App大家用的都比較多了哈，最近看淘寶頭條比較多，就來寫個小例子吧。
垂直滾動廣告的實現原理其實比較簡單，就是定時更新列表內容嘛，然後列表切換的時候再加點炫酷的動畫就OK了。如果對Android控制元件用的比較熟的同學可能一下子就想到了ViewFlipper。沒錯在Android基礎控制元件裡已經為大家提供了一套自動更新列表內容的控制元件ViewFlipper和AdapterViewFlipper，既然官方已經有簡便的實現方式，那我們也就不浪費時間去自己實現了，本節就來練習下ViewFlipper控制元件的使用吧。

ViewFlipper是什麼？

ViewFlipper是Android系統提供的使View滾動的控制元件，ViewFlipper直譯就是View快速滾動。開啟原始碼發現它繼承ViewAnimator,而ViewAnimator又繼承FrameLayout。因此可以把ViewFlipper當FrameLayout使用。好了，說到這裡你已經知道了ViewFlipper就是一個ViewGroup，往裡面新增控制元件即可（方法有兩種：xml和Java程式碼中addView）。

ViewFlipper的屬性

XML屬性	相關用法	說明
android:animateFirstView		設定顯示該元件的第一個View時是否使用動畫
android:inAnimation	setInAnimation(Animation)	設定元件顯示時使用的動畫
android:outAnimation	setOutAnimation(Animation)	設定元件隱藏時使用的動畫
android:loopViews		設定迴圈到最後一個元件後是否自動“轉頭”到第一個元件
android:autoStart	setAutoStart(boolean)	設定是否自動載入下一個View
android:flipInterval	setFlipInterval(int)	設定自動播放的時間間隔
	showNext()	顯示ViewFlipper裡下一個View
	showPrevious()	顯示ViewFlipper裡上一個View
	isFlipping()	判斷View切換是否正在進行
	startFlipping()	開始View的切換，而且會迴圈進行
	stopFlipping()	停止View的切換

ViewFlipper和AdapterViewFlipper的屬性都一樣，用法稍有不同，ViewFlipper只能用AddView的方式新增子View，AdapterViewFlipper由名字便可知，它可以通過設定adapter來新增View，相比之下還是AdapterViewFlipper要好用一些吧，嘿嘿，這裡我採用了ViewFlipper作為例子，有興趣的同學大家可以換成AdapterViewFlipper來實現。

垂直滾動廣告實現

動畫

進入動畫：in_animation.xml

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

進入動畫為：Y方向上的100%p到0%p(表示完全顯示出來)
退出動畫：out_animation.xml

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

佈局檔案

activity_viewflipper.xml

<?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="vertical">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:src="@drawable/top" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <ImageView
            android:layout_width="65dp"
            android:layout_height="65dp"
            android:layout_gravity="center_vertical"
            android:background="@android:color/white"
            android:padding="5dp"
            android:src="@drawable/taobaofirst" />

        <ViewFlipper
            android:id="@+id/viewFlipper"
            android:layout_width="match_parent"
            android:layout_height="65dp"
            android:flipInterval="3000"
            android:inAnimation="@anim/in_animation"
            android:outAnimation="@anim/out_animation" />
    </LinearLayout>
</LinearLayout>

viewflipper_item.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/flipper_item"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center_vertical"
    android:orientation="vertical">

    <TextView
        android:id="@+id/tv1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:drawableLeft="@drawable/icon"
        android:drawablePadding="5dp"
        android:gravity="center_vertical"
        android:textSize="14sp"
        tools:text="xxxx" />

    <TextView
        android:id="@+id/tv2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:drawableLeft="@drawable/icon"
        android:drawablePadding="5dp"
        android:gravity="center_vertical"
        android:paddingTop="3dp"
        android:textSize="14sp"
        tools:text="xxxx" />
</LinearLayout>

Java程式碼

ViewFlipperActivity.java

public class ViewFlipperActivity extends AppCompatActivity {
    private static int[] bgs = new int[]{R.drawable.bg1, R.drawable.bg2, R.drawable.bg3};
    private static String[][] texts = new String[][]{{"肩寬手臂粗的女生，記住4點會瘦", "30m單身公寓，面積雖小但能收納"}, {"鳴人的三個老師，誰對他的影響最", "想要懂你的貓，貓的這些動作暗示"}, {"把臉打溼就用洗面奶，怪不得毛孔", "你適不適合化妝，要看臉上這4個"}};
    private ViewFlipper viewFlipper;

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_viewflipper);
        viewFlipper = (ViewFlipper) findViewById(R.id.viewFlipper);
        setViewFliperItem();
        viewFlipper.startFlipping();
    }

    private void setViewFliperItem() {
        for (int i = 0; i < bgs.length; i++) {
            View item = LayoutInflater.from(this).inflate(R.layout.viewflipper_item, null);
            LinearLayout parent = (LinearLayout) item.findViewById(R.id.flipper_item);
            parent.setBackgroundResource(bgs[i]);
            TextView text1 = (TextView) item.findViewById(R.id.tv1);
            text1.setText(texts[i][0]);
            TextView text2 = (TextView) item.findViewById(R.id.tv2);
            text2.setText(texts[i][1]);
            viewFlipper.addView(item);
        }
    }

效果圖