如何在 Android 中更改 spinner 背景?

我正在开发一个应用程序,其中我需要改变旋转背景布局,以匹配背景颜色。我研究并发现,我需要创建一个9补丁图像。我已经创建了9补丁图片,并在应用程序中使用,但它看起来比正常的自旋器大,而且我不能看到下拉按钮在自旋器以及。

我很高兴,如果你们能提供一个清晰的教程,从开始创建9补丁图像的 Spinner 和使用它的应用程序。

The spinner looks like

旋转器的密码

 <Spinner
android:id="@+id/spnIncredientone"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/txtMixtureTitle"
android:layout_marginLeft="5dip"
android:layout_marginRight="5dip"
android:background="@drawable/spinner_background"
android:prompt="@string/selectmixture" />
253153 次浏览

您可以像下面这样在 xml 中设置 spinners 背景颜色:

android:background="YOUR_HEX_COLOR_CODE"

如果你使用下拉菜单,你可以像这样设置它的背景颜色:

android:popupBackground="YOUR_HEX_COLOR_CODE"

你需要创建一个新的个性化布局为您的旋转项目,像这样,我会命名为:

Spinner _ item. xml:

<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@android:id/text1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="20sp"
android:textColor="#ff0000" />

然后在微调器声明中,需要让微调器使用适配器中的新布局:

ArrayAdapter adapter = ArrayAdapter.createFromResource(this,
R.layout.spinner_item, YOUR_SPINNER_CONTENT);
spinner.setAdapter(adapter);

为了从下拉列表中个性化元素,您需要创建另一个布局,我将它命名为 spinner _ drop _ item. xml:

<CheckedTextView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@android:id/text1"
style="?android:attr/spinnerDropDownItemStyle"
android:singleLine="true"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ellipsize="marquee"
android:textColor="#aa66cc"/>

然后在适配器上:

ArrayAdapter adapter = ArrayAdapter.createFromResource(this,
R.layout.spinner_item, YOUR_SPINNER_CONTENT);
adapter.setDropDownViewResource(R.layout.spinner_dropdown_item);
spinner.setAdapter(adapter);

作为 雅各布指出android:popupBackground是下拉菜单的关键属性(Spinner 的打开状态) ,但是我没有只使用颜色,而是使用了一个像下面这样的9补丁绘图,得到了最好的效果:

enter image description here
menu_dropdown_panel.9.png

请注意,这是非常容易生成这个9-补丁图像的背景颜色的选择,例如使用 这个在线工具作为我 在这个答案中解释

因此,我的 Spinner XML 定义如下:

<Spinner
android:id="@+id/spinner"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@color/navigationBlue"
android:spinnerMode="dropdown"
android:popupBackground="@drawable/menu_dropdown_panel"
/>

结果就是:

(对于自定义字体,如上面的截图,也使用 需要自定义 SpinnerAdapter。)

至少可以在 Android 4.0 + (API 级别14 +)上工作。

你可以像这样改变背景颜色和下拉图标

Step1: 在可绘制文件夹中,为 spinner 的 orders 创建 backound.xml。

<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/darkGray" />
</shape>  //edited

步骤2: 对于旋转器的布局设计,使用这个下拉图标或任何图像 drop.pnjuse this image like as

  <RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginRight="3dp"
android:layout_weight=".28"
android:background="@drawable/spinner_border"
android:orientation="horizontal">


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


<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_gravity="center"
android:src="@mipmap/drop" />


</RelativeLayout>

最后看起来像下面的图片,它是每个地方都可以点击在圆形区域,不需要写单击图片查看列表。

有关详细信息,请参阅 给你

enter image description here

虽然这是一个较老的职位,但因为我遇到了它,而寻找相同的问题,所以我想我会添加我的两分以及。这里是我的版本的 Spinner 的背景下拉箭头。只要完整的背景,不只是箭头。

看起来是这样的。 Screenshot of Spinner using spinner_bg.xml

涂在转盘上,就像..。

<Spinner
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/spinner_bg" />

Spinner _ bg. xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<color android:color="@color/InputBg" />
</item>
<item android:gravity="center_vertical|right" android:right="8dp">
<layer-list>
<item android:width="12dp" android:height="12dp" android:gravity="center" android:bottom="10dp">
<rotate
android:fromDegrees="45"
android:toDegrees="45">
<shape android:shape="rectangle">
<solid android:color="#666666" />
<stroke android:color="#aaaaaa" android:width="1dp"/>
</shape>
</rotate>
</item>
<item android:width="30dp" android:height="10dp" android:bottom="21dp" android:gravity="center">
<shape android:shape="rectangle">
<solid android:color="@color/InputBg"/>
</shape>
</item>
</layer-list>
</item>
</layer-list>

@color/InputBg应该被你想要的背景颜色所取代。

首先它用所需的颜色填充背景。然后一个子层列表创建一个正方形并将其旋转45度,然后第二个带背景色的矩形覆盖了旋转的正方形的顶部,使其看起来像一个向下箭头。(在旋转的矩形中有一个额外的行程,并不真正需要)

编码:

<TextView
android:id="@+id/spinner"
android:gravity="bottom"
android:layout_marginTop="16dp"
android:background="@drawable/spinner_selector"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:clickable="true"
android:paddingLeft="16dp"
android:textSize="16sp"
android:text="TextView" />

Spinner _ selector. xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/spinner_enable" android:state_enabled="true" android:state_pressed="false"  /> <!-- enable -->
<item android:drawable="@drawable/spinner_clicked" android:state_pressed="true"  android:state_enabled="true"  />
<item android:drawable="@drawable/spinner_disable" android:state_enabled="false" /> <!-- disable -->
</selector>

Spinner _ ability. 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="#ddf" />
<padding android:bottom="1dp" />
</shape>
</item>
<item android:bottom="1dp">
<shape android:shape="rectangle" >
<solid android:color="#fff" />


<padding
android:left="0dp"
android:right="0dp" />
</shape>
</item>
<item>
<shape android:shape="rectangle" >
<solid android:color="#fff" />
</shape>
</item>
<item
android:gravity="center_vertical|right"
android:right="8dp">
<layer-list>
<item
android:width="12dp"
android:height="12dp"
android:bottom="10dp"
android:gravity="center">
<rotate
android:fromDegrees="45"
android:toDegrees="45">
<shape android:shape="rectangle">
<solid android:color="#ddf" />
<stroke
android:width="1dp"
android:color="#aaaaaa" />
</shape>
</rotate>
</item>
<item
android:width="30dp"
android:height="10dp"
android:bottom="21dp"
android:gravity="center">
<shape android:shape="rectangle">
<solid android:color="@android:color/white" />
</shape>
</item>
</layer-list>
</item>
</layer-list>

Spinner _ click. 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="#00f" />
<padding android:bottom="1dp" />
</shape>
</item>
<item android:bottom="1dp">
<shape android:shape="rectangle" >
<solid android:color="#fff" />


<padding
android:left="0dp"
android:right="0dp" />
</shape>
</item>
<item>
<shape android:shape="rectangle" >
<solid android:color="#fff" />
</shape>
</item>
<item
android:gravity="center_vertical|right"
android:right="8dp">
<layer-list>
<item
android:width="12dp"
android:height="12dp"
android:bottom="10dp"
android:gravity="center">
<rotate
android:fromDegrees="45"
android:toDegrees="45">
<shape android:shape="rectangle">
<solid android:color="#00f" />
<stroke
android:width="1dp"
android:color="#aaaaaa" />
</shape>
</rotate>
</item>
<item
android:width="30dp"
android:height="10dp"
android:bottom="21dp"
android:gravity="center">
<shape android:shape="rectangle">
<solid android:color="@android:color/white" />
</shape>
</item>
</layer-list>
</item>
</layer-list>

Spinner _ enable. 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="#00f" />
<padding android:bottom="1dp" />
</shape>
</item>
<item android:bottom="1dp">
<shape android:shape="rectangle" >
<solid android:color="#BBDEFB" />


<padding
android:left="0dp"
android:right="0dp" />
</shape>
</item>
<item>
<shape android:shape="rectangle" >
<solid android:color="#BBDEFB" />
</shape>
</item>
<item
android:gravity="center_vertical|right"
android:right="8dp">
<layer-list>
<item
android:width="12dp"
android:height="12dp"
android:bottom="10dp"
android:gravity="center">
<rotate
android:fromDegrees="45"
android:toDegrees="45">
<shape android:shape="rectangle">
<solid android:color="#00f" />
<stroke
android:width="1dp"
android:color="#aaaaaa" />
</shape>
</rotate>
</item>
<item
android:width="30dp"
android:height="10dp"
android:bottom="21dp"
android:gravity="center">
<shape android:shape="rectangle">
<solid android:color="#BBDEFB" />
</shape>
</item>
</layer-list>
</item>
</layer-list>

它没有九补丁图片工作得很好。 api 21 + enter image description here

Spinner _ selector. xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/spinner_enabled" android:state_enabled="true" android:state_pressed="false" /> <!-- enable -->
<item android:drawable="@drawable/spinner_clicked" android:state_enabled="true" android:state_pressed="true" />
<item android:drawable="@drawable/spinner_disabled" android:state_enabled="false" /> <!-- disable -->
</selector>

Spinner _ enable. 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="#00f" />
<padding android:bottom="2dp" />
</shape>
</item>


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


<item>
<rotate
android:fromDegrees="90"
android:pivotX="100%"
android:pivotY="60%"
android:toDegrees="135">
<rotate
android:fromDegrees="135"
android:pivotX="100%"
android:pivotY="60%"
android:toDegrees="45">
<shape android:shape="rectangle">
<stroke
android:width="10dp"
android:color="#00f" />
<solid android:color="#00f" />
</shape>
</rotate>
</rotate>
</item>
</layer-list>

Spinner _ disable. 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="#ddf" />
<padding android:bottom="2dp" />
</shape>
</item>


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


<item>
<rotate
android:fromDegrees="90"
android:pivotX="100%"
android:pivotY="60%"
android:toDegrees="135">
<rotate
android:fromDegrees="135"
android:pivotX="100%"
android:pivotY="60%"
android:toDegrees="45">
<shape android:shape="rectangle">
<stroke
android:width="10dp"
android:color="#ddf" />
<solid android:color="#ddf" />
</shape>
</rotate>
</rotate>
</item>
</layer-list>

Spinner _ focus. 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="#00f" />
<padding android:bottom="2dp" />
</shape>
</item>


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


<item>
<rotate
android:fromDegrees="90"
android:pivotX="100%"
android:pivotY="60%"
android:toDegrees="135">
<rotate
android:fromDegrees="135"
android:pivotX="100%"
android:pivotY="60%"
android:toDegrees="45">
<shape android:shape="rectangle">
<stroke
android:width="10dp"
android:color="#00f" />
<solid android:color="#00f" />
</shape>
</rotate>
</rotate>
</item>
</layer-list>

没有九段图片也能正常工作。 Api 10 + enter image description here

enter image description here

旋转密码

<Spinner
android:id="@+id/spinner"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColor="@color/text.white"
android:paddingBottom="13dp"
android:background="@drawable/bg_spinner"/>

Bg _ 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="@color/colorPrimaryDark"/>
<corners android:radius="10dp" />
</shape>
</item>
<item android:gravity="center_vertical|right" android:right="8dp">
<layer-list>
<item android:width="12dp" android:height="12dp"  android:gravity="center" android:bottom="10dp">
<rotate
android:fromDegrees="45"
android:toDegrees="45">
<shape android:shape="rectangle">
<solid android:color="#ffffff" />
<stroke android:color="#ffffff" android:width="1dp"/>
</shape>
</rotate>
</item>
<item android:width="20dp" android:height="10dp" android:bottom="21dp" android:gravity="center">
<shape android:shape="rectangle">
<solid android:color="@color/colorPrimaryDark"/>
</shape>
</item>
</layer-list>
</item>
</layer-list>

它需要与透明的背景工作在一个旋转。

Spinner _ enable. 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="#00000000" />
<padding android:bottom="2dp" />
</shape>
</item>


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


<item
android:bottom="-2dp"
android:left="-3dp"
android:right="-3dp"
android:top="-3dp">
<shape>
<solid android:color="#00000000" />
<stroke


android:width="2dp"
android:color="#00aedb" />
</shape>
</item>


<item>
<rotate
android:fromDegrees="90"
android:pivotX="100%"
android:pivotY="60%"
android:toDegrees="135">
<rotate
android:fromDegrees="135"
android:pivotX="100%"
android:pivotY="60%"
android:toDegrees="45">
<shape android:shape="rectangle">
<stroke
android:width="10dp"
android:color="#00aedb" />
<solid android:color="#00aedb" />
</shape>
</rotate>
</rotate>
</item>
</layer-list>

Spinner _ ability. 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="#00000000" />
<padding android:bottom="2dp" />
</shape>
</item>


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


<item
android:bottom="-2dp"
android:left="-3dp"
android:right="-3dp"
android:top="-3dp">
<shape>
<solid android:color="#00000000" />
<stroke


android:width="2dp"
android:color="#d9dadc" />
</shape>
</item>


<item>
<rotate
android:fromDegrees="90"
android:pivotX="100%"
android:pivotY="60%"
android:toDegrees="135">
<rotate
android:fromDegrees="135"
android:pivotX="100%"
android:pivotY="60%"
android:toDegrees="45">
<shape android:shape="rectangle">
<stroke
android:width="10dp"
android:color="#d9dadc" />
<solid android:color="#d9dadc" />
</shape>
</rotate>
</rotate>
</item>
</layer-list>

Spinner _ selector. xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/spinner_enable" android:state_enabled="true" android:state_pressed="false"  /> <!-- enable -->
<item android:drawable="@drawable/spinner_disable" android:state_enabled="false" /> <!-- disable -->
</selector>

我尝试了以上的例子,但没有工作为我。最简单的解决方案是工作为我真棒:

<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#fff" >
<Spinner
android:id="@+id/spinner1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:entries="@array/Area"/>
</RelativeLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<Spinner
android:layout_marginTop="8dp"
android:background="@drawable/edit_border"
android:visibility="visible"
android:id="@+id/teach_repeat"
android:entries="@array/on_off"
android:textSize="12sp"
android:textColor="#ffffff"
android:layout_width="match_parent"
android:layout_height="40dp" />
<ImageView
android:layout_marginTop="8dp"
android:layout_gravity="end"
android:src="@drawable/ic_arrow_drop_down_white_18dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</FrameLayout>

Sample Image

当您使用 android:background="@color/your_color"设置旋转器的背景颜色时 默认箭头将消失

还需要添加固定的宽度和高度,以便您可以显示纺纱器的完整内容。

所以我找到了一种方法,就像上面的图片一样。

在框架布局中编写旋转器代码,这里不需要使用单独的图像视图来显示下拉图标。

  <TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Floor"
android:textColor="@color/white"/>


<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="@dimen/margin_short"
android:background="@drawable/custom_spn_background">


<Spinner
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:dropDownSelector="@color/colorAccent"
android:dropDownWidth="@dimen/dp_70"
android:spinnerMode="dropdown"
android:tooltipText="Select floor" />
</FrameLayout>

为 Frame 布局背景或设置创建一个新的 xml android:background="@color/your_color"

Custom_ spn _ backent.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="@dimen/dp_5" />
<solid android:color="@color/white" />

你只要用这个代码

            <LinearLayout


android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:baselineAligned="false">


<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.80">


<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center_vertical|start"
android:paddingBottom="5dp"
android:paddingTop="5dp">


<Spinner
android:layout_width="match_parent"
android:layout_height="match_parent"


android:background="@drawable/spiner_back"
android:visibility="visible" />


<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical|end"
android:src="@drawable/ic_arrow_drop_down_black_24dp" />
</FrameLayout>




</LinearLayout>


<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.20">


<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@color/colorred"
android:fontFamily="@font/raleway_extrabold"
android:text="GO"
android:textColor="@color/colorwhite" />


</LinearLayout>
</LinearLayout>

这是我用的背景。

<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="5dp" />
<solid android:color="@color/colorwhite" />

这是我存档的视图。 enter image description here

Android Studio 有一个预定义的代码,你可以直接使用它。 背景 = “ HEX COLOR CODE”

这已经在其他答案中说过了。我把 Spinner 放在 CardView 中,然后改变了 CardGroundColor。您还可以使用其他一些视图,并设置其背景或绘制或颜色。因此它不会影响 旋转器下拉箭头。如果我们将背景设置为旋转器,旋转器下拉箭头将消失。

 <androidx.cardview.widget.CardView
android:id="@+id/cardView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:cardCornerRadius="6dp"
app:cardBackgroundColor="@color/white">
        

<Spinner
android:id="@+id/spinner"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="10dp"/>


</androidx.cardview.widget.CardView>