1、我們先來看一下要實現的效果

2、我們看到當進行切換頁面的時候,關聯的兩個Tab將會產生過渡效果,接下來我們用最簡單的程式碼去實現

3、思路：在Tab上放置一張為選中時的圖片,再將已經選中的圖片覆蓋在未選中的圖片上，我們來控制選中圖片的透明度來實現漸變。

4、佈局方面：這是單個Tab的佈局,像這樣的我們Demo一共有四個。大家注意id為page1的是預設圖(灰色),id為page1_0的是選中的圖片,也就是我們要控制漸變的檢視

<RelativeLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1" >

            <ImageView
                android:id="@+id/page1"
                android:layout_width="40dp"
                android:layout_height="40dp"
                android:layout_centerHorizontal="true"
                android:src="@drawable/aiw" />

            <ImageView
                android:id="@+id/page1_0"
                android:layout_width="40dp"
                android:layout_height="40dp"
                android:layout_centerHorizontal="true"
                android:src="@drawable/aix" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@id/page1"
                android:layout_centerHorizontal="true"
                android:text="微信" />
        </RelativeLayout>
 

@Override
public void onPageScrolled(int position, float offY, int offScreen) {}

我們利用offY來動態修改關聯的Tab的漸變透明度,由於offY會隨著左滑(從大到小1.0-》0.0)右滑(從小到大0.0-》1.0)進行動態改變,由此我們得到這樣的邏輯：

if(arg0==0){//1->0||1->0
	ViewHelper.setAlpha(page1,1-offY);
	ViewHelper.setAlpha(page2,offY);
}else if(arg0==1){//1->2||2->1
	ViewHelper.setAlpha(page2,1-offY);
	ViewHelper.setAlpha(page3,offY);
}else if(arg0==2){//2->3||3->2
	ViewHelper.setAlpha(page3,1-offY);
	ViewHelper.setAlpha(page4,offY);
}
 

至此，效果已經介紹完畢。

Demo下載地址：

點選開啟連結