获取方形的图像,例如Gmail应用程序方形、应用程序、图像、Gmail

2023-09-05 07:57:47 作者:心安勿忘

我要显示的图像与字母像 Gmail应用程序如图所示如下图。

是否所有这些图像的图像保存在绘制文件夹或者将它们画成方形,然后信件被吸引到他们呢?下面是我试过到目前为止做动态。我只是一个正方形。有人建议可以实现像Gmail应用程序的方式吗?

  GradientDrawable GD =新GradientDrawable();
            gd.mutate();
            gd.setColor(getResources()的getColor(gColors [I]));
button.setBackgroundDrawable(GD);
 

解决方案

更新2:

我有固定的一些错误,并在公布的code作为一个开放源码库: https://github.com/ amulyakhare / TextDrawable 。这也包括你可能想看看其他的一些功能。

旧答:

我建议你使用下面的类 CharacterDrawable (只是复制粘贴此):

 公共类CharacterDrawable扩展ColorDrawable {

    私人最终字符的字符;
    私人最终涂料textPaint;
    私人最终涂料borderPaint;
    私有静态最终诠释STROKE_WIDTH = 10;
    私有静态最终浮动SHADE_FACTOR = 0.9F;

    公共CharacterDrawable(CHAR字符,INT的颜色){
        超(彩色);
        this.character =字符;
        this.textPaint =新的油漆();
        this.borderPaint =新的油漆();

        //文字的绘画设置
        textPaint.setColor(Color.WHITE);
        textPaint.setAntiAlias​​(真正的);
        textPaint.setFakeBoldText(真正的);
        textPaint.setStyle(Paint.Style.FILL);
        textPaint.setTextAlign(Paint.Align.CENTER);

        //边界的绘画设置
        borderPaint.setColor(getDarkerShade(颜色));
        borderPaint.setStyle(Paint.Style.STROKE);
        borderPaint.setStrokeWidth(STROKE_WIDTH);
    }

    私人诠释getDarkerShade(INT颜色){
        返回Color.rgb((INT)(SHADE_FACTOR * Color.red(彩色)),
                         (INT)(SHADE_FACTOR * Color.green(彩色)),
                         (中间体)(SHADE_FACTOR * Color.blue(颜色)));
    }

    @覆盖
    公共无效画(油画画布){
        super.draw(画布);

        //绘制边框
        canvas.drawRect(的getBounds(),borderPaint);

        //绘制文本
        INT宽度= canvas.getWidth();
        INT高= canvas.getHeight();
        textPaint.setTextSize(高度/ 2);
        canvas.drawText(将String.valueOf(字符),宽度/ 2,高度/ 2  - ((textPaint.descent()+ textPaint.ascent())/ 2),textPaint);
    }

    @覆盖
    公共无效setAlpha(INT阿尔法){
        textPaint.setAlpha(阿尔法);
    }

    @覆盖
    公共无效setColorFilter(ColorFilter CF){
        textPaint.setColorFilter(CF);
    }

    @覆盖
    公众诠释getOpacity(){
        返回PixelFormat.TRANSLUCENT;
    }
}
 

然后用很简单:新CharacterDrawable('A',0xFF805781); 通过将字符和颜色值(例如颜色。 RED 或十六进制的其他颜色 0xFF805781 ):

 的ImageView ImageView的=(ImageView的)findViewById(R.id.imageView);
CharacterDrawable绘制=新CharacterDrawable('A',0xFF805781);
imageView.setImageDrawable(绘制);
 
Gmail应用程序上提供了Google Meet快捷方式

,或根据你的问题:

  CharacterDrawable绘制=新CharacterDrawable('A',0xFF805781);
button.setBackgroundDrawable(绘制);
 

绘制将缩放以适应的ImageView 的大小。结果将是:

  

更新:更新code添加边框是暗的阴影中(自动选择基于填充颜色深色)

1)根据您的边界thikness需要更改 STROKE_WIDTH 的值。

2)更改 SHADE_FACTOR 边境黑暗的价值。如果 SHADE_FACTOR 小(如 0.2F ),边框会更暗,反之亦然。

注意:您可以轻松地改变字符的大小和字体的

I want to show images with alphabets like gmail app as shown in the below figure.

Are all those images are images to be kept in drawable folder or they are drawn as square shapes and then letters are drawn to them? Below is what I tried so far to do dynamically. I got just a square shape. Can someone suggest the way to achieve like in gmail app?

GradientDrawable gd = new GradientDrawable();
            gd.mutate();
            gd.setColor(getResources().getColor(gColors[i]));
button.setBackgroundDrawable(gd);

解决方案

Update 2:

I have fixed some of the bugs and released the code as an open source library at: https://github.com/amulyakhare/TextDrawable. It also include some other features that you might want to check out.

Old Answer:

I recommend you to use the following class CharacterDrawable (just copy-paste this):

public class CharacterDrawable extends ColorDrawable {

    private final char character;
    private final Paint textPaint;
    private final Paint borderPaint;
    private static final int STROKE_WIDTH = 10;
    private static final float SHADE_FACTOR = 0.9f;

    public CharacterDrawable(char character, int color) {
        super(color);
        this.character = character;
        this.textPaint = new Paint();
        this.borderPaint = new Paint();

        // text paint settings
        textPaint.setColor(Color.WHITE);
        textPaint.setAntiAlias(true);
        textPaint.setFakeBoldText(true);
        textPaint.setStyle(Paint.Style.FILL);
        textPaint.setTextAlign(Paint.Align.CENTER);

        // border paint settings
        borderPaint.setColor(getDarkerShade(color));
        borderPaint.setStyle(Paint.Style.STROKE);
        borderPaint.setStrokeWidth(STROKE_WIDTH);
    }

    private int getDarkerShade(int color) {
        return Color.rgb((int)(SHADE_FACTOR * Color.red(color)),
                         (int)(SHADE_FACTOR * Color.green(color)),
                         (int)(SHADE_FACTOR * Color.blue(color)));
    }

    @Override
    public void draw(Canvas canvas) {
        super.draw(canvas);

        // draw border
        canvas.drawRect(getBounds(), borderPaint);

        // draw text
        int width = canvas.getWidth();
        int height = canvas.getHeight();
        textPaint.setTextSize(height / 2);
        canvas.drawText(String.valueOf(character), width/2, height/2 - ((textPaint.descent() + textPaint.ascent()) / 2) , textPaint);
    }

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

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

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

Then using this is simple: new CharacterDrawable('A', 0xFF805781); by passing the character and the color value (example Color.RED or some other color in hex 0xFF805781):

ImageView imageView = (ImageView) findViewById(R.id.imageView);
CharacterDrawable drawable = new CharacterDrawable('A', 0xFF805781);
imageView.setImageDrawable(drawable); 

or based on your question:

CharacterDrawable drawable = new CharacterDrawable('A', 0xFF805781);    
button.setBackgroundDrawable(drawable);

The drawable will scale to fit the size of the ImageView. Result will be:

Update: Updated code for adding a border which is of darker shade (automatically picks a dark shade based on the fill color).

1) Change the value of STROKE_WIDTH based on your needs for the border thikness.

2) Change the value of SHADE_FACTOR for border darkness. If SHADE_FACTOR is small (eg. 0.2f), the border will be darker and vice versa.

Note: You can easily vary the size and font of the character

 
精彩推荐
图片推荐