像Gmail Android最佳实践的字母头像

时间:2014-06-15 18:36:53

标签: android gmail photo avatar letter

在Gmail中生成(代码中)字母化身的最佳方式是什么? 这里有一个例子 https://drive.google.com/folderview?id=0B0Fhz5fDg1njSmpUakhhZllEWHM&usp=sharing

看起来应该是这样的:

Gmail letter avatar

4 个答案:

答案 0 :(得分:6)

这是我曾经使用过的...请根据您的要求尝试修改。

    public class LetterAvatar extends ColorDrawable {
Paint               paint   = new Paint();
Rect                bounds  = new Rect();

String              pLetters;
private float       ONE_DP  = 0.0f;
private Resources   pResources;
private int         pPadding;
int                 pSize   = 0;
float               pMesuredTextWidth;

int                 pBoundsTextwidth;
int                 pBoundsTextHeight;

public LetterAvatar (Context context, int color, String letter, int paddingInDp) {
    super(color);
    this.pLetters = letter;
    this.pResources = context.getResources();
    ONE_DP = 1 * pResources.getDisplayMetrics().density;
    this.pPadding = Math.round(paddingInDp * ONE_DP);
}

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



    do {
        paint.setTextSize(++pSize);
        paint.getTextBounds(pLetters, 0, pLetters.length(), bounds);

    } while ((bounds.height() < (canvas.getHeight() - pPadding)) && (paint.measureText(pLetters) < (canvas.getWidth() - pPadding)));

    paint.setTextSize(pSize); 
    pMesuredTextWidth = paint.measureText(pLetters);
    pBoundsTextHeight = bounds.height();

    float xOffset = ((canvas.getWidth() - pMesuredTextWidth) / 2);
    float yOffset = (int) (pBoundsTextHeight + (canvas.getHeight() - pBoundsTextHeight) / 2);
    paint.setTypeface(Typeface.defaultFromStyle(Typeface.BOLD));
    paint.setColor(0xffffffff);
    canvas.drawText(pLetters, xOffset, yOffset, paint);
}
    }

然后在你的imageview.setdrawable中设置新的LetterAvatar(context,colorCode,letters,padding)

答案 1 :(得分:2)

如果您只询问ListView左侧的头像。

使用ImageView,如果你有用户头像 - 把它放在那里,如果你没有头像 - 使用.drawText("R")功能绘制画布并将其放入ImageView使用{ {1}}。

答案 2 :(得分:0)

根据您上面提供的图片判断,可以使用自定义列表视图完成此操作。您要查找的头像应该是自定义布局中的图像视图,并且会膨胀到列表视图中。我建议你从这里开始。 gravar可以是资源文件夹中可绘制的图像,

http://www.ezzylearning.com/tutorial.aspx?tid=1763429

答案 3 :(得分:0)

下面是一个类,可同时生成圆形和方形的Image头像。来源是here

    class AvatarGenerator {
    companion object {
    lateinit var uiContext: Context
    var texSize = 0F

    fun avatarImage(context: Context, size: Int, shape: Int, name: String): BitmapDrawable {
      uiContext = context
      val width = size
      val hieght = size

      texSize = calTextSize(size)
      val label = firstCharacter(name)
      val textPaint = textPainter()
      val painter = painter()
      val areaRect = Rect(0, 0, width, width)

      if (shape == 0) {
        painter.color = RandomColors().getColor()
      } else {
        painter.color = Color.TRANSPARENT
      }

      val bitmap = Bitmap.createBitmap(width, width, ARGB_8888)
      val canvas = Canvas(bitmap)
      canvas.drawRect(areaRect, painter)

      //reset painter
      if (shape == 0) {
        painter.color = Color.TRANSPARENT
      } else {
        painter.color = RandomColors().getColor()
      }

      val bounds = RectF(areaRect)
      bounds.right = textPaint.measureText(label, 0, 1)
      bounds.bottom = textPaint.descent() - textPaint.ascent()

      bounds.left += (areaRect.width() - bounds.right) / 2.0f
      bounds.top += (areaRect.height() - bounds.bottom) / 2.0f

      canvas.drawCircle(width.toFloat() / 2, hieght.toFloat() / 2, width.toFloat() / 2, painter)
      canvas.drawText(label, bounds.left, bounds.top - textPaint.ascent(), textPaint)
      return BitmapDrawable(uiContext.resources, bitmap)

    }

    private fun firstCharacter(name: String): String {
      return name.first().toString().toUpperCase()
    }

    private fun textPainter(): TextPaint {
      val textPaint = TextPaint()
      textPaint.textSize = texSize * uiContext.resources.displayMetrics.scaledDensity
      textPaint.color = Color.WHITE
      return textPaint
    }

    private fun painter(): Paint {
      return Paint()
    }

    private fun calTextSize(size: Int): Float {
      return (size / 3.125).toFloat()
    }
  }
}

然后您可以传递上下文,字符串,大小和形状以生成1/0

    imageView.setImageDrawable(
      AvatarGenerator.avatarImage(
        this,
        200,
        1,
        "Skyways"
      )