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
接下来考虑，应该有什么属性公布出来
想了一下，我决定把图标，图标颜色，图标下显示的文字，文字大小这四个属性作为自定义属性。
那就自定义属性走起了：
a、values/attr.xml
[java] view plain copy
<?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、在布局文件中使用
[html] view plain copy
<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);
case r.styleable.changecoloriconview_text:
mtext = a.getstring(attr);
case r.styleable.changecoloriconview_text_size:
mtextsize = (int) a.getdimension(attr, typedvalue
.applydimension(typedvalue.complex_unit_sp, 10,
getresources().getdisplaymetrics()));
}
}
a.recycle();
mtextpaint = new paint();
mtextpaint.settextsize(mtextsize);
mtextpaint.setcolor(0xff555555);
// 得到text绘制范围
mtextpaint.gettextbounds(mtext, 0, mtext.length(), mtextbound);
可以看到，我们在构造方法中获取了自定义的属性，并且计算了文本占据的控件存在我们的mtextbound中。
我们考虑下，有了属性，我们需要绘制一个文本，文本之上一个图标，我们怎么去控制绘制的区域呢？
我们的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);
}
绘制图标有很多步骤呀，我来列一列
1、计算alpha（默认为0）
2、绘制原图
3、在绘图区域，绘制一个纯色块（设置了alpha），此步绘制在内存的bitmap上
4、设置mode，针对内存中的bitmap上的paint
5、绘制我们的图标，此步绘制在内存的bitmap上
6、绘制原文本
7、绘制设置alpha和颜色后的文本
8、将内存中的bitmap绘制出来
根据上面的步骤，可以看出来，我们的图标其实绘制了两次，为什么要绘制原图呢，因为我觉得比较好看。
3-5步骤，就是我们上面分析的原理
6-7步，是绘制文本，可以看到，我们的文本就是通过设置alpha实现的
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.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);
关于绘制文本区域的计算，首先是起点x：miconrect.left + miconrect.width() / 2- mtextbound.width() / 2 有点长哈，文本miconrect.left + miconrect.width() / 2这个位置，在图标水平区域的中心点，这个应该没有疑问；图标水平区域的中点- mtextbound.width() / 2 开始绘制文本，是不是就是居中在图标的下面；
有人可能会问：你怎么知道文本宽度小于图标，我有5个字咋办？5个字怎么了，照样是居中显示，不信你试试~~
到此，我们的图标控件写完了，但是还没有把我们的控制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、实战
<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_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" />
android:id="@+id/id_indicator_two"
zhy:icon="@drawable/ic_menu_friendslist"
zhy:text="@string/tab_contact"
android:id="@+id/id_indicator_three"
zhy:icon="@drawable/ic_menu_emoticons"
zhy:text="@string/tab_find"
android:id="@+id/id_indicator_four"
zhy:icon="@drawable/ic_menu_allfriends"
zhy:text="@string/tab_me"
</linearlayout>
</linearlayout>
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();
public fragment getitem(int arg0)
return mtabs.get(arg0);
};
inittabindicator();
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);
public void onpageselected(int arg0)
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);
public void onpagescrollstatechanged(int state)
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);
case r.id.id_indicator_three:
mtabindicator.get(2).seticonalpha(1.0f);
mviewpager.setcurrentitem(2, false);
case r.id.id_indicator_four:
mtabindicator.get(3).seticonalpha(1.0f);
mviewpager.setcurrentitem(3, false);
* 重置其他的tab
private void resetothertabs()
for (int i = 0; i < mtabindicator.size(); i++)
mtabindicator.get(i).seticonalpha(0);
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显示在正常区域的~~
import android.graphics.color;
import android.view.gravity;
import android.view.layoutinflater;
import android.view.viewgroup;
import android.widget.textview;
public class tabfragment extends fragment
private string mtitle = "default";
public tabfragment()
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个不同颜色也可以，尽情的玩耍