Android - изображение с несколькими растровыми изображениями

Question

Я работаю над чат-приложением, которое должно показывать изображение профиля каждого человека, с которым я общаюсь. Если это группа разговор мне нужно разработать схему как FB ниже

Я имею в виду ее реализации с помощью LayerDrawable, но не знаю, как. Также изображения необходимо загрузить с server. Я использую библиотеку Glide для загрузки images.

Answer 1

Рассмотрены 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> 

И мой круговой код 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; 
    } 
} 

Чирза, Sree

Answer 2

Да, вам нужно будет реализовать LayerDrawable. На StackOverflow есть несколько примеров, как это ниже от overlay two images in android to set an imageview выпуска

Вы можете пропустить сложные манипуляции холста и сделать это полностью с вводимого коэффициента, используя 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); 

(Я еще не проверял этот код, так что может быть ошибка, но этот общий контур должен работать.)

Другим возможным решением может быть от unable to set multiple bitmap in one imageview

вы можете сделать что-то вроде следующего:

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 : How to Draw multiple images inside the same imageview but shifted in the y coordinate?

использовать этот код для шоу 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

В Интернете вы также найдете несколько руководств, но я не думаю, что представленное там решение сильно отличалось бы от этого выше.

---

Наконец, как только вы сделали это, чтобы сделать его круг использовать эту библиотеку: https://github.com/hdodenhof/CircleImageView

Надеется, что это поможет