Drawable xml 中间有水平线和圆圈

Question

我想为下面的形状创建一个可绘制的 xml 文件。就像一条水平线应该填满布局的宽度，中间有一个圆圈。

谁能帮我解决这个问题？提前致谢。

Answer 1

<RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@+id/txtstep"
            android:layout_marginLeft="30dp"
            android:layout_marginRight="30dp"
            android:layout_marginTop="6dp">

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_centerInParent="true"
                android:background="@drawable/simple_border_white"
                android:textSize="3dp" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerInParent="true"
                android:background="@drawable/round_with_shadow"
                android:gravity="center"
                android:text="1"
                android:textColor="@color/colorPrimaryDark"
                android:textSize="26sp" />

        </RelativeLayout>

simple_border_white.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <solid android:color="@android:color/transparent" />
            <!--background color of box-->
        </shape>
    </item>

    <item
        android:left="-2dp"
        android:right="-2dp"
        android:top="-2dp">
        <shape>
            <solid android:color="@android:color/transparent" />
            <stroke
                android:width="1dp"
                android:color="@color/accentcolor" />
        </shape>
    </item>
</layer-list>

round_with_shadow.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <solid android:color="@color/accentcolor"/>
    <stroke
        android:width="4dp"
        android:color="@color/colorPrimaryLight"/>
    <size android:width="40dp" android:height="40dp"/>
</shape>

希望这对您有所帮助

Answer 2

创建您的可绘制文件并放置以下代码。
并将您的颜色代码更改为红色。

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
    android:bottom="10dp"
    android:left="10dp"
    android:right="10dp"
    android:top="10dp">
    <shape xmlns:android="http://schemas.android.com/apk/res/android"
        android:shape="oval">
        <solid android:color="@color/colorAccent" />
        <size
            android:width="10dp"
            android:height="10dp" />
    </shape>
</item>
<item>
    <rotate
        android:fromDegrees="180"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toDegrees="90">
        <shape
            android:shape="line"
            android:top="1dp">
            <stroke
                android:width="0.5dp"
                android:color="@color/colorAccent" />
        </shape>
    </rotate>
</item>

Answer 3

使用下方 drawable XML 到您的视图背景中：

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:width="100dp"
        android:height="100dp"
        android:gravity="center">

        <shape android:shape="oval">
            <solid android:color="@android:color/holo_red_dark" />
            <!--background color of box-->
        </shape>

    </item>
    <item
        android:height="10dp"
        android:gravity="center">

        <shape android:shape="rectangle">
            <solid android:color="@android:color/holo_red_dark" />
            <!--background color of box-->
        </shape>

    </item>

</layer-list>

Answer 4

保持简单

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:height="1dp"
        android:gravity="center">
        <shape android:shape="rectangle">
            <solid android:color="#ff0000" />
        </shape>
    </item>

    <item
        android:width="56dp"
        android:height="56dp"
        android:gravity="center">
        <shape android:shape="oval">
            <solid android:color="#ff0000" />
        </shape>
    </item>
</layer-list>

输出

Answer 5

自 23 api 起支持 <item/> 中的属性 height 和 width。对于早期版本，您可以使用以下代码：

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:gravity="center">
    <shape android:shape="rectangle">
        <size android:height="1dp" />
        <solid android:color="#ff0000" />
    </shape>
</item>
<item android:gravity="center">
    <shape android:shape="oval">
        <size
            android:width="30dp"
            android:height="30dp" />
        <solid android:color="#ff0000" />
    </shape>
</item>

Drawable xml 中间有水平线和圆圈

Drawable xml with horizontal line and circle in middle

android

android-layout

android-drawable