微信滑动底部菜单渐变效果

本人最近很清闲，于是想温故一下以前的知识，若有错误，轻拍即可
上效果图先，

现在看代码结构图

底部有四个菜单，其实每个菜单用的都是自定义的RelativeLayout，本人将它命名RelativeLayoutForBottom，
且看RelativeLayoutForBottom.java代码。

package com.test.weixindemo.view;

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.PorterDuff;
import android.graphics.PorterDuffXfermode;
import android.graphics.Rect;
import android.graphics.drawable.BitmapDrawable;
import android.util.AttributeSet;
import android.util.Log;
import android.view.View;
import android.widget.ImageView;
import android.widget.RelativeLayout;
import android.widget.TextView;

import com.test.weixindemo.R;

/**
 * Created by 13798 on 2016/4/28.
 */
public class RelativeLayoutForBottom extends RelativeLayout {

    /**
     * 宽度
     */
    private int width;

    /**
     * 高度
     */
    private int height;

    /**
     * 图片宽度
     */
    private int iconWidth;

    /**
     * 图片高度
     */
    private int iconHeight;

    /**
     * 图片所在的矩形位置
     */
    private Rect iconRect;

    private Context context;

    private final String TAG = this.getClass().getSimpleName();
    /**
     * 显示的图片
     */
    private ImageView iv;

    /**
     * 显示的文字
     */
    private TextView tv;

    /**
     * textLeft:字体左边
     * textTop:字体顶部
     */
    private int textLeft,textTop;

    private Bitmap mBitmap;


    /**
     * 将图片转换成Bitmap格式
     */
    private Bitmap ivBmBG;

    /**
     * 设置颜色的百分比（0-1）
     */
    private float mPercent;

    public RelativeLayoutForBottom(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public RelativeLayoutForBottom(Context context) {
        this(context, null);
    }

    public RelativeLayoutForBottom(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        this.context = context;
        setWillNotDraw(false);
    }


    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        width = getMeasuredWidth();
        height = getMeasuredHeight();

        initFindViewById();
        initView();
        initRect();
    }

    /**
     * 初始化找到组件
     */
    private void initFindViewById(){
        iv = (ImageView) findViewById(R.id.iv);
        tv = (TextView) findViewById(R.id.tv);
    }

    /**
     * 组件的一些其他初始化
     */
    private void initView(){
        iv.setVisibility(View.INVISIBLE);
        tv.setVisibility(View.INVISIBLE);
        ivBmBG = ((BitmapDrawable) iv.getBackground()).getBitmap();
        iconWidth = ivBmBG.getWidth();
        iconHeight = ivBmBG.getHeight();
    }

    /**
     * 初始化矩形
     */
    private void initRect(){
        // 拿到文字的宽度和高度
        Rect textRect = getTextBounds(tv.getText().toString(),tv.getTextSize());
        int iconLeft = width/2-iconWidth/2;
        int iconTop = (int) (height/2-iconHeight/2-textRect.height()*0.6667);
        iconRect = new Rect(iconLeft,iconTop,iconLeft+iconWidth,iconTop+iconHeight);
        this.textLeft = width/2-textRect.width()/2;
        this.textTop = height-textRect.bottom*3;

    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        int alpha = (int) Math.ceil(255*mPercent);

        canvas.drawBitmap(ivBmBG,null,iconRect,null);
        setNewGreenCanvas(alpha);
        setResText(canvas,255-alpha);
        setDesText(canvas,alpha);
        canvas.drawBitmap(mBitmap,0,0,null);
    }

    /**
     * 设置新的绿色的画布
     */
    private void setNewGreenCanvas(int alpha){
        this.mBitmap = Bitmap.createBitmap(width,height, Bitmap.Config.ARGB_8888);
        Canvas mCanvas = new Canvas(mBitmap);
        Paint mPaint = new Paint();
        mPaint.setColor(Color.GREEN);
        mPaint.setAntiAlias(true);
        mPaint.setAlpha(alpha);
        mCanvas.drawRect(iconRect,mPaint);
        mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_IN));
        mCanvas.drawBitmap(ivBmBG,null,iconRect,mPaint);
    }

    /**
     * 设置原始的字体
     * @param canvas 画布
     */
    private void setResText(Canvas canvas,int alpha){
        Paint mPaint = new Paint();
        mPaint.setTextSize(tv.getTextSize());
        mPaint.setColor(0Xff555555);
        mPaint.setAntiAlias(true);
        mPaint.setAlpha(alpha);
        canvas.drawText(tv.getText().toString(),textLeft,textTop,mPaint);
    }

    /**
     * 设置绿色的字体
     * @param canvas 画布
     */
    private void setDesText(Canvas canvas,int alpha){
        Paint mPaint = new Paint();
        mPaint.setTextSize(tv.getTextSize());
        mPaint.setColor(Color.GREEN);
        mPaint.setAntiAlias(true);
        mPaint.setAlpha(alpha);
        canvas.drawText(tv.getText().toString(),textLeft,textTop,mPaint);
    }

    /**
     * 测量字体的宽度和高度
     * @param text   具体的字体
     * @param textSize  字体的size
     * @return 一个矩形，带有字体的宽度和高度
     */
    private Rect getTextBounds(String text,float textSize){
        Rect r = new Rect();
        Paint p = new Paint();
        p.setTextSize(textSize);
        p.getTextBounds(text,0,text.length(),r);
        return r;
    }

    /**
     * 设置颜色的百分比
     * @param percent
     */
    public void setAlpha(float percent){
        this.mPercent = percent;
        invalidate();
    }

}

关于画笔的setXfermode，可以看

点击打开链接

在看activity的布局

<?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:orientation="vertical">

    <android.support.v4.view.ViewPager
        android:id="@+id/vp"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:background="@color/colorPrimary"
        android:layout_weight="1">
    </android.support.v4.view.ViewPager>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:orientation="horizontal">

        <com.test.weixindemo.view.RelativeLayoutForBottom
            android:id="@+id/weixin"
            style="@style/myRelative">
            <ImageView
                android:id="@+id/iv"
                style="@style/myImageView"
                android:background="@mipmap/ic_menu_start_conversation"/>
            <TextView
                android:id="@+id/tv"
                style="@style/myTextView"
                android:text="微信"
                android:layout_below="@id/iv"
                android:layout_alignRight="@id/iv"
                android:layout_alignLeft="@id/iv"/>

        </com.test.weixindemo.view.RelativeLayoutForBottom>

        <com.test.weixindemo.view.RelativeLayoutForBottom
            android:id="@+id/contacts"
            style="@style/myRelative">
            <ImageView
                android:id="@+id/iv"
                style="@style/myImageView"
                android:background="@mipmap/ic_menu_friendslist"/>
            <TextView
                android:id="@+id/tv"
                style="@style/myTextView"
                android:text="通讯录"
                android:layout_below="@id/iv"
                android:layout_alignRight="@id/iv"
                android:layout_alignLeft="@id/iv"/>
        </com.test.weixindemo.view.RelativeLayoutForBottom>

        <com.test.weixindemo.view.RelativeLayoutForBottom
            android:id="@+id/find"
            style="@style/myRelative">
            <ImageView
                android:id="@+id/iv"
                style="@style/myImageView"
                android:background="@mipmap/ic_menu_allfriends"/>
            <TextView
                android:id="@+id/tv"
                style="@style/myTextView"
                android:text="发现"
                android:layout_below="@id/iv"
                android:layout_alignRight="@id/iv"
                android:layout_alignLeft="@id/iv"/>
        </com.test.weixindemo.view.RelativeLayoutForBottom>

        <com.test.weixindemo.view.RelativeLayoutForBottom
            android:id="@+id/me"
            style="@style/myRelative">
            <ImageView
                android:id="@+id/iv"
                style="@style/myImageView"
                android:background="@mipmap/ic_menu_emoticons"/>
            <TextView
                android:id="@+id/tv"
                style="@style/myTextView"
                android:text="我"
                android:layout_below="@id/iv"
                android:layout_alignRight="@id/iv"
                android:layout_alignLeft="@id/iv"/>
        </com.test.weixindemo.view.RelativeLayoutForBottom>

    </LinearLayout>


</LinearLayout>

style代码

<style name="myRelative">
        <item name="android:layout_width">0dp</item>
        <item name="android:layout_weight">1</item>
        <item name="android:layout_height">match_parent</item>
    </style>

    <style name="myImageView">
        <item name="android:layout_width">40dp</item>
        <item name="android:layout_height">40dp</item>
        <item name="android:scaleType">fitXY</item>
        <item name="android:layout_centerHorizontal">true</item>
    </style>
    
    <style name="myTextView">
        <item name="android:layout_width">wrap_content</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:textSize">20sp</item>
    </style>

activity代码

package com.test.weixindemo;

import android.support.v4.app.Fragment;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.util.Log;

import com.test.weixindemo.fragment.FirstFragment;
import com.test.weixindemo.fragment.ForthFragment;
import com.test.weixindemo.fragment.SecondFragment;
import com.test.weixindemo.fragment.ThirdFragment;
import com.test.weixindemo.view.RelativeLayoutForBottom;
import com.test.weixindemo.viewpageadapter.ViewPageAdapter;

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

public class MainActivity extends AppCompatActivity implements ViewPager.OnPageChangeListener{

    private final String TAG = getClass().getSimpleName();
    private RelativeLayoutForBottom weiXinBottom;
    private RelativeLayoutForBottom contactsBottom;
    private RelativeLayoutForBottom findBottom;
    private RelativeLayoutForBottom meBottom;
    private RelativeLayoutForBottom[] bottoms = new RelativeLayoutForBottom[4];
    private ViewPager vp ;
    private List<Fragment> lists;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initFindViewById();
        initView();
        initFragment();
        bindViewPagerAdapter();
        setCallBace();
    }

    /**
     * 进行除找到id外的一些初始化操作
     */
    private void initView() {
        weiXinBottom.setAlpha(1);
        bottoms[0] = weiXinBottom;
        bottoms[1] = contactsBottom;
        bottoms[2] = findBottom;
        bottoms[3] = meBottom;
    }


    /**
     * 用于初始化控件，并找到id值
     */
    private void initFindViewById(){
        vp = (ViewPager) findViewById(R.id.vp);
        weiXinBottom = (RelativeLayoutForBottom) findViewById(R.id.weixin);
        contactsBottom = (RelativeLayoutForBottom) findViewById(R.id.contacts);
        findBottom = (RelativeLayoutForBottom) findViewById(R.id.find);
        meBottom = (RelativeLayoutForBottom) findViewById(R.id.me);
    }

    /**
     * 初始化fragment并存入到集合中
     */
    private void initFragment(){
        lists = new ArrayList<>();
        lists.add(new FirstFragment());
        lists.add(new SecondFragment());
        lists.add(new ThirdFragment());
        lists.add(new ForthFragment());
    }

    /**
     * 将fragment和viewpage结合
     */
    private void bindViewPagerAdapter() {
        ViewPageAdapter vPA = new ViewPageAdapter(getSupportFragmentManager(),lists);
        vp.setAdapter(vPA);
    }

    /**
     * 调用回调
     */
    private void setCallBace(){
        vp.addOnPageChangeListener(this);
    }

    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
        if (positionOffset>0){
            bottoms[position].setAlpha(1-positionOffset);
            bottoms[position+1].setAlpha(positionOffset);
        }
    }

    @Override
    public void onPageSelected(int position) {

    }

    @Override
    public void onPageScrollStateChanged(int state) {

    }
}

好了，大概就是这样了，本人第一次发帖，如有不对，欢迎指正。

demo下载地址： demo