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

主页面：

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

总结 :

1. 主要是根据ViewPager的滑动监听事件 , 获取滑动百分比 , 然后设置透明度
2. onPageScrolled(int position, float positionOffset, int positionOffsetPixels) (滑动过程无关向哪个方向滑动, 都是两个Page) :
   1. 参数一 指代滑动过程中左侧的Page的position
   2. 参数二 指代滑动过程中右侧的Page区域占屏幕宽度的百分比
   3. 参数三 指代滑动过程中右侧的Page区域站屏幕宽度的像素数量
3. include其实就是一个View标签 , 或者可以当一个可分离出去的ViewGroup也可以