7、Dp Notes底部导航栏

[size=medium] 想要的图标呢？怎么弄上去。从网上找了几个图标，并做成了字体（为什么做成字体，做成字体，相当于每个图标对应一个字符，如"0"对应着主页的图标，在View里drawText(0)，就把对应的图标画上去了（当然要为paint设置字体），方便改变大小，颜色等。怎么做成字体，图标字体(ICONFONT)，百度一下），这里只是想介绍一种投机取巧的方法来实现图标显示和之后的颜色渐变。[/size]
[img]http://dl2.iteye.com/upload/attachment/0124/2462/b589926e-c21a-35e2-a57f-02edc6bffe70.jpg[/img]
[size=medium] 字体做好了，QEndBarIcon.ttf，0-主页，1-列表，2-消息，3-用户，4-中间的新建，先是这么想的。工程/assets目录右键→新建folder取名fonts，将做好的QEndBarIcon.ttf复制到该目录下。为paint设置字体，构造函数里，new Paint()后：[/size]

paint.setAntiAlias(true);
paint.setTypeface(Typeface.createFromAsset(context.getAssets(), "fonts/QEndBarIcon.ttf"));

[size=medium]防锯齿开，设置字体为QEndBarIcon.ttf。onDraw()里：
[/size]

canvas.drawText("01423", getWidth()/2-50*3, getHeight()/2, paint);

运行：
[img]http://dl2.iteye.com/upload/attachment/0124/2464/68e2d4eb-6ce4-3a71-9b0e-06ae6b9e92ab.jpg[/img]
[color=gray][size=medium]注：写字01423变成了字体中设置好的图标，可以理解。[/size][/color]

[size=medium] 为每个图标设定位置、颜色，定义几个变量：[/size]

private int widthAll,heightAll;//总宽度，总高度
private int touchX,touchY;//点击时记录X，Y

private float positionItem[]={0,0,0,0,0};//图标位置
private int widthItem;//图标宽度
private int alphaItem[]={255,0,0,0};//图标透明度

private int colorNormal,colorSelect,colorBackground;//几个颜色值

private Paint paintIcon,paintOther;//画笔

[size=medium] 构造函数初始化变量：[/size]

colorNormal=getResources().getColor(R.color.gray_dark);//获取颜色值
colorSelect=getResources().getColor(R.color.app_theme);
colorBackground=getResources().getColor(R.color.white_dark);

paintIcon=new Paint();//新建画笔
paintIcon.setAntiAlias(true);//防锯齿
paintIcon.setTextAlign(Align.CENTER);//字体居中
//设置字体
paintIcon.setTypeface(Typeface.createFromAsset(context.getAssets(), "fonts/Icon.ttf"));

paintOther=new Paint();
paintOther.setAntiAlias(true);

[size=medium] 宽度、高度等不能在构造函数（构造函数执行时宽高为0），重载（Source→O/I Mothods）选择onMeasure()（View被部署到屏幕）：[/size]

widthAll=getWidth();//获取宽度
heightAll=getHeight();//获取高度
if(widthAll>0&&heightAll>0){
    widthItem=(widthAll-getPaddingLeft()-getPaddingRight())/5;//计算Item宽度
    positionItem[0]=widthItem/2+getPaddingLeft();//计算Item位置（X）
    positionItem[1]=widthItem/2*3+getPaddingLeft();
    positionItem[2]=widthAll-widthItem/2*3-getPaddingRight();
    positionItem[3]=widthAll-widthItem/2-getPaddingRight();

    positionItem[4]=heightAll/3*2;//计算Item位置（Y）
    paintIcon.setTextSize(heightAll/2);//设置图标大小

    if(widthItem>heightAll*2){
        widthItem=heightAll*2;//限制图标宽度
    }
}

[size=medium] 通过宽高计算出每个图标位置，存到变量，onDraw()中：[/size]

paintIcon.setColor(colorNormal);//设置正常颜色
paintIcon.setAlpha(255);
canvas.drawText("0", positionItem[0], positionItem[4], paintIcon);
canvas.drawText("1", positionItem[1], positionItem[4], paintIcon);
canvas.drawText("2", positionItem[2], positionItem[4], paintIcon);
canvas.drawText("3", positionItem[3], positionItem[4], paintIcon);

paintIcon.setColor(colorSelect);//设置选中颜色
paintIcon.setAlpha(alphaItem[0]);
canvas.drawText("0", positionItem[0], positionItem[4], paintIcon);
paintIcon.setAlpha(alphaItem[1]);
canvas.drawText("1", positionItem[1], positionItem[4], paintIcon);
paintIcon.setAlpha(alphaItem[2]);
canvas.drawText("2", positionItem[2], positionItem[4], paintIcon);
paintIcon.setAlpha(alphaItem[3]);
canvas.drawText("3", positionItem[3], positionItem[4], paintIcon);

paintOther.setColor(colorSelect);//画中间的圆
canvas.drawCircle(widthAll/2, heightAll/2, widthItem/2, paintOther);
paintIcon.setColor(colorBackground);
canvas.drawText("4", widthAll/2, positionItem[4], paintIcon);//画中间图标

[size=medium] 正常颜色画出每个图标，在相同位置画上选中后的图标，通过控制透明度实现单个图标选中效果。运行，是不是想要的效果呢？[/size]
[img]http://dl2.iteye.com/upload/attachment/0124/2466/2b4a215c-3999-3d3c-8202-595726b32ebb.jpg[/img]

[size=medium] 为图标添加点击事件，重载onTouchEvent()：[/size]

switch(event.getAction()){
case MotionEvent.ACTION_DOWN:
    touchX=(int)event.getX();//记录点击位置
    touchY=(int)event.getY();
    break;
case MotionEvent.ACTION_UP:
    int tempX,tempY;
    tempX=(int)event.getX();
    tempY=(int)event.getY();//未滑动，滑动小
    if(Math.abs((tempX-touchX))<20&&Math.abs((tempY-touchY))<10){
        if(Math.abs(touchX-positionItem[0])<widthItem/2){
            alphaItem[0]=255;
            alphaItem[1]=0;//点击第一个图标
            alphaItem[2]=0;
            alphaItem[3]=0;
        }
        else if(Math.abs(touchX-positionItem[1])<widthItem/2){
            alphaItem[0]=0;
            alphaItem[1]=255;
            alphaItem[2]=0;
            alphaItem[3]=0;
        }
        else if(Math.abs(touchX-widthAll/2)<widthItem/2){
            //点击中间图标
        }
        else if(Math.abs(touchX-positionItem[2])<widthItem/2){
            alphaItem[0]=0;
            alphaItem[1]=0;
            alphaItem[2]=255;
            alphaItem[3]=0;
        }
        else if(Math.abs(touchX-positionItem[3])<widthItem/2){
            alphaItem[0]=0;
            alphaItem[1]=0;
            alphaItem[2]=0;
            alphaItem[3]=255;
        }
    }
    postInvalidate();//刷新
    break;
}
return true;//由子类自己处理，并不向下传递

[size=medium]根据点击的位置，判断哪个图标该被选中，更改透明度，刷新，运行。[/size]
[img]http://dl2.iteye.com/upload/attachment/0124/2468/77d226a3-e803-391a-b1d8-760bb747d0f2.gif[/img]
[color=gray][size=medium]注：这是一个.gif动图，ctrl点击图片查看。[/size][/color]

[size=medium] 自定义View是否可以很好的理解，做出自己希望的，要多思考，理解它的用途。[/size]

[align=right][size=medium]活学巧用——2016/10/25[/size][/align]