如何使用图像制作自定义微调器？

Question

我正在尝试为 spinner 进行自定义设计，但没有成功，我只是通过 edittext 完成的。

我想要这样的东西。

在edittext中我使用drawableleft，有人可以帮助我如何自定义我的微调器吗？

在xml中：

        <EditText
        android:id="@+id/etBusinessKeywor"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/bg_spinner"
        android:cursorVisible="false"
        android:drawableRight="@drawable/ic_keyboard_arrow_down_white_24dp"
        android:hint="SERVICE"
        android:padding="@dimen/_12sdp"
        android:textColorHint="@color/pbr_lightgray"
        android:textSize="@dimen/fontsize_title"
        android:textStyle="bold" />

bg_spinner:

<item>
    <shape>
        <corners android:radius="3dp" />
        <solid android:color="@android:color/white" />
    </shape>
</item>
<item>
    <shape>
        <corners android:radius="3dp" />
        <solid android:color="@color/colorPrimary" />

    </shape>
</item>
<item android:right="50dp">
    <shape>
        <solid android:color="@android:color/white" />
        <corners
            android:bottomLeftRadius="3dp"
            android:topLeftRadius="3dp" />
    </shape>
</item>
<item>
    <shape>

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

Answer 1

试试这个，

    <Spinner
        android:id="@+id/spn"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/selector_spinner"
        android:popupBackground="#fff"
        android:spinnerMode="dropdown"
        />

selector_spinner.xml

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

        <item>
            <shape android:shape="rectangle" >
                <solid android:color="#000000" />

                <corners
                  android:radius="2dp" />
            </shape>
        </item>
        <item
            android:bottom="1dip"
            android:left="1dip"
            android:right="1dip"
            android:top="1dip">
            <shape android:shape="rectangle" >
                <solid android:color="#FFFFFF" >
                </solid>

                <corners
                    android:radius="2dp"  />

                <padding
                    android:right="5dp"
                    android:top="2dp" />
            </shape>
        </item>
        <item>
            <bitmap
                android:gravity="right|center_vertical"
                android:src="@drawable/ic_down_arrow" />
        </item>

    </layer-list>

Answer 2

您可以在 How to customize a Spinner in Android 中找到大量自定义微调器的答案。此外，您不应将 edittext 用作微调器。微调器用于从多种选择中选择一个选项。

Answer 3

试试这个：用RelativeLayout中的图像视图包裹微调器

 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="10dp"
    android:background="@drawable/spinner_border"
    android:orientation="horizontal">

    <Spinner
        android:id="@+id/spinner2"
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:layout_centerVertical="true"
        android:background="@android:color/transparent"
        android:gravity="center"
        android:spinnerMode="dropdown" />

    <FrameLayout
        android:layout_width="50dp"
        android:layout_height="60dp"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:background="@color/colorPrimary"
        android:padding="3dp">

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:src="@drawable/dropdown_bar" />
    </FrameLayout>

</RelativeLayout>

在 res/drawable/spinner_border 中使用：

 <shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@android:color/transparent" />
    <corners android:radius="5dp" />
    <stroke
        android:width="1dp"
        android:color="@color/colorPrimary" />
</shape>