锐客网

  1. 首页 > 睿知 > it技术 > >

Android 扁平化button

androidIT知识扁平化

愿君学长松，慎勿作桃李。这篇文章主要讲述Android 扁平化button相关的知识，希望能为你提供帮助。
View
创建  colors.xml  文件定义两个颜色
1.  < resources>
2.          < color  name="blue_pressed"> @android:color/holo_blue_dark< /color>
3.          < color  name="blue_normal"> @android:color/holo_blue_light< /color>
4.  < /resources>
我们这里使用android的  HOLO  色调:
1.  < !--  A  dark  Holo  shade  of  blue  -->
2.  < color  name="holo_blue_dark"> #ff0099cc< /color>
3.  < !--  A  light  Holo  shade  of  blue  -->
4.  < color  name="holo_blue_light"> #ff33b5e5< /color>
创建  dimen.xml  文件，定义圆角值和阴影高度。见下图
1.  < resources>
2.          < dimen  name="corner_radius"> 4dp< /dimen>
3.          < dimen  name="layer_padding"> 3dp< < dimen>
4.  < /resources>

 

Android 扁平化button

文章图片


 
我们用shape来定义button背景  创建rect_pressed.xml  的  drawable  文件
1.  < shape  xmlns:android="http://schemas.android.com/apk/res/android"
2.          android:shape="rectangle">
3.      < corners  android:radius="@dimen/corner_radius"  />
4.      < solid  android:color="@color/blue_pressed"  />
5.  < /shape>

 
创建rect_normal.xml  file  的drawable  文件。
1.  < layer-list  xmlns:android="http://schemas.android.com/apk/res/android">
【Android 扁平化button】2.      < item  android:drawable="@drawable/rect_pressed"  />
3.   
4.      < item  android:bottom="@dimen/layer_padding">
5.              < shape  android:shape="rectangle">
6.                      < corners  android:radius="@dimen/corner_radius"  />
7.                      < solid  android:color="@color/blue_normal"  />
8.              < /shape>
9.      < /item>
10.  < /layer-list>

 
为button定义  selector  .  创建flat_selector.xml  文件。
1.  < selector  xmlns:android="http://schemas.android.com/apk/res/android">
2.      < item  android:state_pressed="true"  android:drawable="@drawable/rect_pressed"/>
3.      < item  android:drawable="@drawable/rect_normal"/>
4.  < /selector>
定义  button  设置  background  为  flat_selector.
1.  < Button
2.              android:layout_width="fill_parent"
3.              android:layout_height="wrap_content"
4.              android:background="@drawable/flat_selector"
5.              android:textColor="@android:color/white"
6.              android:text="Say  Hello"  />

    推荐阅读


    上一篇：Eclipse Android 代码自己主动提示功能

    下一篇：Android之怎样全屏显示