微信底部导航图标渐变效果

主页面：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.suikajy.fragmentpageadapter.MainActivity">

<android.support.v4.view.ViewPager
android:id="@+id/vp_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="@+id/ll_navigation"></android.support.v4.view.ViewPager>

<LinearLayout
android:id="@+id/ll_navigation"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_alignParentBottom="true"
android:orientation="horizontal">
<include
android:id="@+id/n1"
layout="@layout/navigation_item"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
/>

<include
android:id="@+id/n2"
layout="@layout/navigation_item"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"/>

<include
android:id="@+id/n3"
layout="@layout/navigation_item"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"/>

<include
android:id="@+id/n4"
layout="@layout/navigation_item"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"/>
</LinearLayout>
</RelativeLayout>


Fragment就是一个TextView , Java部分用的是可传参Fragment的模式(见鸿扬大神博客) .

底部导航的图标界面(include中的) , 采用两个ImageView重合的方式 , 控制透明度实现渐变 :

<?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="match_parent"
android:gravity="center"
android:orientation="vertical">

<ImageView
android:id="@+id/iv_unable"
android:layout_width="20dp"
android:layout_height="20dp"
android:alpha="1"
android:src="@drawable/shape_unable" /> //图标就是一个绿色 , 一个灰色 的shape圆形文件

<ImageView
android:id="@+id/iv_enable"
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_marginTop="-20dp"
android:alpha="0"
android:src="@drawable/shape_enable" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="微信"
android:id="@+id/tv_navigation"/>
</LinearLayout>

MainActivity : 

package com.suikajy.fragmentpageadapter;

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.ImageView;
import android.widget.TextView;

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

public class MainActivity extends AppCompatActivity {

private List<Fragment> fragments;
private MyAdapter myAdapter;
private ViewPager vp;
private List<NaviViewHolder> selectorList = new ArrayList<>();

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initFragment();
initNavigation();
vp = (ViewPager) findViewById(R.id.vp_main);
setViewPager();
}

private void initNavigation() {
int[] navs = new int[]{R.id.n1, R.id.n2, R.id.n3, R.id.n4};
for (int i = 0; i < navs.length; i++) {
View view = findViewById(navs[i]);
ImageView enable = (ImageView) view.findViewById(R.id.iv_enable);
ImageView unable = (ImageView) view.findViewById(R.id.iv_unable);
TextView textView = (TextView) view.findViewById(R.id.tv_navigation);
NaviViewHolder selector = new NaviViewHolder(enable, unable, textView);
selectorList.add(selector);
}
}

private void setViewPager() {
vp.setAdapter(myAdapter);

vp.addOnPageChangeListener(new ViewPager.SimpleOnPageChangeListener() {

{
selectorList.get(0).getEnable().setAlpha(1f);
selectorList.get(0).getUnable().setAlpha(0f);
}

@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
if (positionOffset != 0 && positionOffsetPixels != 0) {//每次滑动结束都会调用一次onPageScrolled,并且第2,3个参数都是0,这会影响计算,故屏蔽
selectorList.get(position).getEnable().setAlpha(1f - positionOffset);
selectorList.get(position).getUnable().setAlpha(positionOffset);
selectorList.get(position + 1).getEnable().setAlpha(positionOffset);
selectorList.get(position + 1).getUnable().setAlpha(1f - positionOffset);
}
}
});
}

private void initFragment() {
fragments = new ArrayList<>();
for (int i = 0; i < 4; i++) {
fragments.add(ContentFragment.getContentFragment(i + ""));
}
myAdapter = new MyAdapter(getSupportFragmentManager(), fragments);
}

static class MyAdapter extends FragmentPagerAdapter {
final List<Fragment> fragments;

public MyAdapter(FragmentManager fm, List<Fragment> fragments) {
super(fm);
this.fragments = fragments;
}

@Override
public Fragment getItem(int position) {
return fragments.get(position);
}

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

static class NaviViewHolder {
private ImageView enable;
private ImageView unable;
private TextView textView;

public NaviViewHolder(ImageView enable, ImageView unable, TextView textView) {
this.enable = enable;
this.unable = unable;
this.textView = textView;
}

public ImageView getEnable() {
return enable;
}

public ImageView getUnable() {
return unable;
}

public TextView getTextView() {
return textView;
}
}
}

总结 :
主要是根据ViewPager的滑动监听事件 , 获取滑动百分比 , 然后设置透明度
onPageScrolled(int position, float positionOffset, int positionOffsetPixels) (滑动过程无关向哪个方向滑动, 都是两个Page) :
参数一 指代滑动过程中左侧的Page的position
参数二 指代滑动过程中右侧的Page区域占屏幕宽度的百分比
参数三 指代滑动过程中右侧的Page区域站屏幕宽度的像素数量

include其实就是一个View标签 , 或者可以当一个可分离出去的ViewGroup也可以