直接上图看效果

image

1.正常的时候的效果

image

2.点击后的效果

设计步骤:

1.准备两张不同的图片:

2.XML布局的设计,直接贴出xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="fill_parent"
    android:layout_height="fill_parent" android:background="#ffffff">

    <ImageButton android:id="@+id/btn_sysbar_custom1"
        android:src="@drawable/sysbar_custom1" android:layout_centerVertical="true"
        android:layout_width="60px" android:layout_height="120px"
        android:layout_gravity="center_vertical" />

</LinearLayout>

3.sysbar_custom1.xmlm内容:

<?xml version="1.0" encoding="utf-8"?>
    <!–
        Copyright (C) 2008 The Android Open Source Project Licensed under the
        Apache License, Version 2.0 (the "License"); you may not use this file
        except in compliance with the License. You may obtain a copy of the
        License at http://www.apache.org/licenses/LICENSE-2.0 Unless required
        by applicable law or agreed to in writing, software distributed under
        the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR
        CONDITIONS OF ANY KIND, either express or implied. See the License for
        the specific language governing permissions and limitations under the
        License.
    –>

<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_pressed="true" android:drawable="@drawable/sysbar_custom1_pressed" />
    <item android:state_selected="true" android:drawable="@drawable/sysbar_custom1_default" />
    <item android:drawable="@drawable/sysbar_custom1_default" />

</selector>

很简单, 备份着以后用…