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

Question

如何将一个 ImageView 锚定到另一个 ImageView 的右下角，如上图所示（1 人和 2 铅笔）

我正在使用改造将我的源作为椭圆加载到 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 创建新的 drawable。首先是白色边框，其次是浅灰色背景。

可以设置padding second shape（这里举例有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) {

    }
}

最终结果

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>

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

Anchor an ImageView to corner of another ImageView

layout

android

imageview

kotlin

基本概念

小圆圈

大圈

最终结果