Android

Question

我正在开发一个聊天应用程序，它确实需要显示与我聊天的每个人的头像。如果是群聊我需要设计一个像下面FB这样的布局

我正在考虑使用 LayerDrawable 来实现它，但不确定如何实现。此外，还需要从 server 加载图像。我正在使用 Glide 库加载 images.

Answer 1

是的，您需要实施 LayerDrawable。在 Whosebug 上，overlay two images in android to set an imageview issue

中有一些像下面这样的例子

You can skip the complex Canvas manipulation and do this entirely with Drawables, using LayerDrawable. You have one of two choices: You can either define it in XML then simply set the image, or you can configure a LayerDrawable dynamically in code.

Solution #1 (via XML):

Create a new Drawable XML file, let's call it layer.xml:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/t" />
    <item android:drawable="@drawable/tt" />
</layer-list>
Now set the image using that Drawable:
testimage.setImageDrawable(getResources().getDrawable(R.layout.layer));
Solution #2 (dynamic):
Resources r = getResources();
Drawable[] layers = new Drawable[2];
layers[0] = r.getDrawable(R.drawable.t);
layers[1] = r.getDrawable(R.drawable.tt);
LayerDrawable layerDrawable = new LayerDrawable(layers);
testimage.setImageDrawable(layerDrawable);
(I haven't tested this code so there may be a mistake, but this general outline should work.)

另一种可能的解决方案可能来自 unable to set multiple bitmap in one imageview

you can do something like the following :

public Bitmap drawMultipleBitmapsOnImageView(Bitmap b) {
      Bitmap drawnBitmap = null;

      try {
          drawnBitmap = Bitmap.createBitmap(400, 400, Config.ARGB_8888);

          Canvas canvas = new Canvas(drawnBitmap);
                     // JUST CHANGE TO DIFFERENT Bitmaps and coordinates .
          canvas.drawBitmap(b, 100, 100, null);
          canvas.drawBitmap(b, 200, 300, null);
          canvas.drawBitmap(b, 100, 200, null);
          canvas.drawBitmap(b, 300, 350, null);

      } catch (Exception e) {
          e.printStackTrace();
      }
      return drawnBitmap;
  }

you call this method like the following :

ImageView myImageView = (ImageView) findViewById(R.id.myImageView);
      Bitmap bitmap = ((BitmapDrawable) myImageView.getDrawable())
              .getBitmap();
      Bitmap b = drawMultipleBitmapsOnImageView(bitmap);

      myImageView.setImageBitmap(b);

如果你还觉得不满意，看看Android : How to Draw multiple images inside the same imageview but shifted in the y coordinate?

use this code for show 2 image in one image:

    ImageView myImageView = (ImageView) findViewById(R.id.img1);
    Bitmap bitmap1 = BitmapFactory.decodeResource(getResources(), R.drawable.call);
    Bitmap bitmap2 = BitmapFactory.decodeResource(getResources(), R.drawable.available);
    Bitmap combinedBitmap = getCombinedBitmap(pic2, pic1);

    myImageView.setImageBitmap(b);

and this is the getCombinedBitmap() method :

public Bitmap getCombinedBitmap(Bitmap b, Bitmap b2) {
    Bitmap drawnBitmap = null;

    try {
        drawnBitmap = Bitmap.createBitmap(200, 200, Config.ARGB_8888);

        Canvas canvas = new Canvas(drawnBitmap);
        // JUST CHANGE TO DIFFERENT Bitmaps and coordinates .
        canvas.drawBitmap(b, 0, 0, null);
        canvas.drawBitmap(b2, 0, 0, null);
        //for more images :
        // canvas.drawBitmap(b3, 0, 0, null);
        // canvas.drawBitmap(b4, 0, 0, null);

    }
    catch (Exception e) {
        e.printStackTrace();
    }
    return drawnBitmap;
}

您还可以访问：

在 Web 上您还会找到一些教程，但我认为那里提供的解决方案与上面的解决方案没有太大不同。

最后，一旦你完成了它的循环使用这个库：https://github.com/hdodenhof/CircleImageView

希望对您有所帮助

Answer 2

并排考虑了 3 个布局，并将顶部布局包裹成圆形。

<?xml version="1.0" encoding="utf-8"?>
<nz.co.example.components.CircleLinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:custom="http://schemas.android.com/apk/res-auto"
android:layout_width="@dimen/messaging_profile_pic_size"
android:layout_height="@dimen/messaging_profile_pic_size"
android:orientation="horizontal"
custom:diameter="@dimen/messaging_profile_pic_size"
>
<ImageView
    android:layout_width="0dp"
    android:layout_height="match_parent"
    android:layout_weight="1"
    android:id="@+id/iv_left"
    android:scaleType="centerCrop"
    />

<LinearLayout
    android:layout_width="0dp"
    android:layout_height="match_parent"
    android:layout_weight="1"
    android:orientation="vertical"
    android:paddingStart="@dimen/line_spacing"
    android:paddingEnd="0dp"
    >
    <ImageView
        android:layout_width="@dimen/messaging_profile_pic_half_size"
        android:layout_height="@dimen/messaging_profile_pic_half_size"
        android:id="@+id/iv_top_right"
        android:scaleType="centerCrop"
        />
    <ImageView
        android:layout_width="@dimen/messaging_profile_pic_half_size"
        android:layout_height="@dimen/messaging_profile_pic_half_size"
        android:id="@+id/iv_bottom_right"
        android:paddingTop="@dimen/line_spacing"
        android:scaleType="centerCrop"
        />
</LinearLayout>

</nz.co.example.components.CircleLinearLayout>

我的圆形线性布局代码是这样的

public class CircleLinearLayout extends LinearLayout {

private Bitmap maskBitmap;
private Paint paint, maskPaint;
private float radius;

public CircleLinearLayout(Context context) {
    super(context);
    init(context, null, 0);
}

public CircleLinearLayout(Context context, AttributeSet attrs) {
    super(context, attrs);
    init(context, attrs, 0);
}

public CircleLinearLayout(Context context, AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
    init(context, attrs, defStyleAttr);
}

private void init(Context context, AttributeSet attrs, int defStyle) {

    paint = new Paint(Paint.ANTI_ALIAS_FLAG);

    maskPaint = new Paint(Paint.ANTI_ALIAS_FLAG | Paint.FILTER_BITMAP_FLAG);
    maskPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.CLEAR));
    if(attrs != null)
    {
        TypedArray a = context.getTheme().obtainStyledAttributes( attrs,R.styleable.CircleLinearLayout, defStyle , 0);

        try {
            radius = a.getDimension(R.styleable.CircleLinearLayout_diameter, getResources().getDimension(R.dimen.messaging_profile_pic_size)) / 2;
        } finally {
            a.recycle();
        }
    }

    setWillNotDraw(false);
}

@Override
public void draw(Canvas canvas) {
    Bitmap offscreenBitmap = Bitmap.createBitmap(canvas.getWidth(), canvas.getHeight(), Bitmap.Config.ARGB_8888);
    Canvas offscreenCanvas = new Canvas(offscreenBitmap);

    super.draw(offscreenCanvas);

    if (maskBitmap == null) {
        maskBitmap = createMask(canvas.getWidth(), canvas.getHeight());
    }

    offscreenCanvas.drawBitmap(maskBitmap, 0f, 0f, maskPaint);
    canvas.drawBitmap(offscreenBitmap, 0f, 0f, paint);
}

private Bitmap createMask(int width, int height) {
    Bitmap mask = Bitmap.createBitmap(width, height, Bitmap.Config.ALPHA_8);
    Canvas canvas = new Canvas(mask);

    Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
    paint.setColor(Color.WHITE);

    canvas.drawRect(0, 0, width, height, paint);

    paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.CLEAR));

    canvas.drawCircle(radius , radius , radius , paint);

    return mask;
   }
 }

干杯，斯里

Android - 具有多个位图的图像视图

Android - Imageview with multiple bitmaps

android-layout

android-imageview

android-glide

android-custom-drawable