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

Question

如何将 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
                        }
                    }
                )
            }
        })

标签： androidkotlinlayoutimageview

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。只需设置浅色背景 - asbackground和笔图标 - as src。

1）因为ImageView background你必须用两个shapes创建新的drawable 。第一个 ont 是周围的白色边框，第二个它只是浅灰色背景。

您可以设置填充第二个形状（这里，例如，有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) {

    }
}

最后结果