只有一个圆角的 ImageView

Question

我正在尝试ImageView在下图中制作一个圆角，但右下角。尝试使用背景形状，但它根本不起作用。Glide 加载的所有图像。我应该使用类似的东西ViewOutlineProvider吗？有没有一种有效的方法来做到这一点？谢谢！

<shape xmlns:android="http://schemas.android.com/apk/res/android" >
    <corners
        android:radius="2dp"
        android:bottomRightRadius="20dp"
        android:bottomLeftRadius="0dp"
        android:topLeftRadius="0dp"
        android:topRightRadius="0dp"/>
</shape>

Answer 1

该材料组件库推出了ShapeableImageView从版本开始1.2.0-alpha03。

只需使用类似的东西：

  <com.google.android.material.imageview.ShapeableImageView
      android:id="@+id/image_view"
      android:scaleType="centerInside"
      android:adjustViewBounds="true"
      ../>

然后在你的代码中你可以应用ShapeAppearanceModel：

ShapeableImageView imageView = findViewById(R.id.image_view);
float radius = getResources().getDimension(R.dimen.default_corner_radius);
imageView.setShapeAppearanceModel(imageView.getShapeAppearanceModel()
    .toBuilder()
    .setTopRightCorner(CornerFamily.ROUNDED,radius)
    .build());

您还可以在 xml 中应用shapeAppearanceOverlay参数：

<com.google.android.material.imageview.ShapeableImageView
      app:shapeAppearanceOverlay="@style/customRroundedImageView"
      app:srcCompat="@drawable/ic_image" />

和：

  <style name="customRoundedImageView" parent="">
    <item name="cornerFamily">rounded</item>
    <item name="cornerSize">0dp</item>   
    <item name="cornerSizeTopRight">8dp</item>
  </style>

使用jetpack compose， 1.0.x您可以clip使用以下命令应用修改器RoundedCornerShape：

Image(painterResource(id = R.drawable.xxx),
    contentDescription = "xxxx",
    contentScale = ContentScale.Crop,
    modifier = Modifier
        .size(xx.dp,xx.dp)
        .clip(RoundedCornerShape(topStart = 12.dp)),
)

Answer 2

另外，如果您想摆脱在“.java”文件中编写代码。然后您可以像下面一样定义样式并将其添加到您的ShapeableImageView：

<com.google.android.material.imageview.ShapeableImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/ex_image"
    app:shapeAppearanceOverlay="@style/roundedImageView"
    />

然后：

<style name="roundedImageView" parent="">
    <item name="cornerFamilyTopRight">rounded</item>
    <item name="cornerSizeTopRight">30dp</item>
</style>