Android 带 4 条条纹的圆形按钮

Question

我正在尝试在 Android 中创建一个圆形按钮，其中有 4 个斜条纹。

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

圆应该是完整的，而不是如图所示被切断。

尝试使用图层列表并添加背景按钮无效。

知道怎么做吗？

Answer 1

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

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. 对于圆形，您可以使用第 3 方库 CircleImageView 并使用属性 android:src="@drawable/bg_striped_circle" 设置自定义可绘制对象 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 带 4 条条纹的圆形按钮

Android Circle Button with 4 stripes

android

android-layout

android-xml