实现微信tab颜色渐变效果

用过微信的朋友都知道，现在微信的的下端有一个颜色渐变的tab选项，根据手指滑动程度大小来动态确定颜色的深浅，非常给力，很屌的样子。那好我就分享一下我实现这种功能思路和代码的方法，希望对感兴趣的朋友有帮助。

先来看看我的程序界面（机器人肚子上的绿颜色区间是变化范围）：



一、实现思路：

1：准备两张tab背景图片（必须是大小比例都一样的），一张是未选中状态，另一张是选中状态。如下：

未选中状态


选中状态


2：每个Tab使用LinearLayout包含两个FrameLayout的布局（一个是图片FrameLayout，另一个是字体FrameLayout），向图片FrameLayout分别添加选中状态和未选中状态的图片，并且把选中状态图片设置为不可见。（当切换到当前tab的时候再把选中状态图片设置为显示）。

3：使用ViewPager动态获页面滑动比例，从而通过第三方库nineoldandroids.jar实现选中图片为逐渐显示或者逐渐消失，最后当确认界面跳转后再把选中的tab图片设置为可见，其他的tab选中图片设置不可见，特别注意，整个过程中，未选中图片一直可见，变化的只是选中图片，从而造成一种tab图片中颜色在变化的假象。

4：接下来是字体的变化，与图片变化一样。选中字体和未选中字体所处的FameLayout与图片FrameLayout处于同一个LinearLayout，对LinearLayout进行监听，实现点击LinearLayout切换界面功能。

这是我的主要代码图：



好了，废话不多说，直接上代码。

一、MainActivity类：

package com.tielizi.wechattabdemo;

import android.graphics.Color;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentStatePagerAdapter;
import android.support.v4.view.ViewPager;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;

import com.nineoldandroids.view.ViewHelper;//第三方包滑动特效库

import java.util.ArrayList;
import java.util.List;

//注意要想使用getSupportFragmentManager()的话，必须继承FragmentActivity类
public class MainActivity extends FragmentActivity implements ViewPager.OnPageChangeListener,View.OnClickListener {
private ViewPager viewpager;
private List<Fragment> list;
private MyFragmentPagerAdapter myFragmentPagerAdapter;
private int mCurrentPageIndex;// 当前页面号码在这里0代表页码1,1代表页码2
private MyFragment1 myFragment1;
private MyFragment2 myFragment2;
private MyFragment3 myFragment3;
private LinearLayout tab_1,tab_2,tab_3;//三个Tab布局用于点击切换页面
private TextView tab_text_1,tab_text_2,tab_text_3;//表面字
private TextView textbackground_1,textbackground_2,textbackground_3;//背景显示字
private ImageView background_tab_image_1,background_tab_image_2,background_tab_image_3;//背景填充图片

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

background_tab_image_1 = (ImageView) findViewById(R.id.tab_image_1);
background_tab_image_2 = (ImageView) findViewById(R.id.tab_image_2);
background_tab_image_3 = (ImageView) findViewById(R.id.tab_image_3);

tab_1 = (LinearLayout) findViewById(R.id.tab_1);
tab_2 = (LinearLayout) findViewById(R.id.tab_2);
tab_3 = (LinearLayout) findViewById(R.id.tab_3);
tab_1.setOnClickListener(this);
tab_2.setOnClickListener(this);
tab_3.setOnClickListener(this);

tab_text_1 = (TextView) findViewById(R.id.tab_text_1);
tab_text_2 = (TextView) findViewById(R.id.tab_text_2);
tab_text_3 = (TextView) findViewById(R.id.tab_text_3);
textbackground_1 = (TextView) findViewById(R.id.tab_text_1_background);
textbackground_2 = (TextView) findViewById(R.id.tab_text_2_background);
textbackground_3 = (TextView) findViewById(R.id.tab_text_3_background);

viewpager = (ViewPager) findViewById(R.id.viewpager);
viewpager.setOnPageChangeListener(this);
list = new ArrayList<Fragment>();
myFragment1 = new MyFragment1();
myFragment2 = new MyFragment2();
myFragment3 = new MyFragment3();

list.add(myFragment1);
list.add(myFragment2);
list.add(myFragment3);
myFragmentPagerAdapter = new MyFragmentPagerAdapter(getSupportFragmentManager(), list);
viewpager.setAdapter(myFragmentPagerAdapter);
}

@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {//这里你可以用调试打印日志来弄懂
Log.e("TAG", position + " , "+"mCurrentPageIndex "+mCurrentPageIndex+" " + positionOffset + " , "
+ positionOffsetPixels);
//positionOffset表示页面偏移相对于屏幕比例（右滑动在区间（0-1）变化，左滑动在区间（1-0）变化）
// positionOffsetPixels表示页面偏移像素，右滑动从0增加到最大像素，左滑动从最大像素减小到0
//mCurrentPageIndex无论左滑动还是右滑动，一直都是表示当前页码数，通过调试，我得出的结论是，向右滑动时position表示的时当前页码数，向左滑动时，position表示的时即将到达页面数
if (mCurrentPageIndex == 0 && position == 0)// 1->2
{//使用ViewHelper，必须添加nineoldandroids.jar第三方库，实现复杂的滑动特效变化
tab_text_2.setVisibility(View.VISIBLE);
ViewHelper.setAlpha(tab_text_1, 1 - positionOffset);
ViewHelper.setAlpha(tab_text_2, positionOffset);

background_tab_image_2.setVisibility(View.VISIBLE);
ViewHelper.setAlpha(background_tab_image_1, 1-positionOffset);
ViewHelper.setAlpha(background_tab_image_2, positionOffset);

} else if (mCurrentPageIndex == 1 && position == 0)// 2->1
{
tab_text_1.setVisibility(View.VISIBLE);
ViewHelper.setAlpha(tab_text_1, 1-positionOffset);
ViewHelper.setAlpha(tab_text_2, positionOffset);

background_tab_image_1.setVisibility(View.VISIBLE);
ViewHelper.setAlpha(background_tab_image_1, 1-positionOffset);
ViewHelper.setAlpha(background_tab_image_2, positionOffset);
} else if (mCurrentPageIndex == 1 && position == 1) // 2->3
{
tab_text_3.setVisibility(View.VISIBLE);
ViewHelper.setAlpha(tab_text_3, positionOffset);
ViewHelper.setAlpha(tab_text_2, 1-positionOffset);

background_tab_image_3.setVisibility(View.VISIBLE);
ViewHelper.setAlpha(background_tab_image_2, 1-positionOffset);
ViewHelper.setAlpha(background_tab_image_3, positionOffset);
} else if (mCurrentPageIndex == 2 && position == 1) // 3->2
{
tab_text_2.setVisibility(View.VISIBLE);
ViewHelper.setAlpha(tab_text_2, 1-positionOffset);
ViewHelper.setAlpha(tab_text_3, positionOffset);

background_tab_image_2.setVisibility(View.VISIBLE);
ViewHelper.setAlpha(background_tab_image_2, 1-positionOffset);
ViewHelper.setAlpha(background_tab_image_3, positionOffset);
}
}

@Override
public void onPageSelected(int position) {//页面确定下来时候Tab的状态处理
Log.i("px",position+"");
reSetTab();
mCurrentPageIndex = position;
switch (position) {
case 0:
tab_text_1.setVisibility(View.VISIBLE);
textbackground_1.setVisibility(View.INVISIBLE);
background_tab_image_1.setVisibility(View.VISIBLE);
break;
case 1:
tab_text_2.setVisibility(View.VISIBLE);
textbackground_2.setVisibility(View.INVISIBLE);
background_tab_image_2.setVisibility(View.VISIBLE);
break;
case 2:
tab_text_3.setVisibility(View.VISIBLE);
textbackground_3.setVisibility(View.INVISIBLE);
background_tab_image_3.setVisibility(View.VISIBLE);
break;
}
}

@Override
public void onPageScrollStateChanged(int state) {

}

@Override
public void onClick(View v) {
switch (v.getId()) {//切换页面
case R.id.tab_1:
Log.i("px","1");
viewpager.setCurrentItem(0);
break;
case R.id.tab_2:
Log.i("px", "2");
viewpager.setCurrentItem(1);
break;
case R.id.tab_3:
Log.i("px", "3");
viewpager.setCurrentItem(2);
break;
}
}

class MyFragmentPagerAdapter extends FragmentStatePagerAdapter {
private List<Fragment> listMyFragment;
public MyFragmentPagerAdapter(FragmentManager fm,List<Fragment> listMyFragments) {
super(fm);
this.listMyFragment = listMyFragments;
}

@Override
public android.support.v4.app.Fragment getItem(int arg0) {
return listMyFragment.get(arg0);
}

@Override
public int getCount() {
return listMyFragment.size();
}

}

private void reSetTab(){//重置Tab状态
tab_1.setBackgroundColor(Color.parseColor("#D3D3D3"));
tab_2.setBackgroundColor(Color.parseColor("#D3D3D3"));
tab_3.setBackgroundColor(Color.parseColor("#D3D3D3"));
textbackground_1.setVisibility(View.VISIBLE);
textbackground_2.setVisibility(View.VISIBLE);
textbackground_3.setVisibility(View.VISIBLE);
background_tab_image_1.setVisibility(View.GONE);
background_tab_image_2.setVisibility(View.GONE);
background_tab_image_3.setVisibility(View.GONE);
tab_text_1.setVisibility(View.GONE);
tab_text_2.setVisibility(View.GONE);
tab_text_3.setVisibility(View.GONE);
}
}

二、MyFragment1类 （这里我就只写一个了）

package com.tielizi.wechattabdemo;

import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

/**
* Created by Administrator on 2015/9/11.
*/
public class MyFragment1 extends Fragment {
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
}

@Nullable
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.pager1,container,false);
return view;
}
}

欧拉，主要代码就这些了。

微信tab源码下载

PS：最高SDK22兼容到SDK16

更多博主文章分享：

继承与View在画布上画出贪吃蛇

贪吃蛇android源码分享

手机弹幕实现

android app引导界面实现