Question

我正在尝试在Android中创建一个包含4条斜条纹的圆形按钮。

（抱歉我的照片编辑技巧很差。

圆圈应该是满的，不要如图所示切断。

尝试使用图层列表并添加了背景按钮不起作用。

知道该怎么做吗？

Answer 1

1。使用drawable创建自定义<layer-list>，使用<shape>元素创建<rotate>。

<强> bg_striped_circle.xml

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

    <item>
        <shape android:shape="rectangle">
            <size
                android:width="200dp"
                android:height="200dp" />

            <solid
                android:color="@android:color/white" />
        </shape>
    </item>

    <!-- RED Stripe -->
    <item
        android:left="-200dp"
        android:bottom="100dp">

        <rotate
            android:fromDegrees="140">

            <shape
                android:shape="line">

                <stroke android:color="@android:color/holo_red_dark"
                    android:width="40dp"/>
            </shape>

        </rotate>
    </item>

    <!-- GREEN Stripe -->
    <item
        android:left="-100dp"
        android:right="-100dp"
        android:bottom="90dp">

        <rotate
            android:fromDegrees="140">

            <shape
                android:shape="line">

                <size
                    android:width="200dp" />
                <stroke android:color="@android:color/holo_green_dark"
                    android:width="40dp"/>
            </shape>
        </rotate>
    </item>

    <!-- BLUE Stripe -->
    <item
        android:left="-100dp"
        android:right="-100dp"
        android:top="90dp">

        <rotate
            android:fromDegrees="140">

            <shape
                android:shape="line">

                <stroke android:color="@android:color/holo_blue_dark"
                    android:width="40dp"/>
            </shape>
        </rotate>
    </item>

    <!-- ORANGE Stripe -->
    <item
        android:top="140dp"
        android:bottom="-50dp"
        android:left="50dp"
        android:right="-50dp">

        <rotate
            android:fromDegrees="140">

            <shape
                android:shape="line">

                <stroke android:color="@android:color/holo_orange_dark"
                    android:width="40dp"/>
            </shape>
        </rotate>
    </item>

</layer-list>

<强>输出：

2。对于圆形，您可以使用第三方库CircleImageView并使用属性bg_striped_circle设置自定义可绘制android:src="@drawable/bg_striped_circle"。

<强> activity_main.xml中

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal"
    android:gravity="center_horizontal"
    android:padding="16dp"
    android:background="@android:color/darker_gray">

    <!-- CIRCLE -->
    <de.hdodenhof.circleimageview.CircleImageView
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id="@+id/profile_image"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:src="@drawable/bg_striped_circle"
        app:civ_border_width="0dp"
        app:civ_border_color="#FFFF" />

    <!-- SQUARE -->
    <ImageView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_marginLeft="16dp"
        android:src="@drawable/bg_striped_circle" />

</LinearLayout>

<强>输出：

仅供参考，我使用了不同的条纹颜色，以便更好地了解自定义可绘制的XML。

希望这会有所帮助〜

Android Circle Button有4条纹

1 个答案: