鹅厂系列五--仿微信底部导航菜单

海纳百川

上篇学习了一下遮罩Xfermode的使用，简单的运用了下，详见http://blog.csdn.net/z8z87878/article/details/52841320，先来看看Xfermode来做微信底部导航菜单吧



其中底部的四个菜单控件GradientView(实现详见上篇Xfermode的学习)

public class GradientView extends View{
public GradientView(Context context) {
this(context,null);
}

public GradientView(Context context, AttributeSet attrs) {
this(context, attrs,0);
}

public GradientView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}

public Bitmap icon;

public  void setBitmap(Bitmap bitmap){
icon = bitmap;  //外部传图标
postInvalidate();//主动调draw方法刷新视图
}

private String txt;
public  void setText(String text){
txt = text;    //外部传文字
postInvalidate();//主动调draw方法刷新视图
}

private int alpha = 255;
public void  setMyAlpha(int alpha){

this.alpha = alpha;
postInvalidate();
};

@Override
public void draw(Canvas canvas) {  //与上面的实现圆形头像一样，只是换了个遮罩模式

Bitmap bitmap = Bitmap.createBitmap(getWidth(),getHeight(), Bitmap.Config.ARGB_8888);
Canvas canvas1 = new Canvas(bitmap);
super.draw(canvas1);   //背景色画在bitmap上

Bitmap bitmap1 = Bitmap.createBitmap(bitmap.getWidth(),bitmap.getHeight(), Bitmap.Config.ARGB_8888);
Canvas canvas2 = new Canvas(bitmap1);

canvas2.drawARGB(0,0,0,0);
Paint paint = new Paint();
paint.setAntiAlias(true);
paint.setTextAlign(Paint.Align.CENTER);
paint.setTextSize(13);
paint.setColor(Color.BLACK);

if(txt != null){ //画文字
canvas2.drawText(txt,getWidth()/2,getHeight()-dp2px(9),paint);
}

if(icon != null){ //画图片

Matrix matrix = new Matrix(); //帮助实现bitmap缩放

matrix.postScale(getWidth()/3.0f/icon.getWidth(),getWidth()/3.0f/icon.getHeight());
canvas2.drawBitmap(Bitmap.createBitmap(icon,0,0,icon.getWidth(),icon.getHeight(),matrix,true),getWidth()/3,dp2px(7),null);
}

paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_ATOP));

paint.setAlpha(alpha); //透明度变化
canvas2.drawBitmap(bitmap,0,0,paint);  //将背景色画在图标和文字上面，相交的部分才显示

canvas.drawBitmap(bitmap1,0,0,null);  //最后画在画板上，不理解回去看圆形图片实现

}

private int dp2px(float dp){

float density = getResources().getDisplayMetrics().density;

return (int) (dp * density + .5f);
}
}

activity的实现,主要是监听viewpager的滑动事件

mViewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {

@Override  //positionOffset得到当前position向左滑动的比例 ,以最左边第一个可见视图为position的取值，
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

mViews.get(position).setMyAlpha((int) (255 * (1 -positionOffset)));

if(position < 3){
mViews.get(position + 1).setMyAlpha((int) (255 * positionOffset));
}

}

@Override
public void onPageSelected(int position) {

if (position == 2){  //到第三个菜单换背景图片

mFx.setBitmap(BitmapFactory.decodeResource(getResources(),R.mipmap.fxw));
flag = true;
}else {
if (flag){
mFx.setBitmap(BitmapFactory.decodeResource(getResources(),R.mipmap.fx));
flag = false;
}
}

curPosition = position;
}

@Override
public void onPageScrollStateChanged(int state) {

}
});

底菜单点击事件

@Override
public void onClick(View view) {

mViews.get(curPosition).setMyAlpha(0);//清除上次的选中
switch (view.getId()){
case R.id.gv1:
mViewPager.setCurrentItem(0,false); //禁止滑动到相应条目，直接跳转到
break;

case R.id.gv2:
mViewPager.setCurrentItem(1,false);
break;

case R.id.gv3:
mViewPager.setCurrentItem(2,false);
break;

case R.id.gv4:
mViewPager.setCurrentItem(3,false);
break;
}
}

主要是底部菜单控件的问题。不清楚的看我上偏的介绍吧，这整部份源码下载地址我会在评论区贴出