Android button 效果设计

Button 有按下效果

 

[功能]

让Button 有按下效果 更有视觉效果 

 

[代码]

1. 先准备2张*.png 一张供默认使用 另一张供按下使用 本例为：

 

Java代码 


play.png    
play_down.png  

play.pngplay_down.png

 

 

2.  根据各种状态 定制化所显示的 *.png 命名为： myselection.xml

Java代码 


<?xml version="1.0" encoding="utf-8"?>    
<selector xmlns:android="http://schemas.android.com/apk/res/android">    
    <item     
        android:state_pressed="false"     
        android:drawable="@drawable/play" />    
    <item     
        android:state_pressed="true"     
        android:drawable="@drawable/play_down" />    
    <item     
        android:drawable="@drawable/play" />    
</selector>   

<?xml version="1.0" encoding="utf-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_pressed="false" android:drawable="@drawable/play" /> <item android:state_pressed="true" android:drawable="@drawable/play_down" /> <item android:drawable="@drawable/play" /></selector> 

 

 

3. 在 main.xml 布局中 添加Button 元件 并 设置 使用 myselection.xml

Java代码 


<?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"   
    >    
<TextView      
    android:layout_width="fill_parent"     
    android:layout_height="wrap_content"     
    android:text="Button Style!"   
    />    
<ImageButton     
            android:id="@+id/playorpause"     
            android:layout_width="wrap_content"   
            android:layout_height="wrap_content"     
            android:src="@xml/myselection"     
            android:background="#00000000" />    
</LinearLayout>  

<?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" ><TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="Button Style!" /><ImageButton android:id="@+id/playorpause" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@xml/myselection" android:background="#00000000" /></LinearLayout>

 

 

 

4. 大家可以自己看看效果 因为不好截图

 

 

其实 除了上面的方法 还有一个方法 为：

1. 在 maun.xml 中添加 ImageButton 且不设置使用的*.png

Java代码 


<?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"   
    >    
<ImageButton    
    android:id="@+id/button"      
    android:layout_width="wrap_content"     
    android:layout_height="wrap_content"     
    />    
</LinearLayout>  

<?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" ><ImageButton android:id="@+id/button" android:layout_width="wrap_content" android:layout_height="wrap_content" /></LinearLayout>

 

 

2. 在该ImageButton上设置监听器 并根据其状态使用对应的资源 但是必须要设置默认资源

Java代码 


ImageButton btn = (ImageButton) findViewById(R.id.button);    
            
        //to set its default *.png    
        btn.setBackgroundResource(R.drawable.play);    
        btn.setOnTouchListener(new ImageButton.OnTouchListener(){    
            @Override   
            public boolean onTouch(View arg0, MotionEvent arg1) {    
                // TODO Auto-generated method stub    
                if(arg1.getAction() == MotionEvent.ACTION_DOWN){    
                    arg0.setBackgroundResource(R.drawable.play_down);    
                }    
                else if(arg1.getAction() == MotionEvent.ACTION_UP){    
                    arg0.setBackgroundResource(R.drawable.play);    
                }    
                    
                return false;    
            }    
                
        });  

ImageButton btn = (ImageButton) findViewById(R.id.button); //to set its default *.png btn.setBackgroundResource(R.drawable.play); btn.setOnTouchListener(new ImageButton.OnTouchListener(){ @Override public boolean onTouch(View arg0, MotionEvent arg1) { // TODO Auto-generated method stub if(arg1.getAction() == MotionEvent.ACTION_DOWN){ arg0.setBackgroundResource(R.drawable.play_down); } else if(arg1.getAction() == MotionEvent.ACTION_UP){ arg0.setBackgroundResource(R.drawable.play); } return false; } });

 

 

 

具体哪个方法更好 应该根据自己的场合：

1. 只有一个Button 推荐使用第一个方法

2. 有几个Button 推荐使用第二个 统一定义 然后根据指定的id 来使用目标*.png