菜鸟学习之Android Fragment 开发，快速提升用户体验的方法（二）

为了不产生不必要的麻烦，这里所说的纯属个人经验，有对有错，都是自己摸索而来，大家如果发现不对，敬请留言指点，感激不尽。文中引用的图片都是网络素材，如果有侵犯哪位的权利，还请联系。

接着上一篇文章，没看过的同学可以到这里：布局规划之如何借鉴？

那么有了一个基础的布局之后，自然是要填充控件元素了，如何填充控件就不说了，当然是一个个敲上去，讲讲如何写控件的样式吧。

如果有做过Web前端的同学一定在android前端开发的时候超还念css的样式表，因为在android里面比较麻烦，通常都是通过xml文件来编写，以drawable的方式作为元素的background属性填充来显示。做了一段时间的安卓之后会发现不同机子对同一个样式显示效果真是差好多啊，特别是对配色比较鲜艳的，受限与屏幕的关系，显示差距会比较大。所以在编写样式的时候还是选择一些比较温和的颜色，我叫做安全色。

样式可以通过两种方式来做，因为都是background属性，所以是可以放置图片的，一些控件就是以gif图片或者png图片作为背景，类似进度条之类的。但是button等控件就不怎么适合了，因为它有着不同的状态，比如说没有按下和按下的效果是不一样的，除非你愿意在java代码里面去更新背景图片。那么就可以通过xml里面的shape来开发样式，其实基础的应用就可以让你的界面元素看起来好很多，我们写个例子吧，网上很容易找到这些example code：

文件：button_normal.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="false">
        <shape>
            <stroke android:color="#cfcfcf" android:width="1dp"></stroke>
            <gradient android:startColor="#F1F5F6" android:centerColor="#DADFE5" android:endColor="#F1F5F6" android:angle="90"></gradient>
        </shape>
    </item>
    <item android:state_pressed="true">
        <shape>
            <stroke android:color="#80cfcfcf" android:width="1dp"></stroke>
            <gradient android:startColor="#80D2DEE1" android:centerColor="#80BCC5CF" android:endColor="#80D2DEE1" android:angle="90"></gradient>
        </shape>
    </item>
</selector>

样式是这样的：

带有光感效果的一个普通的灰白色按钮样式，相对于2.2版本以前原生的灰好看很多。

shape里面的元素含义：

solid：实心，就是填充的意思
android:color指定填充的颜色

gradient：渐变
android:startColor和android:endColor分别为起始和结束颜色，ndroid:angle是渐变角度，必须为45的整数倍。
另外渐变默认的模式为android:type="linear"，即线性渐变，可以指定渐变为径向渐变，android:type="radial"，径向渐变需要指定半径an droid:gradientRadius="50"。

stroke：描边
android:width="2dp" 描边的宽度，android:color 描边的颜色。
我们还可以把描边弄成虚线的形式，设置方式为：
android:dashWidth="5dp" 
android:dashGap="3dp"
其中android:dashWidth表示'-'这样一个横线的宽度，android:dashGap表示之间隔开的距离。

corners：圆角
android:radius为角的弧度，值越大角越圆。
我们还可以把四个角设定成不同的角度，方法为：
<corners 
         android:topRightRadius="20dp"    右上角
         android:bottomLeftRadius="20dp"    右下角
         android:topLeftRadius="1dp"    左上角
         android:bottomRightRadius="0dp"    左下角
  />
这里有个地方需要注意，bottomLeftRadius是右下角，而不是左下角

padding：间隔
这个就不用多说了，XML布局文件中经常用到。