Android开发学习（9）--BeatBox(3)

---

前言

BeatBox应用的主题非常漂亮，下面该是优化按钮表现的时候了。 当前，按钮就是个蓝方框，点击它也看不到任何反应。本章，我们将学习使用XML drawable， 继续美化BeatBox应用.

一、试验步骤

1 统一按钮样式

a 隔开按钮（res/layout/list_item_sound.xml）

<layout 
xmlns:android="http://schemas.android.com/apk/res/android"   
xmlns:tools="http://schemas.android.com/tools"> 
    <data>   
    <variable   
    name="viewModel"    
    type="com.bignerdranch.android.beatbox.SoundViewModel"/>     
    </data>     
    <FrameLayout   
    android:layout_width="match_parent"    
    android:layout_height="wrap_content"    
    android:layout_margin="8dp">   
    <Button   
    android:layout_width="100dp"    
    android:layout_height="100dp"    
    android:layout_gravity="center"   
    android:onClick="@{() -> viewModel.onButtonClicked()}"   
    android:text="@{viewModel.title}"    
    tools:text="Sound name"/>     
    </FrameLayout> 
    </layout> 

2 shape drawable

a 创建圆形drawable（res/drawable/button_beat_box_normal.xml）

<shape xmlns:android="http://schemas.android.com/apk/res/android"     
android:shape="oval"> 
    <solid   
    android:color="@color/dark_blue"/> 
</shape>

b 修改按钮背景（res/values/styles.xml）

<resources>  
    <style name="AppTheme" parent="Theme.AppCompat">       
    ...     
    </style> 
    <style name="BeatBoxButton" parent=" Widget.AppCompat.Button">       
    <item name="android:background">@drawable/button_beat_box_normal</item>     
    </style> 
</resources>

3 state list drawable

在res/drawable目录下再创建一个名为button_beat_box_pressed.xml的文件.除了背景颜色是红色外，这个shape drawable和前面的正常版本是一样的。

a 定义按钮按下时的shape drawable（res/drawable/button_beat_box_pressed.xml）

<shape xmlns:android="http://schemas.android.com/apk/res/android"    
 android:shape="oval"> 
    <solid   
    android:color="@color/red"/> 
    </shape> 

b 创建一个state list drawable（res/drawable/button_beat_box.xml）

<selector xmlns:android="http://schemas.android.com/apk/res/android">     
<item android:drawable="@drawable/button_beat_box_pressed"  
 android:state_pressed="true"/>     
 <item android:drawable="@drawable/button_beat_box_normal" /> 
 </selector>

c 使用state list drawable（res/values/styles.xml）

<resources> 
    <style name="AppTheme" parent="Theme.AppCompat">       
    ...     
    </style> 
    <style name="BeatBoxButton" parent="android:style/Widget.Holo.Button">   
    <item name="android:background">@drawable/button_beat_box</item>     
    </style> 
</resources> 

4 layer list drawable

BeatBox应用看起来挺不错了。按钮圆圆的，按下时还有视觉反馈。不过，还要精益求精。 layer list drawable能让两个XML drawable合二为一。借助这个工具，可以为按下状态的按钮 添加一个深色的圆环.

a 使用layer list drawable（res/drawable/button_beat_box_pressed.xml）

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">     
<item>   
<shape xmlns:android="http://schemas.android.com/apk/res/android"   
android:shape="oval"> 
    <solid  
    android:color="@color/red"/>   
    </shape>     
    </item>     
    <item>   
    <shape 
  android:shape="oval"> 
    <stroke  
    android:width="4dp"  
    android:color="@color/dark_red"/>   
    </shape>     
    </item> 
    </layer-list> 

二、模拟器运行结果

三、真机运行结果