Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
364 views
in Technique[技术] by (71.8m points)

layout - Android Set ImageButton as Toggle

How can I have an imagebutton stay in the 'pressed' state when it is clicked? Basically I just want the background to be the depressed background, but I can't figure out how to set it. At the moment, I've just copied the selected button background into my res folder, but when I set it as the background, it becomes blurry (since the original image is bigger than the button itself).

Normal Background: alt text http://img707.imageshack.us/img707/9199/ss20100426163452.png What I'm getting: alt text http://img707.imageshack.us/img707/912/ss20100426163357.png alt text http://img3.imageshack.us/img3/8304/ss20100426163623.png

Also I don't believe I can actually use this method considering the many different UI layouts. The button should stay pressed as per the UI the user is using.

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

There are a few ways of doing this:

First, you can simply use an ImageButton, and manually toggle its image drawable on click in Java. This is what the stock Music player on Android does for the shuffle button, for example. Although you won't have control over the button background in its checked state, you'll be able to swap out the image, which may be favorable from an Android UI-consistency perspective.

Another option is to use a complex set of drawables and nine-patches to get an image inside a ToggleButton, with the option of changing the background and/or the image resource upon toggle. That's the option I'll show below. But remember, be cautious about UI consistency before doing this.


res/layout/foo.xml

...
<ToggleButton
    android:textOn="" android:textOff=""
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/shuffle_button" />
...

res/drawable/shuffle_button.xml

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- use "@android:drawable/btn_default" to keep consistent with system -->
    <item android:drawable="@drawable/toggle_button_background" />
    <item android:drawable="@drawable/shuffle_button_image" />
</layer-list> 

res/drawable/toggle_button_background.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- checked state -->
    <item android:state_pressed="false" android:state_checked="true"
          android:drawable="@drawable/btn_default_checked" />

    <item android:state_window_focused="false" android:state_enabled="true"
          android:drawable="@drawable/btn_default_normal" />
    <item android:state_window_focused="false" android:state_enabled="false"
          android:drawable="@drawable/btn_default_normal_disable" />
    <item android:state_pressed="true"
          android:drawable="@drawable/btn_default_pressed" />
    <item android:state_focused="true" android:state_enabled="true"
          android:drawable="@drawable/btn_default_selected" />
    <item android:state_enabled="true"
          android:drawable="@drawable/btn_default_normal" />
    <item android:state_focused="true"
          android:drawable="@drawable/btn_default_normal_disable_focused" />
    <item android:drawable="@drawable/btn_default_normal_disable" />
</selector>

res/drawable/shuffle_button_image.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/ic_mp_shuffle_on_btn" android:state_checked="true" />
    <item android:drawable="@drawable/ic_mp_shuffle_off_btn" />
</selector>

Image files

WARNING: if you use these, your app will look inconsistent on devices with customized OS UIs (i.e. HTC's Sense UI).

  • ic_mp_shuffle_<state>_btn.9.png need to be nine-patches, so that the image gets centered and not stretched to fit the button. Below are example hdpi versions of the icon:

res/drawable-(h|m|ldpi)/ic_mp_shuffle_(on|off)_btn.9.png


Final Note: Remember to be consistent with the system UI when possible, and be mindful of the fact that your app may run on devices with customized versions of the OS that have different graphics for UI elements like buttons. An example of this is HTC Sense, which has green buttons in place of the grey/orange/yellow ones in stock Android. So, if you end up copying the btn_default_... PNG files from the open source repository to create a toggle-able button background, you'll break consistency on those devices.


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...