【UI视觉】100行代码实现微信底部渐变切换效果！！！

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>

5、如何控制关联视图的渐变透明度呢,ViewPager的OnPageChangeListener提供了onPageScrolled的监听方法

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

posi tion:ViewPager当前所处位置、offY：偏移量范围0.0～1.0、offScreen：移动距离范围0-屏幕最大宽度。

我们利用offY来动态修改关联的Tab的渐变透明度,由于offY会随着左滑(从大到小1.0-》0.0)右滑(从小到大0.0-》1.0)进行动态改变,由此我们得到这样的逻辑：

扫描二维码关注公众号，回复： 4416676 查看本文章

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

ViewHelper是为了兼容Android2.3而使用的Jar包。如果不兼容可以直接使用API.11 page1.setAlpha(1.0f);来实现。

至此，效果已经介绍完毕。

Demo下载地址：

点击打开链接