背景色に合わせてスピナーの背景レイアウトを変更する必要があるアプリを開発しています。調査して、9パッチイメージを作成する必要があることがわかりました。 9パッチイメージを作成し、アプリで使用しましたが、通常のスピナーよりも大きく見え、スピナーにもドロップダウンボタンが表示されませんでした。
Spinner用の9つのパッチイメージの作成を開始してからアプリで使用するまでの明確なチュートリアルを提供していただければ幸いです。
スピナーのコード
<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" />
次のように、XMLでスピナーの背景色を設定できます。
Android:background="YOUR_HEX_COLOR_CODE"
スピナーでドロップダウンメニューを使用する場合は、背景色を次のように設定できます。
Android:popupBackground="YOUR_HEX_COLOR_CODE"
このようにして背景色を変更し、アイコンをドロップダウンできます
ステップ1:ドロアブルフォルダーで、スピナーの境界線のbackground.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
Step2:スピナーのレイアウト設計には、このドロップダウンアイコンまたは任意の画像drop.pnj
<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>
最後に、以下の画像のように見え、丸い領域でクリック可能なすべての場所であり、imageViewのクリックリスタを記述する必要はありません。
詳細については、 Here を参照してください。
それは古い記事ですが、同じ問題を探している間に出くわしたので、私も2セントを追加するつもりでした。これは、ドロップダウン矢印付きのSpinnerの背景の私のバージョンです。矢印だけでなく、完全な背景のみ。
次のようなスピナーに適用...
<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度回転します。次に、背景色の2番目の四角形が回転した四角形の上部を覆い、下矢印のように見えます。 (回転した長方形には余分なストロークがあり、実際には必要ありません)
スピナーコード
<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_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_dropdown_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);
Jakobが指摘した 、Android:popupBackground
はドロップダウン(スピナーの開いた状態)のキー属性ですが、色だけを使用する代わりに、9パッチで最良の結果が得られました。このようなドローアブル:
menu_dropdown_panel.9.png
たとえば、 このオンラインツール as I この回答で説明 !
したがって、私の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+)で動作します。
スピナーコード:
<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_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="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_clicked.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>
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>
フレームレイアウトの背景用に新しいxmlを作成するか、
Android:background="@color/your_color"
を設定します
custom_spn_background.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" />
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_enabled.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_disabled.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_focused.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>
上記のサンプルを試しましたが、うまくいきませんでした。最も簡単な解決策は私にとって素晴らしいです:
<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>
このコードを使用するだけです
<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" />
<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>
スピナーで透明な背景を操作する必要があります。
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_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="#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>
Android Studioには定義済みのコードがあり、直接使用できます。 Android:popupBackground= "HEX COLOR CODE"