1

我正在开发一个聊天应用程序，它确实需要显示与我聊天的每个人的个人资料图片。如果是小组对话，我需要设计FB如下布局

在此处输入图像描述

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

4

2 回答 2

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;
   }
 }

干杯，斯里

于 2015-12-20T23:07:14.623 回答
1

是的，您需要实施LayerDrawable. 在 StackOverflow 上有一些像下面这样的例子，从在 android 中覆盖两个图像来设置 imageview问题

您可以跳过复杂的 Canvas 操作并完全使用 Drawables 完成此操作，使用LayerDrawable. 您有两种选择之一：您可以在 XML 中定义它然后简单地设置图像，或者您可以LayerDrawable在代码中动态配置。

解决方案 #1（通过 XML）：

创建一个新的 Drawable XML 文件，我们称之为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>

现在使用该 Drawable 设置图像：

testimage.setImageDrawable(getResources().getDrawable(R.layout.layer));

解决方案#2（动态）：

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);

（我没有测试过这段代码，所以可能有错误，但这个大致的大纲应该可以。）

另一种可能的解决方案可能是无法在一个图像视图中设置多个位图

您可以执行以下操作：

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;
  }

你调用这个方法如下：

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

      myImageView.setImageBitmap(b);

如果您仍然不满意，请查看Android：如何在同一个 imageview 中绘制多个图像但在 y 坐标上移动？

使用此代码在一张图片中显示 2 张图片：

    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);

这是getCombinedBitmap() 方法：

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;
}

还可以访问： Draw multiple bitmaps on Imageview

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

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

希望有帮助

于 2015-12-16T21:58:10.853 回答