How to reduce the font size of custom controls (optimize the round dot progress bar)

One 、 Open source

Source code and demo download

Two 、 Here comes the product manager

I thought there was no problem with the written round dot progress bar , Because of the writing Previous blog Some details have been optimized . The boy who asked for the shoes called me after work , say UI A bit of a problem. ： My percentage font is too strong , Not as slim as the original （ Tell me that I am Baidu mobile assistant , Now I know ⊙﹏⊙b）.

A comparison of , It's a lot stronger .

Doubt whether it is a systematic cause , Download the mobile assistant and compare it on the same mobile phone ,,, Such is the case , Next , Find a solution ：

First, check whether there is a font type , Try one by one , Not what you want .

//  The system gave you 5 Font types ：
Typeface.DEFAULT; //  System default 
Typeface.DEFAULT_BOLD;
Typeface.SANS_SERIF;
Typeface.SERIF;
Typeface.MONOSPACE;

//  Set font type 
paint.setTypeface(typeface);

Asking Du Niang was fruitless ...

Look at the code , Suddenly I thought Stroke Whether it can be or not? . But it has been tested before ,Stroke Draw text below ,setStrokeWidth(w) Medium w by 0, And Fill equally , Not 0 The empty text appears , Be similar to “ Chinese color cloud ” The effect of , Can't lose weight .

Wonderful inspiration suddenly came out ： The color of the empty text becomes the background color , Then draw it on the original text , This is not a weight loss ？ Don't say , It's OK , See Slimming method 2, Later, it was added to the custom attribute .

This method is always a little strange , Compare the pictures carefully , I also found that the fonts are different , Get Excel Search for , Find out ：

1. Percentage ratio , The original version is the one in front , And mine is the latter one by default ;
2. The original unit and button text remain the system default .
   

The system font libraries are all in this directory （ Don't ask me. Mac）： System disk /Windows/Fonts. It was so easy to find , Copy it to the system ,AS Put it in module Of src/main/assets/fonts Under the table of contents , The file name is ARIALUNI.TTF.

//  Get external font library 
Typeface tf = Typeface.createFromAsset(context.getAssets(), "fonts/ARIALUNI.TTF");
paint.setTypeface(tf);

Running results ：

typeface OK 了 , But why are you still so strong ？
Look at this font library ,22M many , Baidu can't cram such a large file into apk in . I thought it would be better to leave only numbers in the font library , You can edit the font library with Notepad , Find out I'm wrong ...（ If it wasn't wrong , I really thought it was this font + By liposuction . Look at the picture below , Did you smoke well ？ Behind the ）

Is it a picture ？ It's impossible , have to 101 A picture , Serious waste of resources .

Since the font library is too large , no way , Go and find out if there is a small font library in the original version . hold apk Change to suffix zip, There are really two font library files found （ Enlarge the file display icon , You can see the font style on the icon ）, It's you ：HelveticaNeueLTPro.ttf, size 18K, Put it in module Medium test , The result is the first one in the figure above .

There is even Arial Unicode MS A smaller version of ？ Tenthousand grass and mud horses are grey ...

Last , Further refinement ：

1. Optimize percentage font display , Make it thinner , External fonts are used by default , After all, people are big companies ,UI It must be awesome
2. Add custom properties isPercentFontSystem, Let developers choose to use external （ Default ） Or systematic
3. Add custom properties percentThinPadding, If you think the font is big （ The background is pure color ）, You can also use this slimming needle
4. Optimize redundant code when drawing buttons , To extract

thank ” The product manager “, Let me learn another trick .

3、 ... and 、 Slimming method 1： Change font type

Import the external font library （ If any ）：

1. Put the outside ttf Font library abc.ttf Put it in src/main/assets/fonts Under the table of contents
2. Get font library ：Typeface tf = Typeface.createFromAsset(context.getAssets(), "fonts/abc.ttf"),
   If not on assets in , These two methods can be used to obtain ：
   Typeface.createFromFile(File file)
Typeface.createFromFile(String path)
3. Set font type ：
   paint.setTypeface(tf);

Four 、 Slimming method 2： Liposuction method

The so-called liposuction method , Is to draw some around the font . The way is ： In the use of Fill After the text is drawn , Set the brush color to the background color , And then use Stroke Draw text once .

But this method has its limitations ： The background must be pure color , It can't be empty 、 transparent 、 picture .

// 2.1.1  Lose weight by percentage 
if (percentThinPadding != 0) {
    int bgColor = Color.TRANSPARENT;
    Drawable bgDrawable = getBackground();
    //  Make sure you have a background , And a pure color background （ The picture is BitmapDrawable）
    if (bgDrawable != null && bgDrawable instanceof ColorDrawable) {
        bgColor = ((ColorDrawable)bgDrawable).getColor();
    }
    if (bgColor != Color.TRANSPARENT) {
        //  Use Stroke Keep fit 
        mPaint.setColor(bgColor);
        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.setStrokeWidth(percentThinPadding);
        canvas.drawText(percent + "", mCenterX - textWidth / 2, baseline, mPaint);
        mPaint.setStyle(Paint.Style.FILL);
    }
}

It is also added to the function . The effect is as follows ：

---

1 It will be replenished in an hour ：
I always felt something was wrong , Remember when you take a shower paint The brush has an eraser . Re - modify the code , Make it suitable for any background ：

// 2.1.1  Lose weight by percentage 
if (percentThinPadding != 0) {
    //  Wipe with an eraser 
    mPaint.setXfermode(mPercentThinXfermode);
    mPaint.setStyle(Paint.Style.STROKE);
    mPaint.setStrokeWidth(percentThinPadding);
    canvas.drawText(percent + "", mCenterX - textWidth / 2, baseline, mPaint);
    mPaint.setXfermode(null);
    mPaint.setStyle(Paint.Style.FILL);
}

In this way OK：

This revision , Fall into many pits （ Otherwise, it wouldn't be till now 3 Much point , My body ！！！）：

1. Direct erase , The text border is black . because canvas It includes the background color , stay canvas Erase on , It is equivalent to directly erasing the color of the entire control , It turns black .
   terms of settlement ： Create a control of the same size Bitmap, Use this at the same time bitmap Create a new canvas mCanvas, Then draw... On it , Finally, put bitmap Drawn to the canvas in .
2. onDraw() Will be called frequently , Creating... In this method is strongly avoided Bitmap and Canvas.
   terms of settlement ： stay onSizeChanged() Created in , just , As long as the size changes ,Bitmap The size of the must also change .
3. The same... Is used for each drawing bitmap and mCanvas, It will cause the previous traces to be on it
   terms of settlement ： Erase all the contents of the canvas before each painting .

mClearCanvasXfermode = new PorterDuffXfermode(PorterDuff.Mode.CLEAR);

//  First clear the last drawn 
mPaint.setXfermode(mClearCanvasXfermode);
mCanvas.drawPaint(mPaint);
mPaint.setXfermode(null);