Android 带有箭头和垂直线的自定义微调器UI

我试图实现一个带有自定义布局（而不是微调器项布局）的微调器，即外部布局。我希望它看起来像这样：

我搜索了stackoverflow和google，但不知道如何找到这个（除了把整个图片作为背景）

提前多谢

编辑 这就是我所尝试的：

styles.xml

<style name="spinner">
    <item name="android:layout_marginTop">6dp</item>
    <item name="android:layout_marginBottom">6dp</item>
    <item name="android:layout_marginLeft">0dp</item>
    <item name="android:layout_marginRight">0dp</item>
    <item name="android:padding">10dp</item>
    <item name="android:background">@drawable/spinner_bg</item>
    <item name="android:popupBackground">@color/red</item>
    <item name="android:textSize">15sp</item>
</style>

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <layer-list>
            <item>
                <shape>
                    <gradient android:angle="90" android:endColor="#ff0000"
                        android:startColor="#ff0000" android:type="linear" />
                    <stroke android:width="0.33dp" android:color="#0fb1fa" />
                    <corners android:radius="0dp" />    
                    <padding android:bottom="3dp" android:left="3dp" android:right="3dp" android:top="3dp" />
                </shape>
            </item>
            <item android:right="5dp">
                <bitmap android:gravity="center_vertical|right" android:src="@drawable/arrow_white_down" />
            </item>
        </layer-list>
    </item>
</selector>

<style name="spinner_container">
    <item name="android:layout_width">match_parent</item>
    <item name="android:layout_height">35dp</item>
    <item name="android:orientation">horizontal</item>

    <item name="android:layout_marginTop">6dp</item>
    <item name="android:layout_marginBottom">6dp</item>
    <item name="android:layout_marginLeft">0dp</item>
    <item name="android:layout_marginRight">0dp</item>

    <item name="android:background">@color/red</item>
</style>

<style name="spinner">
    <item name="android:layout_width">match_parent</item>
    <item name="android:layout_height">wrap_content</item>

    <item name="android:layout_margin">0dp</item>

    <item name="android:layout_alignParentLeft">true</item>
    <item name="android:layout_alignParentStart">true</item>

    <item name="android:padding">5dp</item>

    <item name="android:textColor">@color/white</item>
    <item name="android:background">@color/red</item>
    <item name="android:popupBackground">@color/red</item>

    <item name="android:textSize">15sp</item>
</style>

<style name="spinner_image">
    <item name="android:layout_width">wrap_content</item>
    <item name="android:layout_height">match_parent</item>

    <item name="android:layout_margin">5dp</item>
    <item name="android:padding">0dp</item>

    <item name="android:layout_alignParentRight">true</item>
    <item name="android:layout_alignParentEnd">true</item>
    <item name="android:adjustViewBounds">true</item>
    <item name="android:src">@drawable/bc_spinner_arrow</item>
</style>

6dp
6dp
0dp
0dp
10dp
@可拉拔/旋转装置
@颜色/红色
15便士

spinner_bg.xml

<style name="spinner">
    <item name="android:layout_marginTop">6dp</item>
    <item name="android:layout_marginBottom">6dp</item>
    <item name="android:layout_marginLeft">0dp</item>
    <item name="android:layout_marginRight">0dp</item>
    <item name="android:padding">10dp</item>
    <item name="android:background">@drawable/spinner_bg</item>
    <item name="android:popupBackground">@color/red</item>
    <item name="android:textSize">15sp</item>
</style>

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <layer-list>
            <item>
                <shape>
                    <gradient android:angle="90" android:endColor="#ff0000"
                        android:startColor="#ff0000" android:type="linear" />
                    <stroke android:width="0.33dp" android:color="#0fb1fa" />
                    <corners android:radius="0dp" />    
                    <padding android:bottom="3dp" android:left="3dp" android:right="3dp" android:top="3dp" />
                </shape>
            </item>
            <item android:right="5dp">
                <bitmap android:gravity="center_vertical|right" android:src="@drawable/arrow_white_down" />
            </item>
        </layer-list>
    </item>
</selector>

<style name="spinner_container">
    <item name="android:layout_width">match_parent</item>
    <item name="android:layout_height">35dp</item>
    <item name="android:orientation">horizontal</item>

    <item name="android:layout_marginTop">6dp</item>
    <item name="android:layout_marginBottom">6dp</item>
    <item name="android:layout_marginLeft">0dp</item>
    <item name="android:layout_marginRight">0dp</item>

    <item name="android:background">@color/red</item>
</style>

<style name="spinner">
    <item name="android:layout_width">match_parent</item>
    <item name="android:layout_height">wrap_content</item>

    <item name="android:layout_margin">0dp</item>

    <item name="android:layout_alignParentLeft">true</item>
    <item name="android:layout_alignParentStart">true</item>

    <item name="android:padding">5dp</item>

    <item name="android:textColor">@color/white</item>
    <item name="android:background">@color/red</item>
    <item name="android:popupBackground">@color/red</item>

    <item name="android:textSize">15sp</item>
</style>

<style name="spinner_image">
    <item name="android:layout_width">wrap_content</item>
    <item name="android:layout_height">match_parent</item>

    <item name="android:layout_margin">5dp</item>
    <item name="android:padding">0dp</item>

    <item name="android:layout_alignParentRight">true</item>
    <item name="android:layout_alignParentEnd">true</item>
    <item name="android:adjustViewBounds">true</item>
    <item name="android:src">@drawable/bc_spinner_arrow</item>
</style>

---

其中，

arrow\u white\u down

是一个微小的白色箭头的png（就像链接中的箭头）

我通过使用带有微调器的相对图和旁边的图像（箭头）解决了这个问题，在

spinnerMode=“dropdown”

中它看起来不是很好，但这是我能做的最好的了

布局

<RelativeLayout
    android:id="@+id/spinner_container"
    style="@style/spinner_container">

    <Spinner
        android:id="@+id/spinner"
        style="@style/spinner"
        android:layout_toLeftOf="@+id/spinner_image"
        android:layout_toStartOf="@+id/spinner_image" />

    <ImageView
        android:id="@+id/spinner_image"
        style="@style/spinner_image" />

</RelativeLayout>

styles.xml

<style name="spinner">
    <item name="android:layout_marginTop">6dp</item>
    <item name="android:layout_marginBottom">6dp</item>
    <item name="android:layout_marginLeft">0dp</item>
    <item name="android:layout_marginRight">0dp</item>
    <item name="android:padding">10dp</item>
    <item name="android:background">@drawable/spinner_bg</item>
    <item name="android:popupBackground">@color/red</item>
    <item name="android:textSize">15sp</item>
</style>

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <layer-list>
            <item>
                <shape>
                    <gradient android:angle="90" android:endColor="#ff0000"
                        android:startColor="#ff0000" android:type="linear" />
                    <stroke android:width="0.33dp" android:color="#0fb1fa" />
                    <corners android:radius="0dp" />    
                    <padding android:bottom="3dp" android:left="3dp" android:right="3dp" android:top="3dp" />
                </shape>
            </item>
            <item android:right="5dp">
                <bitmap android:gravity="center_vertical|right" android:src="@drawable/arrow_white_down" />
            </item>
        </layer-list>
    </item>
</selector>

<style name="spinner_container">
    <item name="android:layout_width">match_parent</item>
    <item name="android:layout_height">35dp</item>
    <item name="android:orientation">horizontal</item>

    <item name="android:layout_marginTop">6dp</item>
    <item name="android:layout_marginBottom">6dp</item>
    <item name="android:layout_marginLeft">0dp</item>
    <item name="android:layout_marginRight">0dp</item>

    <item name="android:background">@color/red</item>
</style>

<style name="spinner">
    <item name="android:layout_width">match_parent</item>
    <item name="android:layout_height">wrap_content</item>

    <item name="android:layout_margin">0dp</item>

    <item name="android:layout_alignParentLeft">true</item>
    <item name="android:layout_alignParentStart">true</item>

    <item name="android:padding">5dp</item>

    <item name="android:textColor">@color/white</item>
    <item name="android:background">@color/red</item>
    <item name="android:popupBackground">@color/red</item>

    <item name="android:textSize">15sp</item>
</style>

<style name="spinner_image">
    <item name="android:layout_width">wrap_content</item>
    <item name="android:layout_height">match_parent</item>

    <item name="android:layout_margin">5dp</item>
    <item name="android:padding">0dp</item>

    <item name="android:layout_alignParentRight">true</item>
    <item name="android:layout_alignParentEnd">true</item>
    <item name="android:adjustViewBounds">true</item>
    <item name="android:src">@drawable/bc_spinner_arrow</item>
</style>

匹配父项
35dp
水平的
6dp
6dp
0dp
0dp
@颜色/红色
匹配父项
包装内容
0dp
真的
真的
5dp
@颜色/白色
@颜色/红色
@颜色/红色
15便士
包装内容
匹配父项
5dp
0dp
真的
真的
真的
@可拉伸/bc\U微调器\U箭头

---

其中，

bc\u spinner\u arrow

是一个白色箭头和垂直线的透明图片（如问题中的一条）

请描述您迄今为止尝试了什么。为什么我的问题被否决？我真的找不到相关的stackoverflow问题，也不知道从哪里开始！我所能做的就是将上面链接中的整个图片设置为背景