The font is ready, QEndBarIcon.ttf, 0-home page, 1-list, 2-message, 3-user, 4-new in the middle, first thought. Right-click the project/assets directory → create a new folder and name it fonts, and copy the prepared QEndBarIcon.ttf to this directory. Set the font for paint, in the constructor, after new Paint():
paint.setAntiAlias(true); paint.setTypeface(Typeface.createFromAsset(context.getAssets(), "fonts/QEndBarIcon.ttf"));
Anti-aliasing is enabled, and the font is set to QEndBarIcon.ttf. In onDraw():
canvas.drawText("01423", getWidth()/2-50*3, getHeight()/2, paint);
Operation:
Note: Writing 01423 has become the icon set in the font, which is understandable.
Set the position and color for each icon, and define several variables:
private int widthAll,heightAll;//Total width, total height
private int touchX,touchY;//Record X, Y when clicked
private float positionItem[]={0,0,0,0,0};//icon position
private int widthItem;//Icon width
private int alphaItem[]={255,0,0,0};//icon transparency
private int colorNormal,colorSelect,colorBackground;//Several color values
private Paint paintIcon, paintOther;//Brush
The constructor initializes the variables:
colorNormal=getResources().getColor(R.color.gray_dark);//Get the color value colorSelect=getResources().getColor(R.color.app_theme); colorBackground=getResources().getColor(R.color.white_dark); paintIcon=new Paint();//New brush paintIcon.setAntiAlias(true);//Anti-aliasing paintIcon.setTextAlign(Align.CENTER);//The font is centered //set font paintIcon.setTypeface(Typeface.createFromAsset(context.getAssets(), "fonts/Icon.ttf")); paintOther=new Paint(); paintOther.setAntiAlias(true);
Width, height, etc. cannot be used in the constructor (the width and height are 0 when the constructor is executed), overload (Source→O/I Mothods) to select onMeasure() (View is deployed to the screen):
widthAll=getWidth();//Get the width
heightAll=getHeight();//Get height
if(widthAll>0&&heightAll>0){
widthItem=(widthAll-getPaddingLeft()-getPaddingRight())/5;//Calculate Item width
positionItem[0]=widthItem/2+getPaddingLeft();//Calculate Item position (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;//Calculate Item position (Y)
paintIcon.setTextSize(heightAll/2);//Set the icon size
if(widthItem>heightAll*2){
widthItem=heightAll*2;//Limit icon width
}
}
Calculate the position of each icon through the width and height, and store it in a variable, onDraw():
paintIcon.setColor(colorNormal);//Set the normal color
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);//Set the selected color
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);//Draw the circle in the middle
canvas.drawCircle(widthAll/2, heightAll/2, widthItem/2, paintOther);
paintIcon.setColor(colorBackground);
canvas.drawText("4", widthAll/2, positionItem[4], paintIcon);//Draw the middle icon
Draw each icon in normal color, draw the selected icon in the same position, and achieve a single icon selection effect by controlling the transparency. Running, is it the desired effect?
To add a click event to the icon, overload onTouchEvent():
switch(event.getAction()){
case MotionEvent.ACTION_DOWN:
touchX=(int)event.getX();//Record the click position
touchY=(int)event.getY();
break;
case MotionEvent.ACTION_UP:
int tempX,tempY;
tempX=(int)event.getX();
tempY=(int)event.getY();//No sliding, small sliding
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;//Click the first icon
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){
//click the middle icon
}
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();//Refresh
break;
}
return true;//It is handled by the subclass itself, not passed down
According to the clicked position, determine which icon should be selected, change the transparency, refresh, and run.
Note: This is a .gif animation, ctrl click on the picture to view.
Whether the custom View can be well understood, and make what you want, you need to think more and understand its purpose.
Live learning and use - 2016/10/25