Question

我正在尝试使用自定义布局（不是微调项目布局），外部布局来实现微调器。我希望它看起来像这样： http://imgur.com/a/U6RzU

我搜索了stackoverflow和谷歌，但无法弄清楚如何提出这个（旁边把整个图片作为背景）

提前多多感谢

修改这就是我试过的：

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>

spinner_bg.xml

<?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>

其中arrow_white_down是一个微小的白色箭头的png（如链接中的那个）

Answer 1

我通过使用带有微调器的RelativeLayout和旁边的图像（箭头）来解决它，它在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_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>

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

自定义微调器UI，带箭头和垂直线

1 个答案: