仿微信6.0的界面按钮切换产生渐变效果

最近看了一个视频讲的是自定义个view模仿微信的四个菜单按钮切换时的颜色产生渐变的效果，最后实现出来感觉好不错所以我就做了总结希望对你们有用。

先看效果吧，不知道用什么软件来录制gif图你们就凑合看吧，大概的效果打开微信自己左右滑动看看。

默认的样式：

滑动中的样式：

切换后的效果：

基本的效果和radiobutton实现的一样。。。。

在滑动的过程中设置aplha : mPaint.setAlpha(alpha);

				mTextPaint.setAlpha(alpha);

具体的代码

	
R.layout.activity_weixin_menu

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:zdd="http://schemas.android.com/apk/res/com.nz.zdd.zlistview"
    android:id="@+id/activity_weixin_menu"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

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

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:background="@drawable/tab_bj"
        android:orientation="horizontal">

        <com.nz.zdd.zlistview.widget.ZWidgetView
            android:id="@+id/icon_messages"
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:padding="5dp"
            zdd:color="#ff45c01a"
            zdd:icon="@mipmap/ic_menu_start_conversation"
            zdd:text="@string/tab_message"
            zdd:text_size="12sp" />

        <com.nz.zdd.zlistview.widget.ZWidgetView
            android:id="@+id/icon_books"
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:padding="5dp"
            zdd:color="#ff45c01a"
            zdd:icon="@mipmap/ic_menu_friendslist"
            zdd:text="@string/tab_contact"
            zdd:text_size="12sp" />

        <com.nz.zdd.zlistview.widget.ZWidgetView
            android:id="@+id/icon_founds"
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:padding="5dp"
            zdd:color="#ff45c01a"
            zdd:icon="@mipmap/ic_menu_search"
            zdd:text="@string/tab_found"
            zdd:text_size="12sp" />

        <com.nz.zdd.zlistview.widget.ZWidgetView
            android:id="@+id/icon_am"
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:padding="5dp"
            zdd:color="#ff45c01a"
            zdd:icon="@mipmap/ic_menu_my_calendar"
            zdd:text="@string/tab_me"
            zdd:text_size="12sp" />
    </LinearLayout>

</LinearLayout>	
attr
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <attr name="icon" format="reference" />
    <attr name="color" format="color" />
    <attr name="text" format="string" />
    <attr name="text_size" format="dimension" />

    <declare-styleable name="ZWidgetView">
        <attr name="icon" />
        <attr name="color" />
        <attr name="text" />
        <attr name="text_size" />
    </declare-styleable>
</resources>
自定义的view
package com.nz.zdd.zlistview.widget;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.PorterDuff;
import android.graphics.PorterDuffXfermode;
import android.graphics.Rect;
import android.graphics.drawable.BitmapDrawable;
import android.os.Bundle;
import android.os.Looper;
import android.os.Parcelable;
import android.util.AttributeSet;
import android.util.TypedValue;
import android.view.View;

import com.nz.zdd.zlistview.R;

/**
 * Created by Admin on 2016/10/25.
 */

public class ZWidgetView extends View {
    public int mColor = 0xff45c01a;
    private Bitmap mIconBitmap;
    private String mText = "微信";
    private int mTextSize = (int) TypedValue
            .applyDimension(TypedValue.COMPLEX_UNIT_SP, 12, getResources().getDisplayMetrics());

    private Canvas mCancas;

    private Bitmap mBitmap;
    //照片的画笔
    private Paint mPaint;

    private float mAlpha;
    //绘制icon矩形
    private Rect mIconRect;
    //绘制TextView矩形
    private Rect mTextBound;
    //TextView的画笔
    private Paint mTextPaint;

    private static final String INSTANCE_STATUS = "instance_stats";

    private static final String STATUS_ALPHA = "instance_alpha";


    /**
     * 动态设置alpha值
     *
     * @param alpha
     */
    public void setIconAlpha(float alpha) {
        this.mAlpha = alpha;
        invalidateView();
    }

    /**
     * 重绘
     */
    private void invalidateView() {
        if (Looper.getMainLooper() == Looper.myLooper()) {
            invalidate();
        } else {
            postInvalidate();
        }
    }

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


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

    /**
     * 获取自定义控件属性
     *
     * @param context
     * @param attrs
     * @param defStyleAttr
     */
    public ZWidgetView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);

        TypedArray typedArray = context.obtainStyledAttributes(attrs,
                R.styleable.ZWidgetView);

        int n = typedArray.getIndexCount();
        for (int i = 0; i < n; i++) {
            int attr = typedArray.getIndex(i);
            switch (attr) {
                case R.styleable.ZWidgetView_icon:
                    BitmapDrawable drawable = (BitmapDrawable) typedArray.getDrawable(i);
                    mIconBitmap = drawable.getBitmap();
                    break;
                case R.styleable.ZWidgetView_color:
                    mColor = typedArray.getColor(attr, 0xff45c01a);
                    break;
                case R.styleable.ZWidgetView_text:
                    mText = typedArray.getString(i);
                    break;
                case R.styleable.ZWidgetView_text_size:
                    mTextSize = (int) typedArray.getDimension(attr, TypedValue
                            .applyDimension(TypedValue.COMPLEX_UNIT_SP,
                                    12, getResources().getDisplayMetrics()));
                    break;
            }
        }
        typedArray.recycle();
        mTextBound = new Rect();
        mTextPaint = new Paint();
        mTextPaint.setTextSize(mTextSize);
        mTextPaint.setColor(0xff55555);

        mTextPaint.getTextBounds(mText, 0, mText.length(), mTextBound);


    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);

        int iconWidth = Math.min(getMeasuredWidth()
                    - getPaddingLeft()- getPaddingRight(),
                     getMeasuredHeight() - getPaddingTop()
                             - getPaddingBottom() - mTextBound.height());
        int left = getMeasuredWidth() / 2 - iconWidth / 2;
        int top = (getMeasuredHeight() - mTextBound.height()) / 2 - iconWidth / 2;

        //画出图片的矩形
        mIconRect = new Rect(left, top, left + iconWidth, top + iconWidth);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.drawBitmap(mIconBitmap, null, mIconRect, null);

        int alpha = (int) Math.ceil(255 * mAlpha);
        //设置底部可变色的icon
        setupTargetBitmap(alpha);
        //设置底部文字
        drawSourceText(canvas, alpha);
        drawTargerText(canvas, alpha);
        //将照片绘制上去
        canvas.drawBitmap(mBitmap, 0, 0, null);
    }

    /**
     * @param canvas
     * @param alpha
     */
    private void drawTargerText(Canvas canvas, int alpha) {
        mTextPaint.setColor(mColor);
        mTextPaint.setAlpha(alpha);
        int x = getMeasuredWidth() / 2 - mTextBound.width() / 2;
        int y = mIconRect.bottom + mTextBound.height();
        canvas.drawText(mText, x, y, mTextPaint);
    }

    //设置底部的文本
    private void drawSourceText(Canvas canvas, int alpha) {
        mTextPaint.setColor(0xff333333);
        mTextPaint.setAlpha(255 - alpha);
        int x = getMeasuredWidth() / 2 - mTextBound.width() / 2;
        int y = mIconRect.bottom + mTextBound.height();
        canvas.drawText(mText, x, y, mTextPaint);
    }

    /**
     * 设置底部按钮的渐变值
     *
     * @param alpha
     */
    private void setupTargetBitmap(int alpha) {
        mPaint = new Paint();
        mBitmap = Bitmap.createBitmap(getMeasuredWidth(), getMeasuredHeight(), Bitmap.Config.ARGB_8888);
        mCancas = new Canvas(mBitmap);
        mPaint.setColor(mColor);
        mPaint.setDither(true);
        mPaint.setAlpha(alpha);
        mPaint.setAntiAlias(true);

        mCancas.drawRect(mIconRect, mPaint);

        mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_IN));
        mCancas.drawBitmap(mIconBitmap, null, mIconRect, mPaint);
    }

    @Override
    protected Parcelable onSaveInstanceState() {
        Bundle bundle = new Bundle();
        bundle.putParcelable(INSTANCE_STATUS, super.onSaveInstanceState());
        bundle.putFloat(STATUS_ALPHA, mAlpha);
        return bundle;
    }

    @Override
    protected void onRestoreInstanceState(Parcelable state) {
        if (state instanceof Bundle) {
            Bundle bundle = (Bundle) state;
            mAlpha = bundle.getFloat(STATUS_ALPHA);
            super.onRestoreInstanceState(bundle.getParcelable(INSTANCE_STATUS));
            return;
        }
        super.onRestoreInstanceState(state);
    }
}
	
activity中调用的方法：
package com.nz.zdd.zlistview.activity;


import android.app.ActionBar;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.Menu;
import android.view.View;
import android.view.ViewConfiguration;
import android.view.Window;

import com.nz.zdd.zlistview.R;
import com.nz.zdd.zlistview.fragment.TabFragment;
import com.nz.zdd.zlistview.fragment.TabFragmentFour;
import com.nz.zdd.zlistview.fragment.TabFragmentThree;
import com.nz.zdd.zlistview.fragment.TabFragmentTwo;
import com.nz.zdd.zlistview.widget.ZWidgetView;

import java.lang.reflect.Field;
import java.lang.reflect.Method;
import java.util.ArrayList;
import java.util.List;

public class WeixinMenuActivity extends FragmentActivity implements View.OnClickListener, ViewPager.OnPageChangeListener {
    private ActionBar actionBar;
    private ViewPager viewPager;
    private FragmentPagerAdapter fadapeter;
    public List<Fragment> list = new ArrayList<>();
    public List<ZWidgetView> zWidgetViews = new ArrayList<>();
    private ZWidgetView zMessages, zBooks, zFounds, zAm;


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_weixin_menu);
        setNo();
        getActionBar().setDisplayShowHomeEnabled(false);
        addData();
        initView();
        initEvent();

    }

    private void initEvent() {
        viewPager.setOnPageChangeListener(this);
    }

    private void initView() {
        viewPager = (ViewPager) findViewById(R.id.viewpager);
        fadapeter = new FragmentPagerAdapter(getSupportFragmentManager()) {
            @Override
            public Fragment getItem(int position) {
                return list.get(position);
            }

            @Override
            public int getCount() {
                return list.size();
            }
        };
        viewPager.setAdapter(fadapeter);

        zMessages = (ZWidgetView) findViewById(R.id.icon_messages);
        zMessages.setOnClickListener(this);
        zWidgetViews.add(zMessages);

        zBooks = (ZWidgetView) findViewById(R.id.icon_books);
        zBooks.setOnClickListener(this);
        zWidgetViews.add(zBooks);

        zFounds = (ZWidgetView) findViewById(R.id.icon_founds);
        zFounds.setOnClickListener(this);
        zWidgetViews.add(zFounds);

        zAm = (ZWidgetView) findViewById(R.id.icon_am);
        zAm.setOnClickListener(this);
        zWidgetViews.add(zAm);

        zMessages.setIconAlpha(1.0f);
    }


    public void addData() {
        list.add(new TabFragment());
        list.add(new TabFragmentTwo());
        list.add(new TabFragmentThree());
        list.add(new TabFragmentFour());
    }


    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.demo_menu, menu);
        return true;
    }

    private void setNo() {
        try {
            ViewConfiguration configuration = ViewConfiguration.get(this);
            Field menuKry = ViewConfiguration.class.getDeclaredField("sHasPermanentMenuKey");
            menuKry.setAccessible(true);
            menuKry.setBoolean(configuration, false);
        } catch (Exception e) {
            e.printStackTrace();
        }
    }

    /**
     * 显示overflower菜单图标
     */
    @Override
    public boolean onMenuOpened(int featureId, Menu menu) {
        if (featureId == Window.FEATURE_ACTION_BAR && menu != null) {
            if (menu.getClass().getSimpleName().equals("MenuBuilder")) {
                try {
                    Method m = menu.getClass().getDeclaredMethod("setOptionalIconsVisible", Boolean.TYPE);
                    m.setAccessible(true);
                    m.invoke(menu, true);
                } catch (Exception e) {
                }
            }
        }
        return super.onMenuOpened(featureId, menu);
    }

    @Override
    public void onClick(View v) {
        resetOtherTabs();
        switch (v.getId()) {
            case R.id.icon_messages:
                viewPager.setCurrentItem(0, false);
                zWidgetViews.get(0).setIconAlpha(1.0f);
                break;
            case R.id.icon_books:
                viewPager.setCurrentItem(1, false);
                zWidgetViews.get(1).setIconAlpha(1.0f);
                break;
            case R.id.icon_founds:
                viewPager.setCurrentItem(2, false);
                zWidgetViews.get(2).setIconAlpha(1.0f);
                break;
            case R.id.icon_am:
                viewPager.setCurrentItem(3, false);
                zWidgetViews.get(3).setIconAlpha(1.0f);
                break;
        }
    }

    /**
     * 重置其他tab的颜色
     */
    private void resetOtherTabs() {
        for (int i = 0; i < zWidgetViews.size(); i++) {
            zWidgetViews.get(i).setIconAlpha(0);
        }
    }

    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
        if (positionOffset > 0) {
            ZWidgetView left = zWidgetViews.get(position);
            ZWidgetView right = zWidgetViews.get(position + 1);
            left.setIconAlpha(1 - positionOffset);
            right.setIconAlpha(positionOffset);
        }
    }

    @Override
    public void onPageSelected(int position) {

    }

    @Override
    public void onPageScrollStateChanged(int state) {

    }

}

基本就这样了希望对你们有帮助