Android中的GridLayout布局及Shap，Selector文件的使用

关于GridLayout，它是一个网格布局，Android五大布局有一个TableLayout（表格布局），显然Android中许多布局和控件存在复杂的继承关系，我认为没必要区分它们的区别和来源，只要能到达自己所要完成的界面效果，用什么都是一样的，当然区分清楚也是为了方便使用和记忆。那么继表格布局之后网格布局有什么优势呢，首先，表格布局是不能跨行的，而且跨列仅局限于在当前列有空余空间的情况下，其次，因为它每一行都是写固定了的，不会受到兄弟控件的影响移到下一行。网格布局相对灵活，跨行跨列均可，对于按钮类的布局很适合，比如计算器那样的，其中加号一般就是跨两列的。这里我结合shap和selector文件写一个计算器的布局。

网格布局是令布局内控件按照等高等宽并按M*N的格式排布的布局方式，加入网格布局的控件是按先后进入从左至右从上至下依次排列的，布局大小决定了内部控件大小，也就是说内部控件自行设置的大小是不生效的，布局大小改变内部控件大小跟着变化，位置不变。主要属性如下

columnCount 值为数字，表示列数

rowCount 值为数字，表示行数

行数和列数的值都可以为0，但是不能同时为0，那样网格布局就不存在了。如果行数为零，行数可以无限多，如果列数为0，列数可以无限多。

android:layout_row :  固定显示在第几行
android:layout_column :  固定显示在第几列，前面几列没控件的话就空着
android:layout_rowSpan : 跨几行
android:layout_columnSpan:  跨几列 

shap，即是形状，通过该文件可以为控件定制形状，通过描边、背景、边角等的控制来帮助控件拜托Android原生样式，当然我不是在批评原生风格不好看，至少不能使用任何场合，shap文件的存在是很必要的。有了shap还不够，如果作为一个点击控件，点击之后没有相应的形状变化，用户无法确定点击是否生效，selector文件就可以为点击控件设置不同情况的shap，也可以看出selector和shap是组合使用的，在控件属性中引用的是selector。shap文件和selector文件写在drawable文件夹中，可以通过R文件引用。

shap文件中可以为控件设置以下属性

1)stroke 
   描述: stroke:边框效果
   属性：android:width 描边的宽度 
         android:color 描边的颜色  
         android:dashWidth 表示边框的样式是虚线的宽度(值为0时表示为实线)
         android:dashGap 虚线之间的间隔
2)padding 
   描述：内边距 
   属性：android:left  左内边距 
         android:top   上内边距 
         android:right  右内边距 
         android:bottom 下内边距 
3)corners 
  描述: corners: 圆角 
  属性：android:radius  半径 
        android:topLeftRadius  左上角半径 
        android:topRightRadius  右上角半径 
        android:bottomLeftRadius 右下角半径 
        android:bottomRightRadius 左下角半径
上下左右四个属性设置不同数字会有警告
4)solid  
    描述：内部填充 
    属性  android:color 填充颜色 
5)gradient 
    描述： 渐变色 
    属性： android:startColor  起始颜色 
           android:endColor    结束颜色 
           android:angle渐变角度(PS：当angle=0时，渐变色是从左向右，当angle=90时为从下往上。angle必须为45的整数倍) 
           android:type渐变类型(取值：linear(默认)线性渐变、radial放射性渐变，以开始色为中心、sweep扫描线式的渐变) 
           android:centerColor  渐变中间颜色，即开始颜色与结束颜色之间的颜色 
           android:useLevel 如果要使用LevelListDrawable对象，就要设置为true。设置为true无渐变，false有渐变色 
           android:gradientRadius  渐变色半径.当属性type="radial" 时才能使用 
           android:centerX   渐变中心X点坐标的相对位置 
           android:centerY   渐变中心Y点坐标的相对位置
6)size  
    描述：size: 大小 
    属性： android:width   表示形状的宽度 
           android:height 表示形状的高度

selector文件的属性如下

android:state_selected是否选中
android:state_focused是否获得焦点
android:state_pressed是否点击
android:state_enabled设置是否响应事件,指所有事件

以上属性值均为true或false，这些属性作为先决条件，通过drawable属性设置颜色或shap达到为不同状态设置的样式的效果。

以下为shap文件和selector文件以及布局文件，通过为三种按钮设置非点击状态背景，设置点击背景为白色达到效果。

数字按钮未被点击时的shpe：button_shap.xml

<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android" >    <stroke        android:width="1dp"        android:color="#000000" />    <solid android:color="#ff00ff" /></shape>

数字按钮被点击时的shpe：button_shap2.xml

<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android" >    <stroke        android:width="1dp"        android:color="#000000" />    <solid android:color="#ffffff" /></shape>

数字按钮的selector：button_selector.xml

<?xml version="1.0" encoding="utf-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android">    <item         android:state_pressed="false"        android:drawable="@drawable/button_shap"></item>    <item         android:state_pressed="true"        android:drawable="@drawable/button_shap2" ></item></selector>

控制按钮未被点击时的shpe：a_button_shap.xml

<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android" >    <stroke        android:width="1dp"        android:color="#000000" />    <solid         android:color="#ff0000"/></shape>

控制按钮被点击时的shpe：a_button_shap2.xml

<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android" >    <stroke        android:width="1dp"        android:color="#000000"/>    <solid         android:color="#ffffff"/></shape>

控制按钮的selector：a_button_selector.xml

<?xml version="1.0" encoding="utf-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android" >    <item        android:state_pressed="false"         android:drawable="@drawable/a_button_shap"></item>    <item android:state_pressed="true"        android:drawable="@drawable/a_button_shap2"></item></selector>

背景shap：b_shap.xml

<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android" >    <stroke android:width="3dp"        android:color="#00ff00"        android:dashWidth="5dp"        android:dashGap="5dp"/>    <solid android:color="#007fff"/><corners android:radius="10dp"/><padding     android:left="20dp"    android:right="20dp"    android:bottom="20dp"    android:top="40dp"/>    </shape>

算术按钮未被点击时的shap：c_button_shap.xml

<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android" >    <stroke        android:width="1dp"        android:color="#000000" />        <solid         android:color="#ff7f00"/></shape>

算术按钮未被点击时的shap：c_button_shap2.xml

<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android" >    <stroke        android:width="1dp"        android:color="#000000" />        <solid         android:color="#ffffff"/></shape>

算术按钮的selector：c_button_selecor.xml

<?xml version="1.0" encoding="utf-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android" >    <item         android:state_pressed="false"        android:drawable="@drawable/c_button_shap"></item><item android:state_pressed="true"    android:drawable="@drawable/c_button_shap2"></item></selector>

文本框的shap：textview_shapxml

<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android" >    <stroke         android:width="1dp"        android:color="#000000"/>    <solid android:color="#ffffff"/>    <padding android:left="3dp"        android:right="3dp"/></shape>

布局XML文件

<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="wrap_content"    android:layout_height="wrap_content"    android:layout_gravity="center"    android:background="@drawable/b_shape"    android:columnCount="4"    android:rowCount="6" >    <TextView        android:id="@+id/et_result"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_columnSpan="3"        android:layout_gravity="fill_horizontal"        android:background="@drawable/textview_shap"        android:text="0"        android:textSize="35dp" />    <Button        android:id="@+id/bt_C"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:background="@drawable/a_button_selector"        android:text="C" />    <Button        android:id="@+id/bt_1"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:background="@drawable/button_selector"        android:text="1" />    <Button        android:id="@+id/bt_2"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:background="@drawable/button_selector"        android:text="2" />    <Button        android:id="@+id/bt_3"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:background="@drawable/button_selector"        android:text="3" />    <Button        android:id="@+id/bt_c"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:background="@drawable/c_button_selector"        android:text="/" />    <Button        android:id="@+id/bt_4"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:background="@drawable/button_selector"        android:text="4" />    <Button        android:id="@+id/bt_5"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:background="@drawable/button_selector"        android:text="5" />    <Button        android:id="@+id/bt_6"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:background="@drawable/button_selector"        android:text="6" />    <Button        android:id="@+id/bt_cc"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:background="@drawable/c_button_selector"        android:text="x" />    <Button        android:id="@+id/bt_7"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:background="@drawable/button_selector"        android:text="7" />    <Button        android:id="@+id/bt_8"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:background="@drawable/button_selector"        android:text="8" />    <Button        android:id="@+id/bt_9"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:background="@drawable/button_selector"        android:text="9" />    <Button        android:id="@+id/bt_a"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_gravity="fill_vertical"        android:layout_rowSpan="2"        android:background="@drawable/c_button_selector"        android:text="+" />    <Button        android:id="@+id/bt_0"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:background="@drawable/button_selector"        android:text="0" />    <Button        android:id="@+id/bt_dian"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:background="@drawable/button_selector"        android:text="." />    <Button        android:id="@+id/bt_j"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:background="@drawable/c_button_selector"        android:text="-" />    <Button        android:id="@+id/bt_d"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_columnSpan="4"        android:layout_gravity="fill_horizontal"        android:background="@drawable/a_button_selector"        android:text="=" /></GridLayout>

效果图如下