如何创建这样的背景形状

Posted 2023-04-18

技术标签:

【中文标题】如何创建这样的背景形状【英文标题】：How can I create a background shape like this 【发布时间】：2020-08-08 18:12:35 【问题描述】：

我有cardview，目前看起来像这样。这些cardviews 在list view 内。我需要这样创作吗？

请问有什么帮助吗？

编辑

感谢 Marsad 和 Zain 的回答。但是，我可以设法得到这个。但是我无法从下面指出的视图中删除形状下的 corner background。

另外，这个视图如何获得玻璃视图？完整的xml 已更新。

    <?xml version="1.0" encoding="utf-8"?>

<RelativeLayout style="@style/clock_item" 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">
<androidx.cardview.widget.CardView
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:card_view="http://schemas.android.com/tools"
    android:layout_
    android:layout_
    android:layout_marginTop="10dp"
    android:layout_marginBottom="10dp"
    android:layout_marginLeft="20dp"
    android:layout_marginRight="20dp"
    card_view:cardBackgroundColor="@android:color/transparent"
    card_view:cardElevation="0dp">
        <RelativeLayout style="@style/clock_item"
            android:background="?android:attr/activatedBackgroundIndicator"
            android:layout_marginTop="5dp"
            android:layout_marginBottom="5dp"
            android:layout_marginLeft="5dp"
            android:visibility="gone"
            android:layout_marginRight="5dp">
            <include layout="@layout/clock_item_merge" />
        </RelativeLayout>

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_
        android:layout_>

        <View
            android:id="@+id/top_view"
            android:layout_
            android:layout_
            android:background="@drawable/top_view"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <View
            android:layout_
            android:layout_
            android:background="#F07971"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/top_view" />

        <androidx.constraintlayout.widget.ConstraintLayout
            android:id="@+id/bottom_view"
            android:layout_
            android:layout_
            android:background="@drawable/bottom_view"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/top_view">

            <TextView
                android:id="@+id/textView2"
                android:layout_
                android:layout_
                android:layout_marginStart="16dp"
                android:text="Some Text"
                android:textSize="22sp"
                android:textStyle="bold"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent" />

            <ImageView
                android:layout_
                android:layout_
                android:layout_marginEnd="8dp"
                android:background="@drawable/icon_nexcloud"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintTop_toTopOf="parent" />

        </androidx.constraintlayout.widget.ConstraintLayout>

    </androidx.constraintlayout.widget.ConstraintLayout>

</androidx.cardview.widget.CardView>
</RelativeLayout>

【问题讨论】：

【参考方案1】：

你可以这样做

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">

    <solid
        android:color="#2196F3"/>


    <corners
        android:topLeftRadius="20dp"
        android:bottomRightRadius="20dp"/>

</shape>

更新

这是更新的背景可绘制对象

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:>

        <shape>
            <solid android:color="#EE7A72" />

            <corners
                android:bottomRightRadius="20dp"
                android:topLeftRadius="20dp"
                android:topRightRadius="20dp" />

        </shape>

    </item>

    <item
        android:
        android:top="200dp">

        <shape>

            <solid android:color="#3197F4" />

            <corners
                android:bottomRightRadius="20dp"
                android:topLeftRadius="20dp" />

        </shape>

    </item>

</layer-list>

移除卡片视图角背景

android:backgroundTint="@android:color/transparent"

【讨论】：

【参考方案2】：

这是CardView 布局，使用了几个drawable 和一个vector drawable

<androidx.cardview.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_
    android:layout_
    app:cardCornerRadius="20dp"
    app:cardElevation="5dp">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_
        android:layout_
        android:background="@android:color/transparent">

        <View
            android:id="@+id/top_view"
            android:layout_
            android:layout_
            android:background="@drawable/top_view"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <View
            android:id="@+id/top_view2"
            android:layout_
            android:layout_
            android:layout_marginEnd="20dp"
            android:background="@drawable/ic_eclipse"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <View
            android:layout_
            android:layout_
            android:background="#F4A896"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/top_view" />

        <androidx.constraintlayout.widget.ConstraintLayout
            android:id="@+id/bottom_view"
            android:layout_
            android:layout_
            android:background="@drawable/bottom_view"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/top_view">

            <TextView
                android:id="@+id/textView2"
                android:layout_
                android:layout_
                android:layout_marginStart="16dp"
                android:text="Some Text"
                android:textSize="28sp"
                android:textStyle="bold"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent" />

            <ImageView
                android:layout_
                android:layout_
                android:layout_marginEnd="8dp"
                android:background="@drawable/ic_play_circle_outline_black_24dp"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintTop_toTopOf="parent" />

        </androidx.constraintlayout.widget.ConstraintLayout>

    </androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>

bottom_view.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">

    <solid android:color="#2196F3" />


    <corners
        android:bottomRightRadius="20dp"
        android:topLeftRadius="20dp" />

</shape>

top_view.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item>
        <shape>

            <solid android:color="#F4A896" />

            <corners
                android:topLeftRadius="20dp"
                android:topRightRadius="20dp" />

        </shape>
    </item>

    <item android:left="200dp">
        <shape>

            <solid android:color="#F2927B" />

            <corners
                android:topLeftRadius="20dp"
                android:topRightRadius="20dp" />

        </shape>

    </item>

</layer-list>

ic_eclipse.xml

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:
    android:
    android:viewportWidth="178"
    android:viewportHeight="63">
  <path
      android:pathData="M177.896,62.809C177.896,40 177.896,3.121 177.896,1.311C177.896,-0.5 135.646,1.311 98.146,1.311C76,1.311 70.793,1.997 37,1.997C5.793,28 0.646,40 0.646,62.809C0.646,62.809 61.534,62.809 98.146,62.809C112.107,62.809 133.896,62.809 133.896,62.809H177.896Z"
      android:fillColor="#F2927B"/>
</vector>

现在的结果：

【讨论】：

谢谢，@Zain 这是完美的。我仍然无法删除角落背景。右上角的矢量也是从radious出来的。 @BiswajitDas 请立即检查.. 刚刚更新了 top_view.xml 以显示右上角.. 并在 eclipse.xml 视图中添加了右边距...对于显示的角，我只是向 CardView 添加了半径为 0 @BiswajitDas 请检查更新的答案，我决定删除 CardView 并保留 ConstraintLayout 因为它会导致这个角落背景其实我一直在寻找带有阴影效果的高程。你认为 ConstraintLayout 有可能吗？ @BiswajitDas 请检查一下..我已经返回了CardView，添加了高程并以20dp的半径量固定背景角以与drawables的曲线匹配

以上是关于如何创建这样的背景形状的主要内容，如果未能解决你的问题，请参考以下文章

如何以编程方式创建 android 形状背景？

创建一个看起来像优惠券项目的自定义形状背景[关闭]

如何创建自定义形状的CardView android

如何在xml中设置形状的背景？

创建一个反向剪辑路径 - CSS或SVG

如何在 Swift 中创建具有自定义形状的 UIButton？