android surface/Image等控件的圆角/圆形并多控件叠加效果实现

青旅半醒 2022-12-26 08:17 208阅读 0赞

# CardView实现圆角/圆形 #

1.  使用CardView，设置cardCornerRadius的值，修改矩形角为圆角。
2.  当CardView为正方形，且cardCornerRadios的值为CardView的宽高的一半时，将显示圆形效果
3.  CardView内部可使用SurfaceView或ImageView皆可，甚至其他控件。

<?xml version="1.0" encoding="utf-8"?>
    <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" xmlns:app="http://schemas.android.com/apk/res-auto">
    
    
            <androidx.cardview.widget.CardView android:id="@+id/cardview_1" android:layout_width="100dp" android:layout_height="match_parent" android:layout_marginBottom="10dp" android:layout_marginStart="10dp" android:layout_marginTop="10dp" android:layout_marginEnd="10dp" app:layout_constraintStart_toStartOf="parent" app:layout_constraintBottom_toBottomOf="parent" app:cardCornerRadius="10dp">
                <SurfaceView android:id="@+id/surface_1" android:layout_width="match_parent" android:layout_height="match_parent" />
            </androidx.cardview.widget.CardView>
    </androidx.constraintlayout.widget.ConstraintLayout>

# 在圆角/圆形内进行图片的叠加 #

一开始想在SurfaceView上再放一些装饰图，但是总也不显示。
    1. 了解了下surfaceview以及cardview的原理
    2. 然后查看了CardView的属性如下：

<androidx.cardview.widget.CardView app:cardBackgroundColor="这是设置背景颜色" app:cardCornerRadius="这是设置圆角大小" app:cardElevation="这是设置z轴的阴影" app:cardMaxElevation="这是设置z轴的最大高度值" app:cardUseCompatPadding="是否使用CompatPadding" app:cardPreventCornerOverlap="是否使用PreventCornerOverlap" app:contentPadding="设置内容的padding" app:contentPaddingLeft="设置内容的左padding" app:contentPaddingTop="设置内容的上padding" app:contentPaddingRight="设置内容的右padding" app:contentPaddingBottom="设置内容的底padding" />

发现有个cardElevation，包着试试的态度，将"**cardElevation**"设置为0dp，于是再SurfaceView上挂一些图片控件便显示了。

<?xml version="1.0" encoding="utf-8"?>
    <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" xmlns:app="http://schemas.android.com/apk/res-auto">
    
    
            <androidx.cardview.widget.CardView android:id="@+id/cardview_1" android:layout_width="100dp" android:layout_height="match_parent" android:layout_marginBottom="10dp" android:layout_marginStart="10dp" android:layout_marginTop="10dp" android:layout_marginEnd="10dp" app:layout_constraintStart_toStartOf="parent" app:layout_constraintBottom_toBottomOf="parent" app:cardElevation="0dp" app:cardCornerRadius="10dp">
                <SurfaceView android:id="@+id/surface_1" android:layout_width="match_parent" android:layout_height="match_parent" />
            </androidx.cardview.widget.CardView>
    </androidx.constraintlayout.widget.ConstraintLayout>