android - Android - 複数のビットマップを含むイメージビュー

Question

私は、チャットしている各人のプロフィール写真を表示する必要があるチャットアプリケーションに取り組んでいます。グループ会話の場合は、FB以下のようなレイアウトを設計する必要があります

を使用して実装することを考えてLayerDrawableいますが、方法がわかりません。また、画像はからロードする必要がありますserver。Glide ライブラリを使用してロードしていますimages。

score 2 · Accepted Answer

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>

そして、私のCircular linearlayoutコードは次のようになります

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

乾杯、スリー

score 1 · Accepted Answer

はい、実装する必要がありますLayerDrawable。StackOverflowでは、Android で 2 つの画像をオーバーレイしてイメージビューの問題を設定する例を以下に示します。

複雑な Canvas 操作をスキップして、Drawables を使用してこれをすべて行うことができますLayerDrawable。次の 2 つの選択肢があります。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);
(私はこのコードをテストしていないので、間違いがあるかもしれませんが、この一般的なアウトラインは機能するはずです。)

別の考えられる解決策は、1 つのイメージビューで複数のビットマップを設定できないことです。

次のようなことができます：

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 をご覧ください。同じイメージビュー内に複数の画像を描画する方法ですが、y 座標がシフトされていますか?

1 つの画像で 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;
}

また、次の場所にアクセスすることもできます: Imageview で複数のビットマップを描画する

Web でもいくつかのチュートリアルを見つけることができますが、そこに提示された解決策が上記と大きく異なるとは思いません。

最後に、円を作成したら、このライブラリを使用します: https://github.com/hdodenhof/CircleImageView

それが役立つことを願っています

android - Android - 複数のビットマップを含むイメージビュー

2 に答える 2

Related

Reference