ItemizedOverlay描画可能として使用するアイコンをプログラムで作成 - Android

Question

マップ上にアイテム化されたオーバーレイの描画可能領域として配置する駐車アイコンをプログラムで描画しようとしています。

アイコンは青い四角で囲まれた白い「P」で、四角形の色を変更してさまざまな駐車形態をプログラムで表示したいと考えています。

drawRect & drawTextを使用してキャンバス上に作成しようとしましたが、テキストを四角形の中央に配置する簡単な方法が見つからず、キャンバスを座標に合わせる方法が見つからない - アンカーしたい左上隅から。

代わりに、XMLレイアウトを作成してドロアブルに変換しようとしましたが、これを達成できません。

私は達成しようとしているものに対して洗練されたソリューションがありますか？

Answer 1

public class TextDrawable extends Drawable { 

    private final static int TEXT_PADDING   = 3; 
    private final static int ROUNDED_RECT_RADIUS = 5; 

    private final String text; 
    private final Paint  textPaint; 
    private final Rect  textBounds; 
    private final Paint  bgPaint; 
    private final RectF  bgBounds; 

    public TextDrawable(String text, String backgroundColor, int textHeight) { 

     this.text = text; 

     // Text 
     this.textPaint = new Paint(); 
     this.textBounds = new Rect(); 
     textPaint.setColor(Color.WHITE); 
     textPaint.setARGB(255, 255, 255, 255); 
     textPaint.setAntiAlias(true); 
     textPaint.setSubpixelText(true); 
     textPaint.setTextAlign(Paint.Align.CENTER); // Important to centre horizontally in the background RectF 
     textPaint.setTextSize(textHeight); 
     textPaint.setTypeface(Typeface.DEFAULT_BOLD); 
     // Map textPaint to a Rect in order to get its true height 
     // ... a bit long-winded I know but unfortunately getTextSize does not seem to give a true height! 
     textPaint.getTextBounds(text, 0, text.length(), textBounds); 

     // Background 
     this.bgPaint = new Paint(); 
     bgPaint.setAntiAlias(true); 
     bgPaint.setColor(Color.parseColor(backgroundColor)); 
     float rectHeight = TEXT_PADDING * 2 + textHeight; 
     float rectWidth = TEXT_PADDING * 2 + textPaint.measureText(text); 
     //float rectWidth = TEXT_PADDING * 2 + textHeight; // Square (alternative) 
     // Create the background - use negative start x/y coordinates to centre align the icon 
     this.bgBounds = new RectF(rectWidth/-2, rectHeight/-2, rectWidth/2, rectHeight/2); 
    } 

    @Override 
    public void draw(Canvas canvas) { 
     canvas.drawRoundRect(bgBounds, ROUNDED_RECT_RADIUS, ROUNDED_RECT_RADIUS, bgPaint); 
     // Position the text in the horizontal/vertical centre of the background RectF 
     canvas.drawText(text, 0, (textBounds.bottom - textBounds.top)/2, textPaint); 
    } 

    @Override 
    public void setAlpha(int alpha) { 
     bgPaint.setAlpha(alpha); 
     textPaint.setAlpha(alpha); 
    } 

    @Override 
    public void setColorFilter(ColorFilter cf) { 
     bgPaint.setColorFilter(cf); 
     textPaint.setColorFilter(cf); 
    } 

    @Override 
    public int getOpacity() { 
     return PixelFormat.TRANSLUCENT; 
    } 
} 

Answer 2

いくつかのpng画像を&に入れて、res\drawableに入れてください。色が5色以上ある場合は、それ以下のものを考えてください。ユーザーにとって混乱します。