锚定一个ImageView到另一个ImageView的角落。

Question

如何将一个ImageView锚定到另一个ImageView的右下角，就像上图中的那样（1人和2铅笔）。

我正在使用retrofit将我的资源以椭圆形加载到ImageViews中。

我这样做:

   Glide.with(context)
        .asBitmap()
        .load(model)
        .fitCenter()
        .apply(RequestOptions.circleCropTransform())
        .into(object : BitmapImageViewTarget(this) {
            override fun setResource(resource: Bitmap?) {
                setImageDrawable(
                    resource?.run {
                        RoundedBitmapDrawableFactory.create(
                            resources,
                            if (borderSize > 0) {
                                createBitmapWithBorder(borderSize, borderColor)
                            } else {
                                this
                            }
                        ).apply {
                            isCircular = true
                        }
                    }
                )
            }
        })

Answer 1

基础概念

要建立这样的布局，你可以使用例如 ConstraintLayout 或 RelativeLayout.

使用 RelativeLayout 你可以建立这样的结构。

<RelativeLayout
    android:layout_width="200dp"
    android:layout_height="200dp">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginEnd="20dp"
        android:layout_marginBottom="20dp"
        android:background="#00f" />

    <ImageView
        android:layout_width="70dp"
        android:layout_height="70dp"
        android:layout_alignParentEnd="true"
        android:layout_alignParentBottom="true"
        android:background="#f0f" />

</RelativeLayout>

它应该是这样的：

小圆圈

对于较小的圆圈（灰色的那个），你可以只用一个。 ImageView. 只要设置浅色背景--如 background 和笔的图标--如 src.

(1) 对于 ImageView background 你必须创建新的可绘制的两个 shapes. 第一个ont是为了周围的白色边框，第二个只是浅灰色的背景。

你可以在第二个形状中设置padding(这里的例子中，有一个是 5dp)

<?xml version="1.0" encoding="utf-8"?><?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item>
        <shape android:shape="oval">
            <solid android:color="#FFFFFF" />
        </shape>
    </item>

    <item
        android:bottom="5dp"
        android:left="5dp"
        android:right="5dp"
        android:top="5dp">
        <shape android:shape="oval">
            <solid android:color="#CACACA" />
        </shape>
    </item>

</layer-list>

2) 作为图标，你可以使用可绘制的(如矢量)或直接使用图像，并将其设为 src

过了这个点，应该就会像有。

3）设置 padding 在 ImageView 以正确地缩放你的（笔）图标。

<ImageView
    android:layout_width="70dp"
    android:layout_height="70dp"
    android:layout_alignParentEnd="true"
    android:layout_alignParentBottom="true"
    android:background="@drawable/small_circle_background"
    android:padding="16dp"
    android:src="@drawable/small_circle_icon" />

大圆圈

最好的方法是使用一些库，如Picasso或Glide。

对于Glide，你可以使用 CircleTransform() 将收到的图片裁剪成圆形。在加载图片时，您可以直接使用 transform() 方法。

Glide.with(this)
    .load(URL)
    .transform(new CircleTransform(context))
    .into(imageView);

当 CircleTransform 是。

import android.graphics.Bitmap;
import android.graphics.BitmapShader;
import android.graphics.Canvas;
import android.graphics.Paint;

import androidx.annotation.NonNull;

import com.bumptech.glide.load.engine.bitmap_recycle.BitmapPool;
import com.bumptech.glide.load.resource.bitmap.BitmapTransformation;

import org.jetbrains.annotations.NotNull;

import java.security.MessageDigest;

public class CircleTransform extends BitmapTransformation {

    @Override protected Bitmap transform(@NotNull BitmapPool pool, @NotNull Bitmap toTransform, int outWidth, int outHeight) {
        return circleCrop(pool, toTransform);
    }

    private static Bitmap circleCrop(BitmapPool pool, Bitmap source) {
        if (source == null) return null;

        int size = Math.min(source.getWidth(), source.getHeight());
        int x = (source.getWidth() - size) / 2;
        int y = (source.getHeight() - size) / 2;

        Bitmap squared = Bitmap.createBitmap(source, x, y, size, size);

        Bitmap result = pool.get(size, size, Bitmap.Config.ARGB_8888);

        Canvas canvas = new Canvas(result);
        Paint paint = new Paint();
        paint.setShader(new BitmapShader(squared, BitmapShader.TileMode.CLAMP, BitmapShader.TileMode.CLAMP));
        paint.setAntiAlias(true);
        float r = size / 2f;
        canvas.drawCircle(r, r, r, paint);
        return result;
    }

    @Override
    public void updateDiskCacheKey(@NonNull MessageDigest messageDigest) {

    }
}

最后结果

Answer 2

你可以像这样实现你想要的东西。

    <FrameLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">
        <ImageView
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:src="@drawable/first_image"/>
        <ImageView
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:src="@drawable/second"
            android:layout_gravity="bottom|right"/>
    </FrameLayout>