Win8风格的按钮、ToggleButton、SeekBar

首先 建立配色文件 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>

最终效果: