当前位置: 开发笔记 > 前端 > 正文

Android微信6.1tab栏图标和字体颜色渐变的实现

作者：达人多多宝_836 | 来源：互联网 | 2022-10-05 18:20

本文主要对微信6.1tab栏颜色渐变效果的实现全过程进行分析介绍，具有很好的参考价值，下面跟着小编一起来看下吧

相信大家都见到了微信图标颜色渐变的过程，是不是感觉很牛逼？不得不说微信团队确实是很厉害的团队，不管是从设计还是开发人员。

今天我带大家来看看，微信 tab 栏图标和字体颜色渐变的过程。先上图吧！今天学了一招制作 gif 动态图的快捷方法。刚好用的上，以前一直想写点什么东西，

苦于一直不知道怎么生成动态图，现在终于学会了，哈哈，让我偷偷的乐一会。额，还是上图吧。。。

好了，效果图也看到了，那么我也就不多啰嗦了，直接进入主题，看代码

[java] view plain copy
package moon.wechat.view; 
import android.content.Context; 
import android.graphics.Bitmap; 
import android.graphics.BitmapFactory; 
import android.graphics.Canvas; 
import android.graphics.Paint; 
import android.graphics.Rect; 
import android.util.AttributeSet; 
import android.util.TypedValue; 
import android.view.View; 
/** 
 * Created by moon.zhong on 2015/2/4. 
 */ 
public class TabItem extends View { 
  /*字体大小*/ 
  private int mTextSize ; 
  /*字体选中的颜色*/ 
  private int mTextColorSelect ; 
  /*字体未选择的时候的颜色*/ 
  private int mTextColorNormal; 
  /*绘制未选中时字体的画笔*/ 
  private Paint mTextPaintNormal; 
  /*绘制已选中时字体的画笔*/ 
  private Paint mTextPaintSelect; 
  /*每个 item 的宽和高，包括字体和图标一起*/ 
  private int mViewHeight, mViewWidth; 
  /*字体的内容*/ 
  private String mTextValue ; 
  /*已选中时的图标*/ 
  private Bitmap mIconNormal; 
  /*未选中时的图标*/ 
  private Bitmap mIconSelect; 
  /*用于记录字体大小*/ 
  private Rect mBoundText; 
  /*已选中是图标的画笔*/ 
  private Paint mIconPaintSelect; 
  /*为选中时图标的画笔*/ 
  private Paint mIconPaintNormal; 
  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.applyDimension(TypedValue.COMPLEX_UNIT_SP, mTextSize, getResources().getDisplayMetrics())); 
    mTextPaintNormal.setColor(mTextColorNormal); 
    mTextPaintNormal.setAntiAlias(true); 
    mTextPaintNormal.setAlpha(0xff); 
    mTextPaintSelect = new Paint(); 
    mTextPaintSelect.setTextSize(TypedValue.applyDimension(TypedValue.COMPLEX_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); 
  } 
  /*测量字体和图标的大小，并设置自身的宽和高*/ 
  @Override 
  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() + contentWidth; 
    switch (widthMode) { 
      case MeasureSpec.AT_MOST: 
        width = Math.min(widthSize, desiredWidth); 
        break; 
      case MeasureSpec.EXACTLY: 
        width = widthSize; 
        break; 
      case MeasureSpec.UNSPECIFIED: 
        width = desiredWidth; 
        break; 
    } 
    int cOntentHeight= mBoundText.height() + mIconNormal.getHeight(); 
    int desiredHeight = getPaddingTop() + getPaddingBottom() + contentHeight; 
    switch (heightMode) { 
      case MeasureSpec.AT_MOST: 
        height = Math.min(heightSize, desiredHeight); 
        break; 
      case MeasureSpec.EXACTLY: 
        height = heightSize; 
        break; 
      case MeasureSpec.UNSPECIFIED: 
        height = contentHeight; 
        break; 
    } 
    setMeasuredDimension(width, height); 
    mViewWidth = getMeasuredWidth() ; 
    mViewHeight = getMeasuredHeight() ; 
  } 
  @Override 
  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.0f ; 
    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 = textSize; 
    mTextPaintNormal.setTextSize(textSize); 
    mTextPaintSelect.setTextSize(textSize); 
  } 
  public void setTextColorSelect(int mTextColorSelect) { 
    this.mTextColorSelect = mTextColorSelect; 
    mTextPaintSelect.setColor(mTextColorSelect); 
    mTextPaintSelect.setAlpha(0); 
  } 
  public void setTextColorNormal(int mTextColorNormal) { 
    this.mTextColorNormal = mTextColorNormal; 
    mTextPaintNormal.setColor(mTextColorNormal); 
    mTextPaintNormal.setAlpha(0xff); 
  } 
  public void setTextValue(String TextValue) { 
    this.mTextValue = TextValue; 
  } 
  public void setIconText(int[] iconSelId,String TextValue) { 
    this.mIcOnSelect= BitmapFactory.decodeResource(getResources(), iconSelId[0]); 
    this.mIcOnNormal= BitmapFactory.decodeResource(getResources(), iconSelId[1]); 
    this.mTextValue = TextValue; 
  } 
  /*通过 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的代码；

[java] view plain copy
package moon.wechat; 
import android.support.v4.app.Fragment; 
import android.support.v4.app.FragmentManager; 
import android.support.v4.app.FragmentPagerAdapter; 
import android.support.v4.view.ViewPager; 
import android.support.v7.app.ActionBarActivity; 
import android.os.Bundle; 
import java.util.HashMap; 
import java.util.Map; 
import moon.wechat.view.TabView; 
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 mViewPager ; 
  private TabView mTabView ; 
  private Map mFragmentMap ; 
  @Override 
  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){ 
        case 0: 
          fragment = new WeChatFragment() ; 
          break ; 
        case 1: 
          fragment = new WeContactFragment(); 
          break ; 
        case 2: 
          fragment = new WeDiscoverFragment(); 
          break; 
        case 3: 
          fragment = new GameFragment() ; 
//          fragment = new WeMineFragment(); 
          break; 
      } 
      mFragmentMap.put(position,fragment) ; 
    } 
    return fragment ; 
  } 
  class PageAdapter extends FragmentPagerAdapter implements TabView.OnItemIconTextSelectListener{ 
    public PageAdapter(FragmentManager fm) { 
      super(fm); 
    } 
    @Override 
    public Fragment getItem(int position) { 
      return getFragment(position); 
    } 
    @Override 
    public int[] onIconSelect(int position) { 
      int icon[] = new int[2] ; 
      icon[0] = mIconSelect[position] ; 
      icon[1] = mIconNormal[position] ; 
      return icon; 
    } 
    @Override 
    public String onTextSelect(int position) { 
      return mTitle[position]; 
    } 
    @Override 
    public int getCount() { 
      return mTitle.length; 
    } 
  } 
}

是不是很简单，而 xml 更简单

[html] view plain copy

可以看到没有定义我们刚刚自定义的 TabItem，而是使用的 TabView，那 TabView 到底是啥东西？相信大家都想到了，TabView 其实就是我们自定义的线性布局，

[java] view plain copy
package moon.wechat.view; 
import android.content.Context; 
import android.content.res.TypedArray; 
import android.support.v4.view.PagerAdapter; 
import android.support.v4.view.ViewPager; 
import android.util.AttributeSet; 
import android.util.Log; 
import android.util.TypedValue; 
import android.view.View; 
import android.view.ViewGroup; 
import android.widget.LinearLayout; 
import java.util.ArrayList; 
import java.util.List; 
import moon.wechat.R; 
/** 
 * Created by moon.zhong on 2015/2/4. 
 */ 
public class TabView extends LinearLayout implements View.OnClickListener { 
  private ViewPager mViewPager; 
  private ViewPager.OnPageChangeListener mOnPageChangeListener; 
  private PagerAdapter mPagerAdapter; 
  private int mChildSize; 
  private List mTabItems; 
  private OnItemIconTextSelectListener mListener; 
  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 (); 
  } 
  public void setViewPager(final ViewPager mViewPager) { 
    if (mViewPager == null) { 
      return; 
    } 
    this.mViewPager = mViewPager; 
    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() { 
      @Override 
      public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { 
//        Log.v("zgy","=============position="+position+",====positiOnOffset="+positionOffset) ; 
        View leftView; 
        View rightView; 
        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); 
        } else { 
          mViewPager.getChildAt(position).setAlpha(1); 
          mTabItems.get(position).setTabAlpha(1 - positionOffset); 
        } 
        if (mOnPageChangeListener != null) { 
mOnPageChangeListener.onPageScrolled(position, positionOffset, positionOffsetPixels); 
        } 
      } 
      @Override 
      public void onPageSelected(int position) { 
        if (mOnPageChangeListener != null) { 
mOnPageChangeListener.onPageSelected(position); 
        } 
      } 
      @Override 
      public void onPageScrollStateChanged(int state) { 
        if (mOnPageChangeListener != null) { 
mOnPageChangeListener.onPageScrollStateChanged(state); 
        } 
      } 
    }); 
    if (mPagerAdapter instanceof OnItemIconTextSelectListener) { 
      mListener = (OnItemIconTextSelectListener) mPagerAdapter; 
    }else { 
      throw new RuntimeException("请让你的pageAdapter实现OnItemIconTextSelectListener接口"); 
    } 
    initItem(); 
  } 
  public void setOnPageChangeListener(ViewPager.OnPageChangeListener mOnPageChangeListener) { 
    this.mOnPageChangeListener= mOnPageChangeListener; 
  } 
  private void initItem() { 
    for (int i = 0; i

注释有点少，额，不是少，是压根就没有，其实，这个类的代码不需要注释，我相信大家都能看懂，我就讲下他的作用吧，

添加 item
监听 ViewPager 的滚动事件，从而设置相应 item 之间的颜色渐变，
设置相应 ViewPage 的透明度
为 TabItem 设置监听事件，

其实上面很多功能本来是在 MainActivity 中实现的，为了减少 Activity 内部的代码量，抽取出来，到达低耦合，高内聚的效果。

Ok，以上就是微信6.1 tab 栏颜色渐变效果的实现全过程。

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持！

推荐阅读

html
android listview OnItemClickListener失效原因

最近在做listview时发现OnItemClickListener失效的问题，经过查找发现是因为button的原因。不仅listitem中存在button会影响OnItemClickListener事件的失效，还会导致单击后listview每个item的背景改变，使得item中的所有有关焦点的事件都失效。本文给出了一个范例来说明这种情况，并提供了解决方法。 ... [详细]

蜡笔小新 2023-12-14 14:25:50
html
Alink回归预测的不完善问题及期待

本文讨论了Alink回归预测的不完善问题，指出目前主要针对Python做案例，对其他语言支持不足。同时介绍了pom.xml文件的基本结构和使用方法，以及Maven的相关知识。最后，对Alink回归预测的未来发展提出了期待。 ... [详细]

蜡笔小新 2023-12-14 14:25:33
html
Hibernate基础映射

在说Hibernate映射前，我们先来了解下对象关系映射ORM。ORM的实现思想就是将关系数据库中表的数据映射成对象，以对象的形式展现。这样开发人员就可以把对数据库的操作转化为对 ... [详细]

蜡笔小新 2023-12-14 10:57:47
html
SpringBoot集成前端模版（thymeleaf）的配置步骤

本文介绍了在SpringBoot中集成thymeleaf前端模版的配置步骤，包括在application.properties配置文件中添加thymeleaf的配置信息，引入thymeleaf的jar包，以及创建PageController并添加index方法。 ... [详细]

蜡笔小新 2023-12-14 10:11:46
react
Android中高级面试必知必会，积累总结

本文介绍了Android中高级面试的必知必会内容，并总结了相关经验。文章指出，如今的Android市场对开发人员的要求更高，需要更专业的人才。同时，文章还给出了针对Android岗位的职责和要求，并提供了简历突出的建议。 ... [详细]

蜡笔小新 2023-12-14 14:53:02
html
求解hdu 1003 java题目的动态规划优化方法

本文讨论了如何优化解决hdu 1003 java题目的动态规划方法，通过分析加法规则和最大和的性质，提出了一种优化的思路。具体方法是，当从1加到n为负时，即sum(1,n)sum(n,s)，可以继续加法计算。同时，还考虑了两种特殊情况：都是负数的情况和有0的情况。最后，通过使用Scanner类来获取输入数据。 ... [详细]

蜡笔小新 2023-12-14 13:11:00
view
如何在Android中通过代码更改Recycler视图项的背景颜色

本文讲述了如何通过代码在Android中更改Recycler视图项的背景颜色。通过在onBindViewHolder方法中设置条件判断，可以实现根据条件改变背景颜色的效果。同时，还介绍了如何修改底部边框颜色以及提供了RecyclerView Fragment layout.xml和项目布局文件的示例代码。 ... [详细]

蜡笔小新 2023-12-14 12:45:01
html
C#之数据集：DataSet对象的使用及相关方法详解

本文介绍了C#中数据集DataSet对象的使用及相关方法详解，包括DataSet对象的概述、与数据关系对象的互联、Rows集合和Columns集合的组成，以及DataSet对象常用的方法之一——Merge方法的使用。通过本文的阅读，读者可以了解到DataSet对象在C#中的重要性和使用方法。 ... [详细]

蜡笔小新 2023-12-14 12:09:13
html
OC学习笔记之@property和@synthesize

本文介绍了OC学习笔记中的@property和@synthesize，包括属性的定义和合成的使用方法。通过示例代码详细讲解了@property和@synthesize的作用和用法。 ... [详细]

蜡笔小新 2023-12-14 12:05:06
html
Mac OS 升级到11.2.2 Eclipse打不开了，报错Failed to create the Java Virtual Machine

本文介绍了在Mac OS升级到11.2.2版本后，使用Eclipse打开时出现报错Failed to create the Java Virtual Machine的问题，并提供了解决方法。 ... [详细]

蜡笔小新 2023-12-14 12:01:13
html
baresip android编译、运行教程1语音通话

本文介绍了如何在安卓平台上编译和运行baresip android，包括下载相关的sdk和ndk，修改ndk路径和输出目录，以及创建一个c++的安卓工程并将目录考到cpp下。详细步骤可参考给出的链接和文档。 ... [详细]

蜡笔小新 2023-12-14 10:53:48
html
【Windows】实现微信双开或多开的方法及步骤详解

本文介绍了在Windows系统下实现微信双开或多开的方法，通过安装微信电脑版、复制微信程序启动路径、修改文本文件为bat文件等步骤，实现同时登录两个或多个微信的效果。相比于使用虚拟机的方法，本方法更简单易行，适用于任何电脑，并且不会消耗过多系统资源。详细步骤和原理解释请参考本文内容。 ... [详细]

蜡笔小新 2023-12-14 10:52:27
html
知识图谱——机器大脑中的知识库

本文介绍了知识图谱在机器大脑中的应用，以及搜索引擎在知识图谱方面的发展。以谷歌知识图谱为例，说明了知识图谱的智能化特点。通过搜索引擎用户可以获取更加智能化的答案，如搜索关键词"Marie Curie"，会得到居里夫人的详细信息以及与之相关的历史人物。知识图谱的出现引起了搜索引擎行业的变革，不仅美国的微软必应，中国的百度、搜狗等搜索引擎公司也纷纷推出了自己的知识图谱。 ... [详细]

蜡笔小新 2023-12-14 10:06:19
html
测试人的性格，点火让他着急，考验婚姻问题的善意玩人

本文讲述了作者通过点火测试男友的性格和承受能力，以考验婚姻问题。作者故意不安慰男友并再次点火，观察他的反应。这个行为是善意的玩人，旨在了解男友的性格和避免婚姻问题。 ... [详细]

蜡笔小新 2023-12-14 09:10:09
html
Linux进程控制块PCBtask_struct结构体结构及作用详解

本文详细介绍了Linux中进程控制块PCBtask_struct结构体的结构和作用，包括进程状态、进程号、待处理信号、进程地址空间、调度标志、锁深度、基本时间片、调度策略以及内存管理信息等方面的内容。阅读本文可以更加深入地了解Linux进程管理的原理和机制。 ... [详细]

蜡笔小新 2023-12-13 21:31:18

达人多多宝_836

这个家伙很懒，什么也没留下！

Tags | 热门标签

RankList | 热门文章