高仿微信6.0底部切换标签设置Alpha渐变效果解析
发表时间：2020-10-19
发布人：葵宇科技
浏览次数：26
本文参考：【张鸿洋的博客】http://blog.csdn.net/lmj623565791/article/details/41087219
先上关键的代码
<span style="color:#333333;">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);
break;
case R.styleable.ChangeColorIconView_text:
mText = a.getString(attr);
break;
case R.styleable.ChangeColorIconView_text_size:
</span><span style="color:#ff0000;">//这个办法是改变为标准尺寸的一个函数,这里COMPLEX_UNIT_SP是单位，10是数值，也就是10sp</span><span style="color:#333333;">
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(0xff555555);
</span><span style="color:#ff0000;">// 获得text绘制范围,设给这个mTextBound值,ps这个mTextPaint仅仅是通俗的Paint，然则传了mText值获得rect返回给mTextBound</span><span style="color:#333333;">
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)
{
</span><span style="color:#ff0000;">//Round是四舍五入的。。。Ceil是向上取整。。float是向下取整</span><span style="color:#333333;">
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);
}
</span><span style="color:#cc0000;">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);</span><span style="color:#cc0000;"> mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_IN));
mPaint.setAlpha(255);
mCanvas.drawBitmap(mIconBitmap, null, mIconRect, mPaint);
}</span><span style="color:#333333;">
private void drawSourceText(Canvas canvas, int alpha)
{
mTextPaint.setTextSize(mTextSize);
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);
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);
}
}
}</span>膳绫擎标红的处所是实现自定义控件实现渐变切换的关键代码
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);
}这个办法的
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);
先绘制了须要渐变显示的背景色彩，画布mCanvas绘制了一个rect区域，这个区域设置了色彩，alpha值
然后
mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_IN));
这里摘抄一段网上的解释讲解：
Adnroid上的简单图像合成类——PorterDuffXfermode
图像合成，是将两幅退昂放在一路的动作，它使得我们可以或许同时看到两幅图像的特点。
我们可以起首在Canvas对象上绘制一个位图对象，然后再雷同的Canvas对象上绘制第二个位图对象的方法来实现合成。不过这里在绘制第二幅图像的时刻，须要在Paint对象上指定一个过渡模式（Xfermode）。
可用作过渡模式的类集合都持续自Xfermode基类，而个中包含一个成为PorterDuffXfermode的类。PorterDuffXfermode因Thomas Porter和Tom Duff而得名，他们于1984年在ACM SIGGRAPH计算机图形学出版物上揭橥了题为“Compositing digital images”(合成数字图像)的文┞仿，具体介绍了一系列不合的规矩，用于彼此重叠的绘制图像。
在Android的PorterDuff.Mode类中列举了他们制订的规矩：
android.graphics.PorterDuff.Mode.SRC:只绘制源图像
android.graphics.PorterDuff.Mode.DST:只绘制目标图像
android.graphics.PorterDuff.Mode.DST_OVER:在源图像的顶部绘制目标图像
android.graphics.PorterDuff.Mode.DST_IN:只在源图像和目标图像订交的处所绘制目标图像
android.graphics.PorterDuff.Mode.DST_OUT:只在源图像和目标图像不订交的处所绘制目标图像
android.graphics.PorterDuff.Mode.DST_ATOP:在源图像和目标图像订交的处所绘制目标图像，在不订交的处所绘制源图像
android.graphics.PorterDuff.Mode.SRC_OVER:在目标图像的顶部绘制源图像
android.graphics.PorterDuff.Mode.SRC_IN:只在源图像和目标图像订交的处所绘制源图像
android.graphics.PorterDuff.Mode.SRC_OUT:只在源图像和目标图像不订交的处所绘制源图像
android.graphics.PorterDuff.Mode.SRC_ATOP:在源图像和目标图像订交的处所绘制源图像，在不订交的处所绘制目标图像
android.graphics.PorterDuff.Mode.XOR:在源图像和目标图像重叠之外的任何处所绘制他们，而在不重叠的处所不绘制任何内容
android.graphics.PorterDuff.Mode.LIGHTEN:获得每个地位上两幅图像中最亮的像素并显示
android.graphics.PorterDuff.Mode.DARKEN:获得每个地位上两幅图像中最暗的像素并显示
android.graphics.PorterDuff.Mode.MULTIPLY:将每个地位的两个像素相乘，除以255，然后应用该值创建一个新的像素进行显示。结不雅色彩=顶部色彩*底部色彩/255
android.graphics.PorterDuff.Mode.SCREEN:反转每个色彩，履行雷同的操作（将他们相乘并除以255），然后再次反转。结不雅色彩=255-(((255-顶部色彩)*(255-底部色彩))/255)
信赖经由过程膳绫擎的解释可以明白为什么底部标签就是一张没有色彩的图片确能实现似乎有两张图在切换的效不雅了，本来是图片合成。。。。。。
然后
mPaint.setAlpha(255); mCanvas.drawBitmap(mIconBitmap, null, mIconRect, mPaint);
从新设置了alpha值最大年夜，不通明，然则色彩没设置，会导致美工给我们切的搁笔的线框也显示我们设置的色彩值
然后再把图片画上去
好了，这个自定义的渐变切换标签写好了，不过大年夜牛就是年沂录，demo写的都这么严谨，比如说新手不会留意的
<span style="color:#333333;">if </span><span style="color:#ff0000;">(Looper.getMainLooper() == Looper.myLooper())</span><span style="color:#333333;">
{
invalidate();
} else
{
postInvalidate();
}</span>想要懂得见链接：http://leochin.com/android-looper-mainlooper/ ；
还有
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);
}
}这个就能看出高手低手的差别了
最后关键的处所是经由过程OnPageChangeListener接口里的onPageScrolled办法实现渐变效不雅了
<span style="color:#333333;">@Override
public void onPageScrolled</span><span style="color:#cc0000;">(int position, float positionOffset,
int positionOffsetPixels)</span><span style="color:#333333;">
{
// 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);
}
}</span></pre><p></p><p><span style="font-family:Arial; color:#333333"><span style="font-size:14px; line-height:26px">positionOffset这个参数是一个左滑大年夜0到1最后置0的值，右滑大年夜1到0的值，经由过程log数据可以分析出来，恰是因为这个特点，所以可以很便利实现自定义view的重绘</span></span></p><p><span style="font-family:Arial; color:#333333"><span style="font-size:14px; line-height:26px">再附网上的一段代码</span></span></p><p></p><pre name="code" class="java"> @Override
71 public void onPageScrolled(int arg0, float arg1, int arg2) {
72 if (isScrolling) {
73 if (lastValue > arg2) {
74 // 递减，向右侧滑动
75 right = true;
76 left = false;
77 } else if (lastValue < arg2) {
78 // 递减，向右侧滑动
79 right = false;
80 left = true;
81 } else if (lastValue =http://www.sjsjw.com/100/000272MYM011743/= arg2) {
82 right = left = false;
83 }
84 }
85 Log.i("meityitianViewPager",
86 "meityitianViewPager onPageScrolled last :arg2 ,"
87 + lastValue + ":" + arg2);
88 lastValue = arg2;
89 }因为膳绫擎讲解的都是对网上大年夜牛博客进行进修的，如不雅有搪突之处见谅，有疑问留言
