具有圆角，描边和选择器图标的自定义微调器 [英] Custom Spinner with rounded corners, stroked edge and a selector icon

问题描述

我希望我的Spinner具有黑色渐变背景，左侧带有白色文本，右侧带有选择器图标(白色向下的三角形).在我看来，有两种解决方法:

I want my Spinner to have a black gradient background with white text on the left and a selector icon on the right (a white downwards pointing triangle). As I see it there are two ways of going about this:

1. 如果将背景设置为xml可绘制资源，则可以使Spinner看起来很完美，但是我需要以某种方式在右侧添加白色三角形，但我不知道该怎么做:

1. If I set the background to an xml drawable resource I can make my Spinner look perfect, but then I need to somehow add the white triangle on the right, which I don't know how to go about:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
    <shape>
        <gradient
            android:startColor="#343434"
            android:endColor="#171717"
            android:angle="270" />
        <stroke
            android:width="1dp"
            android:color="#ffffff" />
        <corners
            android:radius="4dp" />
        <padding
            android:left="3dp"
            android:top="3dp"
            android:right="3dp"
            android:bottom="3dp" />
    </shape>
</item>
</selector>

我创建了一个包含三角形的9补丁图像，然后使用xml圆角化并向图像添加笔触.我已经尝试过了，但是无法使它起作用:

I create a 9-patch image which includes the triangle and then use xml to round the corners and add a stroke to the image. I have had a go at this but was unable to make it work:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/spinnerblack" >
        <stroke
            android:width="1dp"
            android:color="#ffffff" />
        <corners
            android:radius="3dp" />
        <padding
            android:left="3dp"
            android:top="3dp"
            android:right="3dp"
            android:bottom="3dp" />
    </item>
</selector>

有人可以告诉我我可以为方法1做些什么还是我在方法2中做错了什么?我不想在我的9补丁图像中添加笔触和圆角，因为我认为它看起来并不那么好.另外，我更喜欢方法1而不是方法2.非常感谢您的帮助.

Could someone either tell me what I can do for method 1 or what I have done wrong in method 2? I would prefer not to have to add the stroke and rounded corners in my 9-patch image because I don't think it ever looks as good. Also, I would prefer method 1 to method 2. Any help much appreciated.

推荐答案

我在我的应用中完成了与方法1类似的操作.基本上，您需要将选择器与图层列表结合起来:

I've done something similar to method 1 in my app. Basically you need to combine your selector with a layer-list:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <layer-list>
            <item>
                <shape>
                    <gradient
                        android:startColor="#343434"
                        android:endColor="#171717"
                        android:angle="270" />
                    <stroke
                        android:width="1dp"
                        android:color="#ffffff" />
                    <corners
                        android:radius="4dp" />
                    <padding
                        android:left="3dp"
                        android:top="3dp"
                        android:right="3dp"
                        android:bottom="3dp" />
                </shape>
            </item>
            <item
                android:top="12dp"
                android:right="15dp">
                <bitmap android:src="@drawable/arrow_bitmap"
                        android:gravity="top|right" />
            </item>
        </layer-list>
    </item>
</selector>

在我的xml中，我还添加了一个第三层，其中包含一个不可见的<shape>(即，其alpha设置为0)，但是添加了填充.

In my xml I also added a third layer containing a <shape> that is invisible (i.e. its alpha is set to 0) but adds padding.

这篇关于具有圆角，描边和选择器图标的自定义微调器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！