CardView API19及以下圆角效果兼容

左手的ㄟ右手 2023-10-17 12:56 94阅读 0赞

### CardView API19及以下圆角效果兼容 ###

在项目中需要使用CardView，并cardView的顶部为一个ImageView。

<android.support.v7.widget.CardView
                    android:layout_width="match_parent"
                    android:layout_height="300dp"
                    android:layout_weight="260dp"
                    android:elevation="10dp"
                    app:cardBackgroundColor="@color/cover_music_card_bg"
                    app:cardCornerRadius="25dp">
    
               <ImageView android:layout_width="match_parent"
                          android:layout_height="match_parent" />
    
                <.../>
    
    </android.support.v7.widget.CardView>

效果如下所示。

![Android5.0效果][Android5.0]

这个效果在API 21及以上没有问题，但是在API 19及以下，就出现问题了。

![Android4.4效果1][Android4.4_1]

可以发现，cardview和ImageView之间有边距，查阅资料后，得知是有一个cardPreventCornerOverlap=”false”

cardCornerRadius默认为true，用作阻止API 20或者之前的CardView的边角和内部元素重叠。

我们把cardCornerRadius设为false，此时显示效果如下所示

![Android4.4效果2][Android4.4_2]

在API 19中，虽然边距没有了，但是顶部的两个角并没有变圆。

所以在API 19中，需要手动将图片的边角变圆，圆弧的半径和cardview需一致。  
后来，找到一个第三方库，[SelectableRoundedImageView][]，可以将图片的边角变圆，以及支持不规则的图片圆角。

![SelectableRoundedImageView][SelectableRoundedImageView 1]

至此，将ImageView替换成SelectableRoundedImageView，解决了cardview API 19的圆角的兼容问题。

<android.support.v7.widget.CardView
                    android:layout_width="match_parent"
                    android:layout_height="300dp"
                    android:layout_weight="260dp"
                    android:elevation="10dp"
                    app:cardPreventCornerOverlap="false"
                    app:cardBackgroundColor="@color/cover_music_card_bg"
                    app:cardCornerRadius="25dp">
    
                            <com.joooonho.SelectableRoundedImageView
                                android:layout_width="match_parent"
                                android:layout_height="match_parent"
                                android:scaleType="centerCrop"
                                app:sriv_left_bottom_corner_radius="0dp"
                                app:sriv_left_top_corner_radius="25dp"
                                app:sriv_right_bottom_corner_radius="0dp"
                                app:sriv_right_top_corner_radius="25dp" />
    
    </android.support.v7.widget.CardView>

[Android5.0]: https://img-blog.csdn.net/20170503151859966?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvRXRoYW5Dbw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast
[Android4.4_1]: https://img-blog.csdn.net/20170503152021765?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvRXRoYW5Dbw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast
[Android4.4_2]: https://img-blog.csdn.net/20170503151958311?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvRXRoYW5Dbw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast
[SelectableRoundedImageView]: https://github.com/pungrue26/SelectableRoundedImageView
[SelectableRoundedImageView 1]: https://camo.githubusercontent.com/d359ae58a72bc330df60758703185777a15bd1a0/687474703a2f2f692e696d6775722e636f6d2f6953697a4838322e706e67