Android 高仿微信6.0主界面 切換圖標變色

轉載請標明出處：http://blog.csdn.net/lmj623565791/article/details/41087219，本文出自：【張鴻洋的博客】

1、概述

學習Android少不了模仿各種app的界面，自從微信6.0問世以後，就覺得微信切換時那個變色的Tab圖標屌屌的，今天我就帶大家自定義控件，帶你變色變得飛起~~

好了，下面先看下效果圖：

清晰度不太好，大家湊合看~~有木有覺得這個顏色弱爆了了的，，，下面我動動手指給你換個顏色：

有沒有這個顏色比較妖一點~~~好了~下面開始介紹原理。

2、原理介紹

通過上面的效果圖，大家可能也猜到了，我們的圖標並非是兩張圖片，而是一張圖，並且目標顏色是可定製的，誰讓現在動不動就談個性化呢。

那麼我們如何做到，可以讓圖標隨心所遇的變色了，其實原理，在我的博客中出現了很多次了，下面你將看到一張熟悉的圖：

有沒有很熟悉的感腳，我們實際上還是利用了Paint的Xfermode，這次我們使用的是：Mode.DST_IN

Dst_IN回顧一下什麼效果，先繪製Dst，設置Mode，再繪製Src，則顯示的是先後繪圖的交集區域，且是Dst.

再仔細觀察下我們的圖標：

爲了方便大家的觀看，我特意拿ps選擇了一下我們圖標的非透明區域，可以看到，我們這個小機器人非透明區域就是被線框起來的部分。

然後，我們圖標變色的原理就出現了：

1、先繪製一個顏色（例如：粉紅）

2、設置Mode=DST_IN

3、繪製我們這個可愛的小機器人

回答我，顯示什麼，是不是顯示交集，交集是什麼？交集是我們的小機器人的非透明區域，也就是那張臉，除了兩個眼；

好了，那怎麼變色呢？

我繪製一個顏色的時候，難道不能設置alpha麼~~~

到此，大家應該已經瞭解了我們圖標的繪製的原理了吧。

如果你對Mode不熟悉：建議移步至：Android 自定義控件實現刮刮卡效果 真的就只是刮刮卡麼

3、自定義圖標控件

我們的整個界面不用說，是ViewPager+Fragment ，現在關注的是底部~~

接下來我們考慮，底部的Tab，Tab我們的佈局是LinearLayout，內部四個View，通過設置weight達到均分~~

這個View就是我們的自定義的圖標控件了，我們叫做：ChangeColorIconWithTextView

接下來考慮，應該有什麼屬性公佈出來

1、自定義屬性

想了一下，我決定把圖標，圖標顏色，圖標下顯示的文字，文字大小這四個屬性作爲自定義屬性。

那就自定義屬性走起了：

a、values/attr.xml

<?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="ChangeColorIconView">
        <attr name="icon" />
        <attr name="color" />
        <attr name="text" />
        <attr name="text_size" />
    </declare-styleable>

</resources>

b、在佈局文件中使用

<com.zhy.weixin6.ui.ChangeColorIconWithTextView
           android:id="@+id/id_indicator_one"
           android:layout_width="0dp"
           android:layout_height="fill_parent"
           android:layout_weight="1"
           android:padding="5dp"
           zhy:icon="@drawable/ic_menu_start_conversation"
           zhy:text="@string/tab_weixin"
           zhy:text_size="12sp" />

自己注意命名空間的寫法，xmlns:zhy="http://schemas.android.com/apk/res/應用的包名"。

c、在構造方法中獲取

public class ChangeColorIconWithTextView extends View
{

    private Bitmap mBitmap;
    private Canvas mCanvas;
    private Paint mPaint;
    /**
     * 顏色
     */
    private int mColor = 0xFF45C01A;
    /**
     * 透明度 0.0-1.0
     */
    private float mAlpha = 0f;
    /**
     * 圖標
     */
    private Bitmap mIconBitmap;
    /**
     * 限制繪製icon的範圍
     */
    private Rect mIconRect;
    /**
     * icon底部文本
     */
    private String mText = "微信";
    private int mTextSize = (int) TypedValue.applyDimension(
            TypedValue.COMPLEX_UNIT_SP, 10, getResources().getDisplayMetrics());
    private Paint mTextPaint;
    private Rect mTextBound = new Rect();

    public ChangeColorIconWithTextView(Context context)
    {
        super(context);
    }

    /**
     * 初始化自定義屬性值
     *
     * @param context
     * @param attrs
     */
    public ChangeColorIconWithTextView(Context context, AttributeSet attrs)
    {
        super(context, attrs);

        // 獲取設置的圖標
        TypedArray a = context.obtainStyledAttributes(attrs,
                R.styleable.ChangeColorIconView);

        int n = a.getIndexCount();
        for (int i = 0; i < n; i++)
        {

            int attr = a.getIndex(i);
            switch (attr)
            {
            case R.styleable.ChangeColorIconView_icon:
                BitmapDrawable drawable = (BitmapDrawable) a.getDrawable(attr);
                mIconBitmap = drawable.getBitmap();
                break;
            case R.styleable.ChangeColorIconView_color:
                mColor = a.getColor(attr, 0x45C01A);
                break;
            case R.styleable.ChangeColorIconView_text:
                mText = a.getString(attr);
                break;
            case R.styleable.ChangeColorIconView_text_size:
                mTextSize = (int) a.getDimension(attr, TypedValue
                        .applyDimension(TypedValue.COMPLEX_UNIT_SP, 10,
                                getResources().getDisplayMetrics()));
                break;

            }
        }

        a.recycle();

        mTextPaint = new Paint();
        mTextPaint.setTextSize(mTextSize);
        mTextPaint.setColor(0xff555555);
        // 得到text繪製範圍
        mTextPaint.getTextBounds(mText, 0, mText.length(), mTextBound);

    }

可以看到，我們在構造方法中獲取了自定義的屬性，並且計算了文本佔據的控件存在我們的mTextBound中。

2、圖標的繪製區域的選擇

我們考慮下，有了屬性，我們需要繪製一個文本，文本之上一個圖標，我們怎麼去控制繪製的區域呢？
我們的View顯示區域，無非以下三種情況：

針對這三種情況，我門的圖標的邊長應該是什麼呢？

我覺得邊長應該是：控件的高度-文本的高度-內邊距   與  控件的寬度-內邊距  兩者的小值；大家仔細推敲一下；

好了，有了上面的邊長的結論，我們就開始計算圖標的繪製範圍了：

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

    // 得到繪製icon的寬
    int bitmapWidth = Math.min(getMeasuredWidth() - getPaddingLeft()
            - getPaddingRight(), getMeasuredHeight() - getPaddingTop()
            - getPaddingBottom() - mTextBound.height());

    int left = getMeasuredWidth() / 2 - bitmapWidth / 2;
    int top = (getMeasuredHeight() - mTextBound.height()) / 2 - bitmapWidth
            / 2;
    // 設置icon的繪製範圍
    mIconRect = new Rect(left, top, left + bitmapWidth, top + bitmapWidth);

}

3、繪製圖標

繪製圖標有很多步驟呀，我來列一列

1、計算alpha（默認爲0）

2、繪製原圖

3、在繪圖區域，繪製一個純色塊（設置了alpha），此步繪製在內存的bitmap上

4、設置mode，針對內存中的bitmap上的paint

5、繪製我們的圖標，此步繪製在內存的bitmap上

6、繪製原文本

7、繪製設置alpha和顏色後的文本

8、將內存中的bitmap繪製出來

根據上面的步驟，可以看出來，我們的圖標其實繪製了兩次，爲什麼要繪製原圖呢，因爲我覺得比較好看。

3-5步驟，就是我們上面分析的原理

6-7步，是繪製文本，可以看到，我們的文本就是通過設置alpha實現的

@Override
    protected void onDraw(Canvas canvas)
    {

        int alpha = (int) Math.ceil((255 * mAlpha));
        canvas.drawBitmap(mIconBitmap, null, mIconRect, null);
        setupTargetBitmap(alpha);
        drawSourceText(canvas, alpha);
        drawTargetText(canvas, alpha);
        canvas.drawBitmap(mBitmap, 0, 0, null);

    }

    private void setupTargetBitmap(int alpha)
    {
        mBitmap = Bitmap.createBitmap(getMeasuredWidth(), getMeasuredHeight(),
                Config.ARGB_8888);
        mCanvas = new Canvas(mBitmap);
        mPaint = new Paint();
        mPaint.setColor(mColor);
        mPaint.setAntiAlias(true);
        mPaint.setDither(true);
        mPaint.setAlpha(alpha);
        mCanvas.drawRect(mIconRect, mPaint);
        mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_IN));
        mPaint.setAlpha(255);
        mCanvas.drawBitmap(mIconBitmap, null, mIconRect, mPaint);
    }

    private void drawSourceText(Canvas canvas, int alpha)
    {
        mTextPaint.setTextSize(mTextSize);
        mTextPaint.setColor(0xff333333);
        mTextPaint.setAlpha(255 - alpha);
        canvas.drawText(mText, mIconRect.left + mIconRect.width() / 2
                - mTextBound.width() / 2,
                mIconRect.bottom + mTextBound.height(), mTextPaint);
    }

    private void drawTargetText(Canvas canvas, int alpha)
    {
        mTextPaint.setColor(mColor);
        mTextPaint.setAlpha(alpha);
        canvas.drawText(mText, mIconRect.left + mIconRect.width() / 2
                - mTextBound.width() / 2,
                mIconRect.bottom + mTextBound.height(), mTextPaint);

    }

關於繪製文本區域的計算，首先是起點x：mIconRect.left + mIconRect.width() / 2- mTextBound.width() / 2 有點長哈，文本mIconRect.left + mIconRect.width() / 2這個位置，在圖標水平區域的中心點，這個應該沒有疑問；圖標水平區域的中點- mTextBound.width() / 2 開始繪製文本，是不是就是居中在圖標的下面；

有人可能會問：你怎麼知道文本寬度小於圖標，我有5個字咋辦？5個字怎麼了，照樣是居中顯示，不信你試試~~

4、公佈設置透明度的方法

到此，我們的圖標控件寫完了，但是還沒有把我們的控制icon的方法放出去：

public void setIconAlpha(float alpha)
{
    this.mAlpha = alpha;
    invalidateView();
}

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

我們叫做setIconAlpha，避免了和setAlpha衝突，設置完成後，invalidate一下~~~

到此就真的結束了，接下來看用法。

4、實戰

1、佈局文件

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:zhy="http://schemas.android.com/apk/res/com.zhy.weixin6.ui"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

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

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

        <com.zhy.weixin6.ui.ChangeColorIconWithTextView
            android:id="@+id/id_indicator_one"
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:padding="5dp"
            zhy:icon="@drawable/ic_menu_start_conversation"
            zhy:text="@string/tab_weixin"
            zhy:text_size="12sp" />

        <com.zhy.weixin6.ui.ChangeColorIconWithTextView
            android:id="@+id/id_indicator_two"
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:padding="5dp"
            zhy:icon="@drawable/ic_menu_friendslist"
            zhy:text="@string/tab_contact"
            zhy:text_size="12sp" />

        <com.zhy.weixin6.ui.ChangeColorIconWithTextView
            android:id="@+id/id_indicator_three"
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:padding="5dp"
            zhy:icon="@drawable/ic_menu_emoticons"
            zhy:text="@string/tab_find"
            zhy:text_size="12sp" />

        <com.zhy.weixin6.ui.ChangeColorIconWithTextView
            android:id="@+id/id_indicator_four"
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:padding="5dp"
            zhy:icon="@drawable/ic_menu_allfriends"
            zhy:text="@string/tab_me"
            zhy:text_size="12sp" />
    </LinearLayout>

</LinearLayout>

2、MainActivity

package com.zhy.weixin6.ui;

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

import android.annotation.SuppressLint;
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.support.v4.view.ViewPager.OnPageChangeListener;
import android.view.Menu;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.ViewConfiguration;
import android.view.Window;

@SuppressLint("NewApi")
public class MainActivity extends FragmentActivity implements
        OnPageChangeListener, OnClickListener
{
    private ViewPager mViewPager;
    private List<Fragment> mTabs = new ArrayList<Fragment>();
    private FragmentPagerAdapter mAdapter;

    private String[] mTitles = new String[] { "First Fragment!",
            "Second Fragment!", "Third Fragment!", "Fourth Fragment!" };

    private List<ChangeColorIconWithTextView> mTabIndicator = new ArrayList<ChangeColorIconWithTextView>();

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

        setOverflowShowingAlways();
        getActionBar().setDisplayShowHomeEnabled(false);
        mViewPager = (ViewPager) findViewById(R.id.id_viewpager);

        initDatas();

        mViewPager.setAdapter(mAdapter);
        mViewPager.setOnPageChangeListener(this);
    }

    private void initDatas()
    {

        for (String title : mTitles)
        {
            TabFragment tabFragment = new TabFragment();
            Bundle args = new Bundle();
            args.putString("title", title);
            tabFragment.setArguments(args);
            mTabs.add(tabFragment);
        }

        mAdapter = new FragmentPagerAdapter(getSupportFragmentManager())
        {

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

            @Override
            public Fragment getItem(int arg0)
            {
                return mTabs.get(arg0);
            }
        };

        initTabIndicator();

    }

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

    private void initTabIndicator()
    {
        ChangeColorIconWithTextView one = (ChangeColorIconWithTextView) findViewById(R.id.id_indicator_one);
        ChangeColorIconWithTextView two = (ChangeColorIconWithTextView) findViewById(R.id.id_indicator_two);
        ChangeColorIconWithTextView three = (ChangeColorIconWithTextView) findViewById(R.id.id_indicator_three);
        ChangeColorIconWithTextView four = (ChangeColorIconWithTextView) findViewById(R.id.id_indicator_four);

        mTabIndicator.add(one);
        mTabIndicator.add(two);
        mTabIndicator.add(three);
        mTabIndicator.add(four);

        one.setOnClickListener(this);
        two.setOnClickListener(this);
        three.setOnClickListener(this);
        four.setOnClickListener(this);

        one.setIconAlpha(1.0f);
    }

    @Override
    public void onPageSelected(int arg0)
    {
    }

    @Override
    public void onPageScrolled(int position, float positionOffset,
            int positionOffsetPixels)
    {
        // Log.e("TAG", "position = " + position + " , positionOffset = "
        // + positionOffset);

        if (positionOffset > 0)
        {
            ChangeColorIconWithTextView left = mTabIndicator.get(position);
            ChangeColorIconWithTextView right = mTabIndicator.get(position + 1);

            left.setIconAlpha(1 - positionOffset);
            right.setIconAlpha(positionOffset);
        }

    }

    @Override
    public void onPageScrollStateChanged(int state)
    {

    }

    @Override
    public void onClick(View v)
    {

        resetOtherTabs();

        switch (v.getId())
        {
        case R.id.id_indicator_one:
            mTabIndicator.get(0).setIconAlpha(1.0f);
            mViewPager.setCurrentItem(0, false);
            break;
        case R.id.id_indicator_two:
            mTabIndicator.get(1).setIconAlpha(1.0f);
            mViewPager.setCurrentItem(1, false);
            break;
        case R.id.id_indicator_three:
            mTabIndicator.get(2).setIconAlpha(1.0f);
            mViewPager.setCurrentItem(2, false);
            break;
        case R.id.id_indicator_four:
            mTabIndicator.get(3).setIconAlpha(1.0f);
            mViewPager.setCurrentItem(3, false);
            break;

        }

    }

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

    @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);
    }

    private void setOverflowShowingAlways()
    {
        try
        {
            // true if a permanent menu key is present, false otherwise.
            ViewConfiguration config = ViewConfiguration.get(this);
            Field menuKeyField = ViewConfiguration.class
                    .getDeclaredField("sHasPermanentMenuKey");
            menuKeyField.setAccessible(true);
            menuKeyField.setBoolean(config, false);
        } catch (Exception e)
        {
            e.printStackTrace();
        }
    }

}

Activity裏面代碼雖然沒什麼註釋，但是很簡單哈，就是初始化Fragment，得到我們的適配器，然後設置給ViewPager；

initTabIndicator我們初始化我們的自定義控件，以及加上了點擊事件；

唯一一個需要指出的就是：

我們在onPageScrolled中，動態的獲取position以及positionOffset，然後拿到左右兩個View，設置positionOffset ；

這裏表示下慚愧，曾經在高仿微信5.2.1主界面架構 包含消息通知 的onPageScrolled中寫了一堆的if else，在視頻上線後，也有同學立馬就提出了，一行代碼搞定~~

所以，我們這裏簡單找了下規律，已經沒有if else的身影了~~~

還剩兩個反射的方法，是控制Actionbar的圖標的，和點擊menu按鍵，將ActionBar的menu顯示在正常區域的~~

3、TabFragment

package com.zhy.weixin6.ui;

import android.graphics.Color;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

public class TabFragment extends Fragment
{
    private String mTitle = "Default";


    public TabFragment()
    {
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState)
    {
        if (getArguments() != null)
        {
            mTitle = getArguments().getString("title");
        }

        TextView textView = new TextView(getActivity());
        textView.setTextSize(20);
        textView.setBackgroundColor(Color.parseColor("#ffffffff"));
        textView.setGravity(Gravity.CENTER);
        textView.setText(mTitle);
        return textView;
    }
}

好了，到此我們的整個案例就結束了~~

大家可以在佈局文件中設置各種顏色，4個不同顏色也可以，盡情的玩耍吧~~

源碼點擊下載