使 ImageView 适合 CardView 的宽度 [英] Make ImageView fit width of CardView

问题描述

我有一个带圆角的 CardView，我想在顶部有一个 ImageView，如以下材料设计指南中的示例所示.

规定卡片应该具有圆角，而不是方角.
我遇到的问题是当我将 card_view:cardCornerRadius 设置为 0dp 以外的其他值时，例如4dp，则发生以下情况:
可以看出，ImageView 不适合 CardView.
我的问题是，当 ImageView 有圆角时，如何使它适合 CardView 的布局.
解决方案
你需要做两件事:
1) 在 CardView 上调用 setPreventCornerOverlap(false).
2) 将 rounded Imageview 放入 CardView
关于舍入图像视图，我遇到了同样的问题，所以我制作了一个库，您可以在每个角上设置不同的半径.有一个很好的库(vinc3m1 的 RoundedImageView)支持 ImageView 上的圆角，但它只支持每个角的半径相同.但我希望它仅左上角和右上角被圆角.
最后我得到了我想要的结果，如下所示.
https://github.com/punrue26/SelectableRoundedImageView
I have a CardView with rounded corners, I want to have an ImageView at the top like shown in the example taken from the material design guidelines below.

<android.support.v7.widget.CardView xmlns:card_view="http://schemas.android.com/apk/res-auto"
     android:id="@+id/card_view"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     card_view:cardCornerRadius="4dp">

     <!-- ... --> 
 </android.support.v7.widget.CardView>
Then inside the CardView I have this ImageView
<ImageView
    android:id="@+id/imageView"
    android:layout_width="fill_parent"
    android:layout_height="150dp"
    android:layout_alignParentLeft="true"
    android:layout_alignParentStart="true"
    android:layout_alignParentTop="true"
    android:scaleType="centerCrop"
    android:src="@drawable/default_cover" />
If I have the card_view:cardCornerRadius set to 0dp then the ImageView fits the card like how I want it to.



However, the material design guidelines state that cards should have rounded corners, and not square corners.

The problem I have is when I set the card_view:cardCornerRadius to something other than  0dp, e.g. 4dp, then the following happens:



As can be seen, the ImageView does not fit into the CardView.

My question is, how can I make this ImageView fit to the layout of the CardView when it has rounded corners.
解决方案
You need to do 2 things :

1) Call setPreventCornerOverlap(false) on your CardView.

2) Put rounded Imageview inside CardView

About rounding your imageview, I had the same problem so I made a library that you can set different radii on each corners. There is one good library(vinc3m1’s RoundedImageView) that supports rounded corners on ImageView, but it only supports the same radii on every corners. But I wanted it to be rounded only top left and top right corners.

Finally I got the result what I wanted like below.

https://github.com/pungrue26/SelectableRoundedImageView



                        
这篇关于使 ImageView 适合 CardView 的宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！