【问题标题】：Anchor an ImageView to corner of another ImageView将 ImageView 锚定到另一个 ImageView 的角落
【发布时间】：2020-08-22 15:44:13
【问题描述】：

如何将 ImageView 锚定到另一个 ImageView 的右下角，如上图（1-man 和 2-pencil）

我正在使用改造将我的资源作为椭圆形加载到 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
                        }
                    }
                )
            }
        })

【问题讨论】：

@Sajjad 我会有两个 imageView 我可以做椭圆形 imageView 但我不能创建两个看起来像在屏幕上的 imageView
@Sajjad 是的，我想这样做

标签： android kotlin layout imageview

【解决方案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 来创建新的drawable。第一个 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) 在ImageView 中设置padding 以正确缩放（笔）图标：

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

    }
}

最终结果

【讨论】：

【解决方案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>

【讨论】：