Android Circle Button有4条纹

Question

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

(抱歉我的照片编辑技巧很差.

圆圈应该是满的,不要如图所示切断.

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

知道怎么做吗？

Answer 1

1.创建自定义drawableusing <layer-list>和<shape>with <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>

OUTPUT:

2.对于圆形,您可以使用第三方库CircleImageView并bg_striped_circle使用属性设置自定义drawable 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>

OUTPUT:

仅供参考,我使用了不同的条纹颜色来更好地理解自定义可绘制XML.

希望这会有所帮助〜