下次自动登录
Geeker的编程技术博客
现在的位置:
Android 微信6.1 tab栏图标和字体颜色渐变的实现
相信大家都见到了微信图标颜色渐变的过程，是不是感觉很牛逼？不得不说微信团队确实是很厉害的团队，不管是从设计还是开发人员。
今天我带大家来看看，微信 tab 栏图标和字体颜色渐变的过程。先上图吧！今天学了一招制作 gif 动态图的快捷方法。刚好用的上，以前一直想写点什么东西，
苦于一直不知道怎么生成动态图，现在终于学会了，哈哈，让我偷偷的乐一会。额，还是上图吧。。。
好了，效果图也看到了，那么我也就不多啰嗦了，直接进入主题，看代码
package moon.wechat.
import android.content.C
import android.graphics.B
import android.graphics.BitmapF
import android.graphics.C
import android.graphics.P
import android.graphics.R
import android.util.AttributeS
import android.util.TypedV
import android.view.V
* Created by moon.zhong on .
public class TabItem extends View {
/*字体大小*/
private int mTextS
/*字体选中的颜色*/
private int mTextColorS
/*字体未选择的时候的颜色*/
private int mTextColorN
/*绘制未选中时字体的画笔*/
private Paint mTextPaintN
/*绘制已选中时字体的画笔*/
private Paint mTextPaintS
/*每个 item 的宽和高，包括字体和图标一起*/
private int mViewHeight, mViewW
/*字体的内容*/
private String mTextV
/*已选中时的图标*/
private Bitmap mIconN
/*未选中时的图标*/
private Bitmap mIconS
/*用于记录字体大小*/
private Rect mBoundT
/*已选中是图标的画笔*/
private Paint mIconPaintS
/*为选中时图标的画笔*/
private Paint mIconPaintN
public TabItem(Context context) {
this(context, null);
public TabItem(Context context, AttributeSet attrs) {
this(context, attrs, 0);
public TabItem(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
initView();
initText();
/*初始化一些东西*/
private void initView() {
mBoundText = new Rect();
/*初始化画笔，并设置出是内容*/
private void initText() {
mTextPaintNormal = new Paint();
mTextPaintNormal.setTextSize(TypedValue.PLEX_UNIT_SP, mTextSize, getResources().getDisplayMetrics()));
mTextPaintNormal.setColor(mTextColorNormal);
mTextPaintNormal.setAntiAlias(true);
mTextPaintNormal.setAlpha(0xff);
mTextPaintSelect = new Paint();
mTextPaintSelect.setTextSize(TypedValue.PLEX_UNIT_SP, mTextSize, getResources().getDisplayMetrics()));
mTextPaintSelect.setColor(mTextColorSelect);
mTextPaintSelect.setAntiAlias(true);
mTextPaintSelect.setAlpha(0);
mIconPaintSelect = new Paint(Paint.ANTI_ALIAS_FLAG) ;
mIconPaintSelect.setAlpha(0);
mIconPaintNormal = new Paint(Paint.ANTI_ALIAS_FLAG) ;
mIconPaintNormal.setAlpha(0xff);
/*测量字体的大小*/
private void measureText() {
mTextPaintNormal.getTextBounds(mTextValue, 0, mTextValue.length(), mBoundText);
/*测量字体和图标的大小，并设置自身的宽和高*/
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
int widthMode = MeasureSpec.getMode(widthMeasureSpec);
int heightMode = MeasureSpec.getMode(heightMeasureSpec);
int widthSize = MeasureSpec.getSize(widthMeasureSpec);
int heightSize = MeasureSpec.getSize(heightMeasureSpec);
int width = 0, height = 0;
measureText();
int contentWidth = Math.max(mBoundText.width(), mIconNormal.getWidth());
int desiredWidth = getPaddingLeft() + getPaddingRight() + contentW
switch (widthMode) {
case MeasureSpec.AT_MOST:
width = Math.min(widthSize, desiredWidth);
case MeasureSpec.EXACTLY:
width = widthS
case MeasureSpec.UNSPECIFIED:
width = desiredW
int contentHeight = mBoundText.height() + mIconNormal.getHeight();
int desiredHeight = getPaddingTop() + getPaddingBottom() + contentH
switch (heightMode) {
case MeasureSpec.AT_MOST:
height = Math.min(heightSize, desiredHeight);
case MeasureSpec.EXACTLY:
height = heightS
case MeasureSpec.UNSPECIFIED:
height = contentH
setMeasuredDimension(width, height);
mViewWidth = getMeasuredWidth() ;
mViewHeight = getMeasuredHeight() ;
protected void onDraw(Canvas canvas) {
drawBitmap(canvas) ;
drawText(canvas) ;
/*话图标，先画为选中的图标，在画已选中的图标*/
private void drawBitmap(Canvas canvas) {
int left = (mViewWidth - mIconNormal.getWidth())/2 ;
int top = (mViewHeight - mIconNormal.getHeight() - mBoundText.height()) /2 ;
canvas.drawBitmap(mIconNormal, left, top ,mIconPaintNormal);
canvas.drawBitmap(mIconSelect, left, top , mIconPaintSelect);
/*画字体*/
private void drawText(Canvas canvas) {
float x = (mViewWidth - mBoundText.width())/2.0
float y = (mViewHeight + mIconNormal.getHeight() + mBoundText.height()) /2.0F ;
canvas.drawText(mTextValue,x,y, mTextPaintNormal);
canvas.drawText(mTextValue,x,y, mTextPaintSelect);
public void setTextSize(int textSize) {
this.mTextSize = textS
mTextPaintNormal.setTextSize(textSize);
mTextPaintSelect.setTextSize(textSize);
public void setTextColorSelect(int mTextColorSelect) {
this.mTextColorSelect = mTextColorS
mTextPaintSelect.setColor(mTextColorSelect);
mTextPaintSelect.setAlpha(0);
public void setTextColorNormal(int mTextColorNormal) {
this.mTextColorNormal = mTextColorN
mTextPaintNormal.setColor(mTextColorNormal);
mTextPaintNormal.setAlpha(0xff);
public void setTextValue(String TextValue) {
this.mTextValue = TextV
public void setIconText(int[] iconSelId,String TextValue) {
this.mIconSelect = BitmapFactory.decodeResource(getResources(), iconSelId[0]);
this.mIconNormal = BitmapFactory.decodeResource(getResources(), iconSelId[1]);
this.mTextValue = TextV
/*通过 alpha 来设置 每个画笔的透明度，从而实现现实的效果*/
public void setTabAlpha(float alpha){
int paintAlpha = (int)(alpha*255) ;
mIconPaintSelect.setAlpha(paintAlpha);
mIconPaintNormal.setAlpha(255-paintAlpha);
mTextPaintSelect.setAlpha(paintAlpha);
mTextPaintNormal.setAlpha(255-paintAlpha);
invalidate();
分析： 以上代码，功能实现 tab 的每个 item 的内容，在微信的项目中也就是，一个图标加一个字体，
关键代码就在public void setTabAlpha(float alpha) 这个方法，此方法是 viewPager 切换 item 时，不断改变偏移量来调用，从而不断改变
每个画笔的透明度，实现图标和颜色的渐变；是不是很简单？到这里其实我们颜色渐变的代码就已经实现了。接下来的内容可以忽略
这样我们只需要在 MainActivity 的 xml 中定义一个线性布局，然后放如四个我们自定义的 View 进去，就可以了。但是这样你就满足了吗？
我先来给你们看看我的MainActivity 的 代码；
package moon.
import android.support.v4.app.F
import android.support.v4.app.FragmentM
import android.support.v4.app.FragmentPagerA
import android.support.v4.view.ViewP
import android.support.v7.app.ActionBarA
import android.os.B
import java.util.HashM
import java.util.M
import moon.wechat.view.TabV
public class MainActivity extends ActionBarActivity {
private String[] mTitle = {&微信&, &通讯录&, &发现&, &我&};
private int[] mIconSelect = {R.drawable.al_, R.drawable.al8, R.drawable.alb, R.drawable.ald};
private int[] mIconNormal = {R.drawable.ala, R.drawable.al9, R.drawable.alc, R.drawable.ale};
private ViewPager mViewP
private TabView mTabV
private Map&Integer,Fragment& mFragmentM
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mFragmentMap = new HashMap&&() ;
mViewPager = (ViewPager)findViewById(R.id.id_view_pager) ;
mViewPager.setOffscreenPageLimit(4);
mViewPager.setAdapter(new PageAdapter(getSupportFragmentManager()));
mTabView = (TabView)findViewById(R.id.id_tab) ;
mTabView.setViewPager(mViewPager);
private Fragment getFragment(int position){
Fragment fragment = mFragmentMap.get(position) ;
if(fragment == null){
switch (position){
fragment = new WeChatFragment() ;
fragment = new WeContactFragment();
fragment = new WeDiscoverFragment();
fragment = new GameFragment() ;
fragment = new WeMineFragment();
mFragmentMap.put(position,fragment) ;
class PageAdapter extends FragmentPagerAdapter implements TabView.OnItemIconTextSelectListener{
public PageAdapter(FragmentManager fm) {
super(fm);
public Fragment getItem(int position) {
return getFragment(position);
public int[] onIconSelect(int position) {
int icon[] = new int[2] ;
icon[0] = mIconSelect[position] ;
icon[1] = mIconNormal[position] ;
public String onTextSelect(int position) {
return mTitle[position];
public int getCount() {
return mTitle.
是不是很简单，而 xml 更简单
&LinearLayout xmlns:android=&/apk/res/android&
xmlns:zgy=&/apk/res-auto&
android:layout_width=&match_parent&
android:layout_height=&match_parent&
android:background=&@android:color/white&
android:orientation=&vertical&&
&android.support.v4.view.ViewPager
android:id=&@+id/id_view_pager&
android:layout_width=&match_parent&
android:layout_height=&wrap_content&
android:layout_weight=&1&
&/android.support.v4.view.ViewPager&
&moon.wechat.view.TabView
android:id=&@+id/id_tab&
android:layout_width=&match_parent&
android:layout_height=&wrap_content&
android:orientation=&horizontal&
android:background=&#eeeeee&
zgy:text_size=&12sp&
zgy:text_normal_color=&#ff777777&
zgy:text_select_color=&#ff45c01a&
zgy:item_padding=&7dp&&
&/moon.wechat.view.TabView&
&/LinearLayout&
可以看到没有定义我们刚刚自定义的 TabItem，而是使用的 TabView，那 TabView 到底是啥东西？相信大家都想到了，TabView 其实就是我们自定义的线性布局，
package moon.wechat.
import android.content.C
import android.content.res.TypedA
import android.support.v4.view.PagerA
import android.support.v4.view.ViewP
import android.util.AttributeS
import android.util.L
import android.util.TypedV
import android.view.V
import android.view.ViewG
import android.widget.LinearL
import java.util.ArrayL
import java.util.L
import moon.wechat.R;
* Created by moon.zhong on .
public class TabView extends LinearLayout implements View.OnClickListener {
private ViewPager mViewP
private ViewPager.OnPageChangeListener mOnPageChangeL
private PagerAdapter mPagerA
private int mChildS
private List&TabItem& mTabI
private OnItemIconTextSelectListener mL
private int mTextSize = 12;
private int mTextColorSelect = 0xff45c01a;
private int mTextColorNormal = 0xff777777;
private int mPadding = 10;
public TabView(Context context) {
this(context, null);
public TabView(Context context, AttributeSet attrs) {
this(context, attrs, 0);
public TabView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
TypedArray typedArray = getResources().obtainAttributes(attrs, R.styleable.TabView);
int N = typedArray.getIndexCount();
for (int i = 0; i & N; i++) {
switch (typedArray.getIndex(i)) {
case R.styleable.TabView_text_size:
mTextSize = (int) typedArray.getDimension(i, TypedValue.PLEX_UNIT_SP,
mTextSize, getResources().getDisplayMetrics()));
case R.styleable.TabView_text_normal_color:
mTextColorNormal = typedArray.getColor(i, mTextColorNormal);
case R.styleable.TabView_text_select_color:
mTextColorSelect = typedArray.getColor(i, mTextColorSelect);
case R.styleable.TabView_item_padding:
mPadding = (int) typedArray.getDimension(i, TypedValue.PLEX_UNIT_DIP,
mPadding, getResources().getDisplayMetrics()));
typedArray.recycle();
mTabItems = new ArrayList&&();
public void setViewPager(final ViewPager mViewPager) {
if (mViewPager == null) {
this.mViewPager = mViewP
this.mPagerAdapter = mViewPager.getAdapter();
if (this.mPagerAdapter == null) {
throw new RuntimeException(&亲，在您设置TabView的ViewPager时，请先设置ViewPager的PagerAdapter&);
this.mChildSize = this.mPagerAdapter.getCount();
this.mViewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
Log.v(&zgy&,&=============position=&+position+&,====positionOffset=&+positionOffset) ;
View leftV
View rightV
if (positionOffset & 0) {
leftView = mViewPager.getChildAt(position);
rightView = mViewPager.getChildAt(position + 1);
leftView.setAlpha(1 - positionOffset);
rightView.setAlpha(positionOffset);
mTabItems.get(position).setTabAlpha(1 - positionOffset);
mTabItems.get(position + 1).setTabAlpha(positionOffset);
mViewPager.getChildAt(position).setAlpha(1);
mTabItems.get(position).setTabAlpha(1 - positionOffset);
if (mOnPageChangeListener != null) {
mOnPageChangeListener.onPageScrolled(position, positionOffset, positionOffsetPixels);
public void onPageSelected(int position) {
if (mOnPageChangeListener != null) {
mOnPageChangeListener.onPageSelected(position);
public void onPageScrollStateChanged(int state) {
if (mOnPageChangeListener != null) {
mOnPageChangeListener.onPageScrollStateChanged(state);
if (mPagerAdapter instanceof OnItemIconTextSelectListener) {
mListener = (OnItemIconTextSelectListener) mPagerA
throw new RuntimeException(&请让你的pageAdapter实现OnItemIconTextSelectListener接口&);
initItem();
public void setOnPageChangeListener(ViewPager.OnPageChangeListener mOnPageChangeListener) {
this.mOnPageChangeListener = mOnPageChangeL
private void initItem() {
for (int i = 0; i & mChildS i++) {
TabItem tabItem = new TabItem(getContext());
LayoutParams params = new LayoutParams(0, ViewGroup.LayoutParams.WRAP_CONTENT, 1);
tabItem.setPadding(mPadding, mPadding, mPadding, mPadding);
tabItem.setIconText(mListener.onIconSelect(i), mListener.onTextSelect(i));
tabItem.setTextSize(mTextSize);
tabItem.setTextColorNormal(mTextColorNormal);
tabItem.setTextColorSelect(mTextColorSelect);
tabItem.setLayoutParams(params);
tabItem.setTag(i);
tabItem.setOnClickListener(this);
mTabItems.add(tabItem);
addView(tabItem);
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
public void onClick(View v) {
int position = (Integer) v.getTag();
if (mViewPager.getCurrentItem() == position) {
for (TabItem tabItem : mTabItems) {
tabItem.setTabAlpha(0);
mTabItems.get(position).setTabAlpha(1);
mViewPager.setCurrentItem(position, false);
public interface OnItemIconTextSelectListener {
int[] onIconSelect(int position);
String onTextSelect(int position);
注释有点少，额，不是少，是压根就没有，其实，这个类的代码不需要注释，我相信大家都能看懂，我就讲下他的作用吧，
1、添加 item&
2、监听 ViewPager 的滚动事件，从而设置相应 item 之间的颜色渐变，
3、设置相应 ViewPage 的透明度
4、为 TabItem 设置监听事件，
其实上面很多功能本来是在 MainActivity 中实现的，为了减少 Activity 内部的代码量，抽取出来，到达低耦合，高内聚的效果。
Ok，以上就是 微信6.1 tab 栏颜色渐变效果的实现全过程。
【上篇】【下篇】
您可能还会对这些文章感兴趣！
同分类最新文章君，已阅读到文档的结尾了呢~~
扫扫二维码，随身浏览文档
手机或平板扫扫即可继续访问
安卓版的QQ与微信修改图标及欢迎页面的方法
举报该文档为侵权文档。
举报该文档含有违规或不良信息。
反馈该文档无法正常浏览。
举报该文档为重复文档。
推荐理由：
将文档分享至：
分享完整地址
文档地址：
粘贴到BBS或博客
flash地址：
支持嵌入FLASH地址的网站使用
html代码：
&embed src='/DocinViewer-4.swf' width='100%' height='600' type=application/x-shockwave-flash ALLOWFULLSCREEN='true' ALLOWSCRIPTACCESS='always'&&/embed&
450px*300px480px*400px650px*490px
支持嵌入HTML代码的网站使用
您的内容已经提交成功
您所提交的内容需要审核后才能发布，请您等待！
3秒自动关闭窗口安卓系统的微信收到信息,图标上边_百度知道
安卓系统的微信收到信息,图标上边
我有更好的答案
什么情况，你可以说的具体些！或者截图看看!
没有未读短信的提示
左上边会有提示
其他类似问题
为您推荐：
安卓系统的相关知识
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁微信3.5.204 for Android 最新版微信（圆图标）-东坡下载
东坡下载：内容最丰富最安全的下载站！|||
→ 微信 3.5.204 for Android 最新版微信（圆图标）
最新版的微信，版本号3.5.204 今天早上自己修改的圆图标，喜欢的乐友拿去试试看，自己测试过，完全正常： 发布版本：微信3.5.204 for Android 微信是一款手机通信软件，支持通过手机网络发送语音短信、视频、图片和文字，可以单聊及群聊，还能根据地理位置找到附近的人，带给朋友们全新的移动沟通体验。支持ios、Android、塞班等多种平台手机。微信，不只是个！
微信相关软件
电脑版相关
手机版相关
12.3M / 06-03 / 2.0.5.1 中文安装版
24.7M / 09-29 / 4.8.4 官方最新版
22.8M / 06-03 / 4.1.1.14743 官方最新版
384KB / 11-05 / 1.0 绿色免费版
284KB / 11-05 / 1.0 绿色免费版
本类软件排行
装机必备软件
约炮交友购物游戏苹果安卓微信多开多账户登陆教程图解(附件微信多帐号软件下载)
作者：佚名
字体：[ ] 来源：互联网 时间：02-10 10:00:04
如今微信已经成为我们工作和生活的一部分，微信可以多账户登录吗?今天小编就教大家一个方法，无需越狱，支持iPhone手机及安卓手机的微信多开多账户登陆教程！iPhone平台暂时只支持3个，安卓最多支持安装100个微信
& 如今微信已经成为我们工作和生活的一部分，但是有时候在工作中有人要加微信，而我们却不想让工作和生活相混合，难道我们要退出换账号让人家扫码！？如果微信支持多开就好了，仿佛和PC版的QQ那样，同时可以登录2个以上账号！那有没有可能实现呢？微信可以多账户登录吗?今天小编就教大家一个方法，无需越狱，支持iPhone及安卓手机的微信多开多账户登陆教程！iPhone平台暂时只支持3个，安卓最多支持安装100个微信。
& 苹果iPhone版的多开方法
& 我们只需打开篇尾提供的链接（自己可以上t cn或者126 am上弄成短网址），用iPhone上的Safari浏览器打开，就会看到如下界面：
& 带上我们之前从APP Store上下载的，就是3个了，我们先点击安装第二个微信，之后会弹出如下界面：
& 直接点安装，就会和我们平常安装APP一样的进度条了。
& 以此类推安装第三个。
& 安装第三个的时候，运行第二个微信会提示，我们点&继续&。
& 等第三个也安装好之后，就哦了!看到下图上三个微信了吗？
& 支持iOS6及iOS7系统，iOS5暂未测试，不过应该没问题。
& 安卓微信多账户登陆方法
& 2014的新版，已经支持100个微信的安装了，前提是你的手机能抗的住，哈哈！需要用到的就是微信多账号这款软件，有Google Play的上去搜索com.fanxp.multiapp就能找到了
& 使用方法很简单，打开之后，先&安装一个微信&，点击下就OK了。
& 之后自动开始安装，无需我们干预。
& 安装成功之后，后面会多一个卸载按钮，好了，我们接着按照上面的方法安装下一个。
& 以此类推，你有多少个账号，就安装多少个吧。
& 下张图仿佛和上一张类似，但是看到顶部的微信图标估计你已经懂了，推送神马的都是没有问题的。
& 多账户的绑定神马的，也是没问题的。
& 看看应用里，是不是有3个微信啊。
& 微信多开多账户登陆教程就介绍到这，就是这么简单，希望能帮助和自己有同样需求的朋友，办公、生活两不误！记得别把所有微信都放一块啊，弄个文件夹什么的，或者把常用的微信，改图标放起来。
安卓微信多账户：
iPhone微信多账户安装地址：
大家感兴趣的内容
12345678910
最近更新的内容}