Сепаратор волной

186

25 февраля 2022, 06:00

Хочу сделать сепаратор, который будет состоять из полукругов. Для разграничения границ layout'ов. См скриншот.

При создании простого сепаратора вида "- - - - -" Мы пишем следущий код

<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="line">
    <stroke
        android:color="#RED"
        android:dashWidth="10px"
        android:dashGap="10px"
        android:width="1dp"/>
</shape>

Но как мне указать не stroke, а мой drawable(полукруг), что бы у меня от начал границы до конца границы были полукруги?

Answer 1

Впринципе если сильно хочется, то можно вот так:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
    android:width="100dp"
    android:height="10dp"
    android:gravity="top">
    <shape android:shape="rectangle">
        <solid android:color="@color/colorPrimary" />
    </shape>
</item>
<item
    android:width="10dp"
    android:height="10dp"
    android:gravity="bottom"
    android:top="5dp">
    <shape android:shape="oval">
        <solid android:color="@color/colorPrimary" />
    </shape>
</item>
<item
    android:width="10dp"
    android:height="10dp"
    android:gravity="bottom"
    android:start="10dp"
    android:top="5dp">
    <shape android:shape="oval">
        <solid android:color="@color/colorPrimary" />
        <size
            android:width="1dp"
            android:height="1dp" />
    </shape>
</item>
<item
    android:width="10dp"
    android:height="10dp"
    android:gravity="bottom"
    android:start="20dp"
    android:top="5dp">
    <shape android:shape="oval">
        <solid android:color="@color/colorPrimary" />
        <size
            android:width="1dp"
            android:height="1dp" />
    </shape>
</item>
<item
    android:width="10dp"
    android:height="10dp"
    android:gravity="bottom"
    android:start="30dp"
    android:top="5dp">
    <shape android:shape="oval">
        <solid android:color="@color/colorPrimary" />
        <size
            android:width="1dp"
            android:height="1dp" />
    </shape>
</item>
<item
    android:width="10dp"
    android:height="10dp"
    android:gravity="bottom"
    android:start="40dp"
    android:top="5dp">
    <shape android:shape="oval">
        <solid android:color="@color/colorPrimary" />
        <size
            android:width="1dp"
            android:height="1dp" />
    </shape>
</item>
<item
    android:width="10dp"
    android:height="10dp"
    android:gravity="bottom"
    android:start="50dp"
    android:top="5dp">
    <shape android:shape="oval">
        <solid android:color="@color/colorPrimary" />
        <size
            android:width="1dp"
            android:height="1dp" />
    </shape>
</item>
<item
    android:width="10dp"
    android:height="10dp"
    android:gravity="bottom"
    android:start="60dp"
    android:top="5dp">
    <shape android:shape="oval">
        <solid android:color="@color/colorPrimary" />
        <size
            android:width="1dp"
            android:height="1dp" />
    </shape>
</item>
<item
    android:width="10dp"
    android:height="10dp"
    android:gravity="bottom"
    android:start="70dp"
    android:top="5dp">
    <shape android:shape="oval">
        <solid android:color="@color/colorPrimary" />
        <size
            android:width="1dp"
            android:height="1dp" />
    </shape>
</item>
<item
    android:width="10dp"
    android:height="10dp"
    android:gravity="bottom"
    android:start="80dp"
    android:top="5dp">
    <shape android:shape="oval">
        <solid android:color="@color/colorPrimary" />
        <size
            android:width="1dp"
            android:height="1dp" />
    </shape>
</item>
<item
    android:width="10dp"
    android:height="10dp"
    android:gravity="bottom"
    android:start="90dp"
    android:top="5dp">
    <shape android:shape="oval">
        <solid android:color="@color/colorPrimary" />
        <size
            android:width="1dp"
            android:height="1dp" />
    </shape>
</item>

Но учтите, что здесть ширина 100dp, соответственно эта реализация не учитывает разные экраны, а это значит что что при расширении экрана, полукруги будут шире, опять же, если вьюшка в которой будет использоваться данный shape имеет ширину и высоту match_parent/wrap_content соответственно.