首先 建立配色文件 res/values/win8_color.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="Magenta">#FF0097</color>
<color name="Purple">#6e155f</color>
<color name="Teal">#4eb3b9</color>
<color name="Lime">#96b232</color>
<color name="Brown">#a05000</color>
<color name="Pink">#e671b8</color>
<color name="Orange">#de9317</color>
<color name="Blue">#1ba1e2</color>
<color name="Red">#e51400</color>
<color name="Green">#339933</color>
<color name="Marine">#034888</color>
<color name="Light_Purple">#5859b9</color>
<color name="Coral">#d54d34</color>
<color name="Dark_Purple">#260930</color>
<color name="White">#ffffff</color>
<color name="Gray">#666666</color>
<color name="Black">#000000</color>
<color name="Magenta_alt">#FF20b7</color>
<color name="Purple_alt">#8e357f</color>
<color name="Teal_alt">#6ed3d9</color>
<color name="Lime_alt">#b6d252</color>
<color name="Brown_alt">#c07020</color>
<color name="Pink_alt">#ff91d8</color>
<color name="Orange_alt">#feb337</color>
<color name="Blue_alt">#3bc1ff</color>
<color name="Red_alt">#ff3420</color>
<color name="Green_alt">#53b953</color>
<color name="Marine_alt">#2368a8</color>
<color name="Light_Purple_alt">#7879d9</color>
<color name="Coral_alt">#f56d54</color>
<color name="Dark_Purple_alt">#462950</color>
</resources>
各种颜色的参照在这里
本文只使用了上述配色的Win8 Colors 图中 Win8 Colors 第二行的Teal d54d34命名不对 在上述配色文件中更名为Coral 图中 Win8 Colors 第二行的Purple命名重复 更名为Light Purple disaled被重命名为 Gray 另外添加了字体的颜色用到的白色fff 和黑色000 为了能够有按键响应 除了黑白灰 每个颜色建立了RGB值各加0x20处理 (溢出置为最大)的alt值
Button
采用的是定义一个Style,定义多个Drawable来实现相同布局不同颜色的按钮 建立res/values/win8_style.xml
<?xml version="1.0" encoding="utf-8"?>
<resources xmlns:android="http://schemas.android.com/apk/res/android">
<style name="win8_button_large">
<item name="android:textSize">42sp</item>
<item name="android:textColor">@color/White</item>
<item name="android:padding">5dp</item>
</style>
<style name="win8_button_middle">
<item name="android:textSize">28sp</item>
<item name="android:textColor">@color/White</item>
<item name="android:padding">5dp</item>
</style>
</resources>
在此定义了两个style win8_button_large 和 win8_button_middle 字体分别为42sp和28sp 字体颜色为白色 有5dip的padding
建立res/drawable/button_win8_blue.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:state_pressed="true">
<shape>
<solid android:color="@color/Blue_alt" />
<stroke android:color="@color/Gray"
android:width="2dp"/>
</shape>
</item>
<item android:state_focused="true">
<shape>
<solid android:color="@color/Blue_alt" />
</shape>
</item>
<item>
<shape>
<solid android:color="@color/Blue" />
</shape>
</item>
</selector>
默认状态下是蓝色 获取焦点是蓝色浅一点 按下是蓝色浅一点加2DIP宽的灰色边框 其他颜色的按钮只需要将Blue 和Blue_alt分别改为相应颜色
在布局文件中将Button的style设为上述任一种style background设为上述任一drawable 即可 margin设为5dip 可以保证按钮间隔10dip 其他的手动调整吧
<Button
android:id="@+id/config_playlist"
style="@style/win8_button_middle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:layout_marginRight="10dp"
android:layout_weight="1"
android:background="@drawable/button_win8_coral"
android:text="@string/config_bgm_custom" />
SeekBar
在win8_style.xml中添加win8_seekBar
<style name="win8_seekBar" parent="@android:style/Widget.SeekBar">
<item name="android:minHeight">20dp</item>
<item name="android:progressDrawable">@drawable/progress_win8</item>
<item name="android:thumb">@drawable/progress_thumb_win8</item>
<item name="android:thumbOffset">0dp</item>
</style>
最小高度20dip 进程的图片是 drawable/progress_win8.xml 滑块的图片是 drawable/progress_thumb_win8.xml 或者完全可以使用一个按钮的Drawable文件 滑块在两段不会被隐藏(thumbOffset=0dip)
那么去建立这两个不存在的图片文件吧
新建文件res/drawable/progress_win8.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="@android:id/background">
<shape>
<solid android:color="@color/Marine" />
</shape>
</item>
<item android:id="@android:id/progress">
<clip>
<shape>
<solid android:color="@color/Blue"/>
</shape>
</clip>
</item>
<item android:id="@android:id/secondaryProgress">
<clip>
<shape>
<solid android:color="@color/Green"/>
</shape>
</clip>
</item>
</layer-list>
背景是海蓝色 首要进度条为蓝色 次要进度条为绿色 形状是长方形(因为shape默认值是长方形) 这个文件也可以使用在ProgressBar上
新建文件res/drawable/progress_thumb_win8.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:state_pressed="true">
<shape >
<size android:width="12dp"
android:height="25dp"/>
<solid android:color="@color/Green"/>
</shape>
</item>
<item android:state_focused="true">
<shape >
<size android:width="12dp"
android:height="25dp"/>
<solid android:color="@color/Gray"/>
</shape>
</item>
<item>
<shape >
<size android:width="12dp"
android:height="25dp"/>
<solid android:color="@color/White"/>
</shape>
</item>
</selector>
实际上和按钮文件差不多 按下状态是绿色 焦点灰色 正常白色 高25dip 宽12dip 形状是长方形
使用的时候直接将style设置为win8_seekBar 就行了
ToggleButton
样式
<style name="win8_toggleButton">
<item name="android:minHeight">20dp</item>
<item name="android:minWidth">60dp</item>
<item name="android:background">@drawable/toggle_win8</item>
<item name="android:textColor">@color/White</item>
</style>
背景图片
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:state_checked="false">
<layer-list>
<item android:top="3dp" android:bottom="3dp">
<shape>
<stroke
android:width="2dp"
android:color="@color/White" />
<size android:width="50dp"
android:height="15dp"/>
</shape>
</item>
<item android:left="2dp" android:right="44dp">
<shape>
<size android:width="4dp"/>
<solid android:color="@color/White"/>
</shape>
</item>
</layer-list>
</item>
<item android:state_checked="true">
<layer-list >
<item android:top="3dp" android:bottom="3dp">
<shape>
<stroke
android:width="2dp"
android:color="@color/White" />
<size android:width="50dp"
android:height="15dp"/>
<solid android:color="@color/Green"/>
</shape>
</item>
<item android:left="44dp" android:right="2dp">
<shape>
<solid android:color="@color/White"/>
</shape>
</item>
</layer-list>
</item>
</selector>
最终效果
评论!