Android: Drawing a button as a spinner

问题:

I have a custom android view that extends 'Button' and acts as a multi-level spinner - when it is pressed it displays a series of spinner-like dialogs that allow a user to refine their selection. In this case, it allows the user to select the day, then hour, then minute (in 5 min intervals) that they want a pickup to occur. When the dialog is not active, a text description of the current selection is shown on the button.

I want to visually indicate that the user can change the selection by pressing the button, and think that the look of a spinner is exactly what I need for it. I want the look to be the same as other spinners on the device, and be able to easily change the text on the button, but I'm not sure how to achieve that without it being kludgy. How should I go about displaying a button as a spinner-like icon that is consistent with other spinners on the device?

回答1:

This is how I managed to draw a button that is styled like a Spinner:

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="New Button"
    android:id="@+id/button"
    style="?android:attr/spinnerStyle" />

That's it!

Update

Something like the following should also work:

<style name="SpinnerButtonStyle" parent="android:Widget.Holo.Spinner">
    <item name="android:textColor">@color/entry_field</item>
    <item name="android:textAppearance">?android:attr/textAppearanceMedium</item>
</style>

For more styles take a peek into the SDK, e.g. sdk/platforms/android-18/data/res/values/styles.xml

回答2:

I found a solution to my question. In the constructor for my button I set the background drawable resource to be "btn_dropdown".

public DateAndTimePicker(Context context) {
    super(context);
    this.setBackgroundResource(android.R.drawable.btn_dropdown);
}

It looks the same as the spinner buttons, none of the button behavior has changed, and the button text centers correctly.

回答3:

This is my solution of drawing button like a spinner:

<Button
    android:id="@+id/my_button"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:paddingLeft="12dp"
    android:gravity="center_vertical|left"
    android:enabled="true"
    android:text="@string/my_button_text"
    android:textColor="@color/my_button_color"
    style="@style/MyButton" />

This is part of my res/values/styles.xml:

<style name="MyButton" parent="@android:style/Widget.Spinner">
</style>

This is part of my res/values-v14/styles.xml:

<style name="MyButton" parent="@android:style/Widget.DeviceDefault.Light.Spinner">
</style>

回答4:

This XML layout makes a button look like a spinner.

<!-- ****  Button styled to look like a spinner  **** -->
    <Button
        android:id="@+id/btn_category"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@android:drawable/btn_dropdown"
        android:gravity="center_vertical|left" 
        android:textSize="18sp" />

回答5:

You can define the android:background attribute on your button to use a drawable that looks like the spinner. I did this by creating a 9-patch image for the spinner, putting it in my res/drawable folder, and then adding a style for my custom spinner button:

<style name="DialogSpinner">
  <item name="android:background">@drawable/dlg_spinner_background</item>
  <item name="android:textColor">#919090</item>
  <item name="android:layout_height">wrap_content</item>
  <item name="android:layout_width">wrap_content</item>
  <item name="android:layout_marginTop">2px</item>
  <item name="android:layout_marginBottom">2px</item>
</style>

For your button, add the style attribute to the XML layout for your layout:

<Button
  android:id="@+id/okButton"
  style="@style/DialogSpinner"
  android:textColor="#a6a2a2"
  android:text="something"
/>