MytabIcon（一个自定义的控件，且带有渐变效果)

本文链接：https://blog.youkuaiyun.com/Smart_YC/article/details/50866344

本文介绍如何在Android应用中自定义Tab栏图标样式，包括颜色、文本和图标，并实现淡入淡出的视觉效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

只有代码，布局就不弄了，直接用就行
属性设置（在values下的attrs）
<declare-styleable name="MyTabIcon">
        <attr name="icon_text" format="string" />
        <attr name="icon_color" format="color" />
        <attr name="icon_src" format="reference" />
    </declare-styleable>
public class MyTabIcon extends View{
int color;//颜色
String text;//文本
Drawable icon;//绘制的图标
Paint iconPaint;//画图标的画笔
Paint textPaint;//画文字的画笔
Rect bounds;//矩形
int alpha;//该值代表画笔颜色的透明度，它的取值范围是0~255
public MyTabIcon(Context context, AttributeSet attrs) {//构造方法
super(context, attrs);
initView(context,attrs);
}
private void initView(Context context, AttributeSet attrs) {
TypedArray t = context.obtainStyledAttributes(attrs, R.styleable.MyTabIcon);//*********这几个属性得去清单配置文件写入，不然会找不到，有错的地方还请各位多多指正
color = t.getColor(R.styleable.MyTabIcon_icon_color, Color.GREEN);
text = t.getString(R.styleable.MyTabIcon_icon_text);
icon = t.getDrawable(R.styleable.MyTabIcon_icon_src);
t.recycle();
setClickable(true);
//初始化画笔
initPaint();
}
private void initPaint() {
//设置文字画笔
textPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
//设置绘制文字的大小
textPaint.setTextSize(TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, 14, getResources().getDisplayMetrics()));
textPaint.setStyle(Paint.Style.FILL);
bounds = new Rect();
textPaint.getTextBounds(text, 0, text.length(), bounds);
//设置图标画笔
iconPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
//画一幅图片 icon
Bitmap bitmap = ((BitmapDrawable)icon).getBitmap();
//把图片变大些
bitmap = Bitmap.createScaledBitmap(bitmap, bitmap.getWidth()*2, bitmap.getHeight()*2, true);
int left = getWidth()/2 - bitmap.getWidth()/2;
int top = getHeight()/2 - bitmap.getHeight()/2 - 10;
//以默认的方式，把图标画到屏幕上
canvas.drawBitmap(bitmap , left, top, null);
//画一行文字 text
float x = getWidth()/2 - bounds.width()/2;
float y = getHeight()/2 + bitmap.getHeight()/2 + bounds.height() - 20;
canvas.drawText(text, x, y, textPaint);
drawColorText(canvas,x,y);
drawColorIcon(canvas,bitmap , left, top);
}
private void drawColorText(Canvas canvas,float x,float y) {
textPaint.setColor(Color.GRAY);
textPaint.setAlpha(255);
canvas.drawText(text, x, y, textPaint);
textPaint.setColor(color);
//alpha的值越大，颜色就越深，反之就越浅
//最大值是255，最小值是0
textPaint.setAlpha(alpha);
canvas.drawText(text, x, y, textPaint);
}
private void drawColorIcon(Canvas canvas,Bitmap bitmap,int left,int top) {
//分两步画图
//第一步，先画绿色的图
Bitmap blankBitmap = Bitmap.createBitmap(bitmap.getWidth(), bitmap.getHeight(), Bitmap.Config.ARGB_8888);
Canvas myCanvas = new Canvas(blankBitmap);
myCanvas.drawBitmap(bitmap, 0, 0, null);
iconPaint.setColor(color);
iconPaint.setAlpha(alpha);
iconPaint.setXfermode(new PorterDuffXfermode(Mode.SRC_IN));
Rect r = new Rect(0,0,bitmap.getWidth(),bitmap.getHeight());
myCanvas.drawRect(r , iconPaint);
//第二步，把第一步画好的图画到手机屏幕上
canvas.drawBitmap(blankBitmap, left, top,null);
}
public void setMyTabIconAlpha(int alpha){
this.alpha=alpha;
invalidate();
}
主函数中
@Bind(R.id.viewpager_main)
   ViewPager viewPager;

   @Bind(R.id.tabicon_message)
   MyTabIcon tabiconMessage;
   @Bind(R.id.tabicon_friend)
   MyTabIcon tabiconFriend;
   @Bind(R.id.tabicon_find)
   MyTabIcon tabiconFind;
   @Bind(R.id.tabicon_setting)
   MyTabIcon tabiconSetting;

   List<MyTabIcon> icons= new ArrayList<MyTabIcon>();

   @Override
   protected void onCreate(Bundle savedInstanceState) {
       super.onCreate(savedInstanceState);
       setContentView(R.layout.activity_main);
       ButterKnife.bind(this);
       icons.add(tabiconMessage);
       icons.add(tabiconFriend);
       icons.add(tabiconFind);
       icons.add(tabiconSetting);
       icons.get(0).setMyTabIconAlpha(255);
       initViewPager();
   }

   private void initViewPager() {
       MyVPAdapter adapter = new MyVPAdapter(getSupportFragmentManager());
       viewPager.setAdapter(adapter);
       viewPager.setOnPageChangeListener(new OnPageChangeListener() {

           @Override
           public void onPageSelected(int arg0) {
               for (MyTabIcon icon : icons) {
                   icon.setMyTabIconAlpha(0);
               }
               icons.get(arg0).setMyTabIconAlpha(255);
           }

           @Override
           public void onPageScrolled(int arg0, float arg1, int arg2) {
               // arg0:滑动开始时的页面的下标
               // arg1:滑动的百分比 0%~100%
               // arg2:滑动了多少像素
               if(arg0<icons.size()-1){
                   icons.get(arg0).setMyTabIconAlpha((int) (255*(1-arg1)));
                   icons.get(arg0+1).setMyTabIconAlpha((int) (255*arg1));
               }
           }

           @Override
           public void onPageScrollStateChanged(int arg0) {
               // TODO Auto-generated method stub

           }
       });
   }
   //为四个按钮添加单击事件监听器
   @OnClick({R.id.tabicon_message,R.id.fl_inner,R.id.tabicon_find,R.id.tabicon_setting})
   public void tabIconClick(View v){
       switch (v.getId()) {
       case R.id.tabicon_message:
           viewPager.setCurrentItem(0);
           break;
       case R.id.tabicon_friend:
           viewPager.setCurrentItem(1);
           break;
       case R.id.tabicon_find:
           viewPager.setCurrentItem(2);
           break;
       case R.id.tabicon_setting:
           viewPager.setCurrentItem(3);
           break;
       }
   }
   //双击back按键退出
   long first;//第一次按下back建的时间
   @Override
   public void onBackPressed() {
       if(first+2000>System.currentTimeMillis()){
           super.onBackPressed();
       }else{
           showToast("再按一次退出");
       }
       first=System.currentTimeMillis();
   }
效果：类似聊天软件里滑动屏幕是，底下的控件颜色一个由淡到浓，另一个则相反，看起来有淡入淡出的效果