我正在尝试在 xml 中创建这个形状，如何制作它？

Posted 2023-02-26

【中文标题】我正在尝试在 xml 中创建这个形状，如何制作它？

【英文标题】：I'm trying to create this shape in xml, how to make it?

【发布时间】：2020-02-05 02:39:45

【问题描述】：

我已经链接了图像如何在 android xml 中创建它

圆角矩形和圆形 该代码是为获取矩形中的圆而编写的。 我需要创建一个里面有一个圆圈的矩形。如下图所示。

我试过的代码

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- Larger blue circle in back -->
    <item>
        <shape
            android:shape="rectangle"
            >
            <solid android:color="#FFFFFF"
                />
            <corners
                android:topLeftRadius="30dp"
                android:topRightRadius="30dp"
                android:bottomRightRadius="30dp"
                android:bottomLeftRadius="30dp"

                />

            <size
                android:
                android:/>

            <stroke android:
                android:color="#fff" />



        </shape>
    </item>
    <!-- Smaller red circle in front -->
    <item>
        <shape android:shape="oval">
            <!-- transparent stroke = larger_circle_size - smaller_circle_size -->
            <stroke android:color="@android:color/transparent"
                android:/>
            <solid android:color="#f00"/>
            <size
                android:
                android:/>
            <padding
                android:bottom="0dp"
                android:left="10dp"
                android:right="40dp"
                android:top="0dp"
                />
        </shape>
    </item>
</layer-list>

【问题讨论】：

请向我们展示您的尝试，并说明哪一部分让您感到困扰。不要说“全部”，因为假设您至少进行了一些研究，那么简单的红色圆圈对您来说应该是可行的。

这能回答你的问题吗？ How to define a circle shape in an Android xml drawable file?

【参考方案1】：

圆形可以是这样的：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <solid android:color="#B41D1D" />
    <size
        android:
        android: />
</shape>

像这样的另一个形状：

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="#FAFAFA" />
    <corners android:radius="12dp" />
    <size
        android:
        android: />
    </shape>

然后

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_
android:layout_
android:background="#E4E4E4"
android:padding="8dp">

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

<View
    android:id="@+id/view_circle"
    android:layout_
    android:layout_
    android:layout_marginStart="4dp"
    android:background="@drawable/circle"
    app:layout_constraintBottom_toBottomOf="@+id/view_rectangle"
    app:layout_constraintStart_toStartOf="@+id/view_rectangle"
    app:layout_constraintTop_toTopOf="@+id/view_rectangle" />

 </androidx.constraintlayout.widget.ConstraintLayout>

如果你使用 API 23 或更高版本可以这样：

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Larger blue circle in back -->
<item
    android:
    android:>
    <shape android:shape="rectangle">
        <solid android:color="#FFFFFF" />
        <corners android:radius="36dp" />
    </shape>
</item>
<!-- Smaller red circle in front -->
<item
    android:
    android:
    android:gravity="center|start"
    android:start="4dp">
    <shape android:shape="oval">
        <solid android:color="#f00" />
    </shape>
</item>
</layer-list>

【讨论】：

我想把这段代码放在 XML 可绘制资源文件中

我更喜欢最后一个选项，但适用于 API23 或更高版本，请查看developer.android.com/guide/topics/resources/…

谢谢，不过真的很有帮助！

除了圈子外，如何在资源中添加文字？

如果你想创建更复杂的东西，你应该尝试第一个选项，或者使用自定义视图，这是一个非常有趣的话题