如何修剪左下角的图像以在 XML 中的 cardview 中获得这样的半圆形，在底部修剪图像？附上图片

Posted 2023-02-16

【中文标题】如何修剪左下角的图像以在 XML 中的 cardview 中获得这样的半圆形，在底部修剪图像？附上图片

【英文标题】：How to trim image at the bottom left to get such half rounded shape inside cardview in XML, trimmed image at the bottom? Image attached

【发布时间】：2021-12-12 14:15:08

【问题描述】：

我正在尝试在 cardview 中添加图像，该图像可以从左下角稍微修剪一下，以便可以形成与图像所示相同的半圆形。请帮助我，因为我不知道该怎么做？

【问题讨论】：

我的猜测是，在您的示例中，左下角的蓝色图标实际上包含在图标中的半圆形白色部分。这只是重叠照片

【参考方案1】：

它只是一个带有白色笔划的圆形图像，如您在 this image

你可以使用ShapeableImageView 使您的图像成为圆形并为其添加笔触，您的代码将如下所示

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_
    android:layout_
    tools:context=".MainActivity">
    <!--your main image-->
    <ImageView
        android:id="@+id/imageView"
        android:layout_
        android:layout_
        android:src="@color/black"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
    <!--your circular image-->
    <com.google.android.material.imageview.ShapeableImageView
        android:layout_
        android:layout_
        android:padding="8dp"
        android:src="@drawable/ic_launcher_background"
        android:layout_marginTop="-40dp"
        android:layout_marginStart="20dp"
        app:layout_constraintStart_toStartOf="@+id/imageView"
        app:layout_constraintTop_toBottomOf="@+id/imageView"
        app:strokeWidth="8dp"
        app:strokeColor="@color/white"
        app:shapeAppearanceOverlay="@style/circleImageViewStyle"/>
</androidx.constraintlayout.widget.ConstraintLayout>

这是circleImageViewStyle，在themes.xml 文件中

    <style name="circleImageViewStyle" >
        <item name="cornerFamily">rounded</item>
        <item name="cornerSize">50%</item>
    </style>

上面代码的结果类似于this

【讨论】：

但是如何根据圆形图像调整较大的图像？较大的图像不会与这个圆形图像重叠吗？

@AbhasSharma 您可以为此使用约束布局，请参阅演示代码，我编辑了答案，我将约束设置为主图像的开头，并将圆形图像的顶部设置为主图像的底部，并将 marginTop 设置为图像大小的一半，希望此解决方案对您有所帮助

是的，它奏效了。谢谢！

不客气 :)