Android仿微信底部按钮滑动变色

android仿微信底部按钮滑动变色，这里只针对使用fragment为tab页的滑动操作，进行简单的变色讲解。

首先说下onpagechangelistener这个监听

//这个监听有三个方法
public abstract void onpagescrollstatechanged (int state) 

public abstract void onpagescrolled (int position, float positionoffset, int positionoffsetpixels) 

public abstract void onpageselected (int position) 

//第一个方法onpagescrollstatechanged 中的参数state，有三个可取的值

public static final int scroll_state_dragging 
constant value: 1 (0x00000001) //手指按在viewpager上滑动时

public static final int scroll_state_idle 
constant value: 0 (0x00000000) //手指松开后，viewpager自动滑动期间

public static final int scroll_state_settling 
constant value: 2 (0x00000002) //viewpager进入了某个page

//如果在onpagescrollstatechanged 中输出state的值，你会发现每次都是按顺序打印出“1---2---0”

//第二个方法onpagescrolled的三个参数

position：//滑动时，屏幕左侧显示的第一个page

positionoffset：//滑动比例，值的范围为[0, 1)，手指往左滑动，该值递增，反之递减

positionoffsetpixels：//滑动距离，和屏幕有关，手指往左滑动，该值递增，反之递减

//我们经常需要检查viewpager的滑动方向并作出一些操作，这时你只需要通过position和positionoffset两个值即可实现该功能。

//比如实现微信底部图标颜色渐变 向左滑动时

changecoloriconwithtextview left = mtabindicator.get(position); //左侧显示的第一个page页面上底部图标和文字的初始化
changecoloriconwithtextview right = mtabindicator.get(position + 1); //右侧显示的page底部图标和文字的初始化

left.seticonalpha(1 - positionoffset); //设置图标的透明度 此时positionoffset值递增 左侧图标的颜色变浅
right.seticonalpha(positionoffset); //右侧图标的颜色逐渐变深

//第三个方法onpageselected的三个参数

position：//当前选择的page序号

//该方法被调用的时间比较特别，在上面的第一个方法中的“1---2----0”中的2执行之后，onpageselected就执行，然后执行“1---2----0”中的0。就是手指松开屏幕之后，onpageselected被执行。

上面提到了changecoloriconwithtextview 主要类

package com.mhealth.nursestation.app.pda.business.login.base.ui.fragmentutil;

import android.content.context;
import android.content.res.typedarray;
import android.graphics.bitmap;
import android.graphics.bitmap.config;
import android.graphics.bitmapfactory;
import android.graphics.canvas;
import android.graphics.paint;
import android.graphics.porterduff;
import android.graphics.porterduffxfermode;
import android.graphics.rect;
import android.graphics.drawable.bitmapdrawable;
import android.os.bundle;
import android.os.looper;
import android.os.parcelable;
import android.util.attributeset;
import android.util.typedvalue;
import android.view.view;

import com.mhealth.nursestation.app.pda.r;


/**
 * 此类用于修改颜色渐变
 */
public class changecoloriconwithtextview extends view {

  private bitmap mbitmap;
  private canvas mcanvas;
  private paint mpaint;
  /**
   * 颜色
   */
  private int mcolor = 0xff07b7c4;
  /**
   * 透明度 0.0-1.0 初始化必须是0 不是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, 0x07b7c4);
        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(0xff07b7c4);
    mtextpaint.setantialias(true); 
    // 得到text绘制范围
    mtextpaint.gettextbounds(mtext, 0, mtext.length(), mtextbound);

  }

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

  }

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

  /**
   * 透明度 255
   * 
   * @param canvas
   * @param alpha
   */
  private void drawsourcetext(canvas canvas, int alpha) {
    mtextpaint.settextsize(mtextsize);
    mtextpaint.setcolor(0x00333333);
    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);

  }

  public void seticonalpha(float alpha) {
    this.malpha = alpha;
    invalidateview();
  }

  private void invalidateview() {
    if (looper.getmainlooper() == looper.mylooper()) {
      invalidate();
    } else {
      postinvalidate();
    }
  }

  public void seticoncolor(int color) {
    mcolor = color;
  }

  public void seticon(int resid) {
    this.miconbitmap = bitmapfactory.decoderesource(getresources(), resid);
    if (miconrect != null)
      invalidateview();
  }

  public void seticon(bitmap iconbitmap) {
    this.miconbitmap = iconbitmap;
    if (miconrect != null)
      invalidateview();
  }

  private static final string instance_state = "instance_state";
  private static final string state_alpha = "state_alpha";

  @override
  protected parcelable onsaveinstancestate() {
    bundle bundle = new bundle();
    bundle.putparcelable(instance_state, super.onsaveinstancestate());
    bundle.putfloat(state_alpha, malpha);
    return bundle;
  }

  @override
  protected void onrestoreinstancestate(parcelable state) {
    if (state instanceof bundle) {
      bundle bundle = (bundle) state;
      malpha = bundle.getfloat(state_alpha);
      super.onrestoreinstancestate(bundle.getparcelable(instance_state));
    } else {
      super.onrestoreinstancestate(state);
    }
  }
}

在activity里面实现监听操作

@override
  public void onpagescrolled(int position, float positionoffset, int positionoffsetpixels) {

    if (positionoffset > 0) {
      changecoloriconwithtextview left = mtabindicator.get(position);
      changecoloriconwithtextview right = mtabindicator.get(position + 1);

      left.seticonalpha(1 - positionoffset);
      right.seticonalpha(positionoffset);
    }
  }

定义一个集合，将所有变色控件装载进去

private list<changecoloriconwithtextview> mtabindicator = new arraylist<changecoloriconwithtextview>();

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 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);
      mappcontext.has_new_talk = false;

      break;
    case r.id.id_indicator_four:
      mtabindicator.get(3).seticonalpha(1.0f);
      mviewpager.setcurrentitem(3, false);
      break;

    }
  }

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。