上次做了一个小键盘，请见：PopupWindow 使用。

效果是这样的：

可以看到，上面的按键是不一样大小的。因为是用LinearLayout布局，用的Button样式也是默认的。数字键和文字键的大小不一致。

为了使按键大小一致，并且定制Button样式，决定改用GridLayout实现。过程如下：

1.GridLayout

布局文件如下：

<?xml version="1.0" encoding="utf-8"?>

<android.support.v7.widget.GridLayout xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:app="http://schemas.android.com/apk/res-auto"

    android:id="@+id/pinpad_dialog"

    android:layout_width="match_parent"

    android:layout_height="wrap_content"

    app:columnCount="3"

    app:orientation="horizontal"

    app:rowCount="6">

    <Button

        android:id="@+id/btnUp"

        android:layout_height="30dp"

        android:layout_margin="3dp"

        android:background="@drawable/key_btn_func_style"

        android:gravity="center"

        android:soundEffectsEnabled="true"

        android:text="@string/up_arrow"

        android:textSize="26sp"

        app:layout_columnWeight="1"

        app:layout_rowWeight="1" />

    <Button

        android:id="@+id/btnDown"

        android:layout_height="30dp"

        android:layout_margin="3dp"

        android:background="@drawable/key_btn_func_style"

        android:soundEffectsEnabled="true"

        android:text="@string/down_arrow"

        android:textSize="26sp"

        app:layout_columnWeight="1"

        app:layout_rowWeight="1" />

    <Button

        android:id="@+id/btnMenu"

        android:layout_height="30dp"

        android:layout_margin="3dp"

        android:background="@drawable/key_btn_func_style"

        android:soundEffectsEnabled="true"

        android:text="Menu"

        android:textSize="20sp"

        app:layout_columnWeight="1"

        app:layout_rowWeight="1" />

    <Button

        android:id="@+id/btn1"

        android:layout_height="30dp"

        android:layout_margin="3dp"

        android:background="@drawable/key_button_style"

        android:soundEffectsEnabled="true"

        android:text="1"

        android:textSize="20sp"

        app:layout_columnWeight="1"

        app:layout_rowWeight="1" />

    <Button

        android:id="@+id/btn2"

        android:layout_height="30dp"

        android:layout_margin="3dp"

        android:background="@drawable/key_button_style"

        android:soundEffectsEnabled="true"

        android:text="2"

        android:textSize="20sp"

        app:layout_columnWeight="1"

        app:layout_rowWeight="1" />

    <Button

        android:id="@+id/btn3"

        android:layout_height="30dp"

        android:layout_margin="3dp"

        android:background="@drawable/key_button_style"

        android:soundEffectsEnabled="true"

        android:text="3"

        android:textSize="20sp"

        app:layout_columnWeight="1"

        app:layout_rowWeight="1" />

    <Button

        android:id="@+id/btn4"

        android:layout_height="30dp"

        android:layout_margin="3dp"

        android:background="@drawable/key_button_style"

        android:soundEffectsEnabled="true"

        android:text="4"

        android:textSize="20sp"

        app:layout_columnWeight="1"

        app:layout_rowWeight="1" />

    <Button

        android:id="@+id/btn5"

        android:layout_height="30dp"

        android:layout_margin="3dp"

        android:background="@drawable/key_button_style"

        android:soundEffectsEnabled="true"

        android:text="5"

        android:textSize="20sp"

        app:layout_columnWeight="1"

        app:layout_rowWeight="1" />

    <Button

        android:id="@+id/btn6"

        android:layout_height="30dp"

        android:layout_margin="3dp"

        android:background="@drawable/key_button_style"

        android:soundEffectsEnabled="true"

        android:text="6"

        android:textSize="20sp"

        app:layout_columnWeight="1"

        app:layout_rowWeight="1" />

    <Button

        android:id="@+id/btn7"

        android:layout_height="30dp"

        android:layout_margin="3dp"

        android:background="@drawable/key_button_style"

        android:soundEffectsEnabled="true"

        android:text="7"

        android:textSize="20sp"

        app:layout_columnWeight="1"

        app:layout_rowWeight="1" />

    <Button

        android:id="@+id/btn8"

        android:layout_height="30dp"

        android:layout_margin="3dp"

        android:background="@drawable/key_button_style"

        android:soundEffectsEnabled="true"

        android:text="8"

        android:textSize="20sp"

        app:layout_columnWeight="1"

        app:layout_rowWeight="1" />

    <Button

        android:id="@+id/btn9"

        android:layout_height="30dp"

        android:layout_margin="3dp"

        android:background="@drawable/key_button_style"

        android:soundEffectsEnabled="true"

        android:text="9"

        android:textSize="20sp"

        app:layout_columnWeight="1"

        app:layout_rowWeight="1" />

    <Button

        android:id="@+id/btnFunc"

        android:layout_height="30dp"

        android:layout_margin="3dp"

        android:background="@drawable/key_btn_func_style"

        android:soundEffectsEnabled="true"

        android:text="Func"

        android:textSize="20sp"

        app:layout_columnWeight="1"

        app:layout_rowWeight="1" />

    <Button

        android:id="@+id/btn0"

        android:layout_height="30dp"

        android:layout_margin="3dp"

        android:background="@drawable/key_button_style"

        android:soundEffectsEnabled="true"

        android:text="0"

        android:textSize="20sp"

        app:layout_columnWeight="1"

        app:layout_rowWeight="1" />

    <Button

        android:id="@+id/btnAlpha"

        android:layout_height="30dp"

        android:layout_margin="3dp"

        android:background="@drawable/key_btn_clear_style"

        android:soundEffectsEnabled="true"

        android:text="Alpha"

        android:textSize="20sp"

        app:layout_columnWeight="1"

        app:layout_rowWeight="1" />

    <Button

        android:id="@+id/btnCancel"

        android:layout_height="30dp"

        android:layout_margin="3dp"

        android:background="@drawable/key_btn_cancel_style"

        android:soundEffectsEnabled="true"

        android:text="Cancel"

        android:textSize="20sp"

        app:layout_columnWeight="1"

        app:layout_rowWeight="1" />

    <Button

        android:id="@+id/btnClear"

        android:layout_height="30dp"

        android:layout_margin="3dp"

        android:background="@drawable/key_btn_clear_style"

        android:soundEffectsEnabled="true"

        android:text="Clear"

        android:textSize="20sp"

        app:layout_columnWeight="1"

        app:layout_rowWeight="1" />

    <Button

        android:id="@+id/btnEnter"

        android:layout_height="30dp"

        android:layout_margin="3dp"

        android:background="@drawable/key_btn_enter_style"

        android:soundEffectsEnabled="true"

        android:text="Enter"

        android:textSize="20sp"

        app:layout_columnWeight="1"

        app:layout_rowWeight="1" />

</android.support.v7.widget.GridLayout>
这里说明几点：

（1）android.support.v7.widget.GridLayout

这里用的是V7包中的GridLayout，因为在当前开发的应用中，设置minSdkVersion是19。
而下面要用到的两个属性，在一般的GridLayout中需要API21才能使用。
在AndroidStudio中，默认是还没有下载兼容包的控件的，在design模式下，点击相应的AppCompat控件，下载即可。

（2）使GridLayout的子元素平分屏幕

需要用下面的这两个属性。

app:layout_columnWeight="1" 

app:layout_rowWeight="1"

具体参考：Android的GridLayout的子元素如何平分屏幕

2.自定义button样式

(1)自定义的drawable

key_button_pressed.xml

<?xml version="1.0" encoding="utf-8"?>

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item>

        <shape android:shape="rectangle">

            <solid android:color="#656462" />

            <corners

                android:bottomLeftRadius="5dp"

                android:bottomRightRadius="5dp"

                android:topLeftRadius="5dp"

                android:topRightRadius="5dp" />

        </shape>

    </item>

    <item

        android:bottom="1px"

        android:left="1px"

        android:right="1px"

        android:top="1px">

        <shape>

            <gradient

                android:angle="90"

                android:centerX="0.5"

                android:centerY="0.5"

                android:endColor="#fbf8f4"

                android:startColor="#7b7b79"

                android:type="linear" />

            <corners

                android:bottomLeftRadius="5dp"

                android:bottomRightRadius="5dp"

                android:topLeftRadius="5dp"

                android:topRightRadius="5dp" />

        </shape>

    </item>

</layer-list>

key_button_default.xml

<?xml version="1.0" encoding="utf-8"?>

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item>

        <shape android:shape="rectangle">

            <solid android:color="#656462" />

            <corners

                android:bottomLeftRadius="5dp"

                android:bottomRightRadius="5dp"

                android:topLeftRadius="5dp"

                android:topRightRadius="5dp" />

        </shape>

    </item>

    <item

        android:bottom="1px"

        android:left="1px"

        android:right="1px"

        android:top="1px">

        <shape>

            <gradient

                android:angle="90"

                android:centerX="0.5"

                android:centerY="0.5"

                android:endColor="#fbf8f4"

                android:startColor="#656462"

                android:type="linear" />

            <corners

                android:bottomLeftRadius="5dp"

                android:bottomRightRadius="5dp"

                android:topLeftRadius="5dp"

                android:topRightRadius="5dp" />

        </shape>

    </item>

</layer-list>

（2）自定义的selector

key_button_style.xml

<?xml version="1.0" encoding="utf-8"?>

<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@drawable/key_button_pressed" android:state_pressed="true" />

    <item android:drawable="@drawable/key_button_default" />

</selector>

在上面这个selector中，就用到上面的两个drawable文件。

key_btn_cancel_style.xml

<?xml version="1.0" encoding="utf-8"?>

<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_pressed="true">

        <shape android:shape="rectangle">

            <solid android:color="#e7352c" />

            <corners android:bottomLeftRadius="5dp" android:bottomRightRadius="5dp" android:topLeftRadius="5dp" android:topRightRadius="5dp" />

        </shape>

    </item>

    <item>

        <shape android:shape="rectangle">

            <solid android:color="#da2219" />

            <corners android:bottomLeftRadius="5dp" android:bottomRightRadius="5dp" android:topLeftRadius="5dp" android:topRightRadius="5dp" />

        </shape>

    </item>

</selector>

key_btn_func_style.xml

<?xml version="1.0" encoding="utf-8"?>

<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_pressed="true">

        <shape android:shape="rectangle">

            <solid android:color="#2a7afb" />

            <corners android:bottomLeftRadius="5dp" android:bottomRightRadius="5dp" android:topLeftRadius="5dp" android:topRightRadius="5dp" />

        </shape>

    </item>

    <item>

        <shape android:shape="rectangle">

            <solid android:color="#126af9" />

            <corners android:bottomLeftRadius="5dp" android:bottomRightRadius="5dp" android:topLeftRadius="5dp" android:topRightRadius="5dp" />

        </shape>

    </item>

</selector>

key_btn_enter_style.xml

<?xml version="1.0" encoding="utf-8"?>

<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_pressed="true">

        <shape android:shape="rectangle">

            <solid android:color="#4de947" />

            <corners android:bottomLeftRadius="5dp" android:bottomRightRadius="5dp" android:topLeftRadius="5dp" android:topRightRadius="5dp" />

        </shape>

    </item>

    <item>

        <shape android:shape="rectangle">

            <solid android:color="#2ac824" />

            <corners android:bottomLeftRadius="5dp" android:bottomRightRadius="5dp" android:topLeftRadius="5dp" android:topRightRadius="5dp" />

        </shape>

    </item>

</selector>

key_btn_clear_style.xml

<?xml version="1.0" encoding="utf-8"?>

<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_pressed="true">

        <shape android:shape="rectangle">

            <solid android:color="#f2992d" />

            <corners android:bottomLeftRadius="5dp" android:bottomRightRadius="5dp" android:topLeftRadius="5dp" android:topRightRadius="5dp" />

        </shape>

    </item>

    <item>

        <shape android:shape="rectangle">

            <solid android:color="#f78a04" />

            <corners android:bottomLeftRadius="5dp" android:bottomRightRadius="5dp" android:topLeftRadius="5dp" android:topRightRadius="5dp" />

        </shape>

    </item>

</selector>

(3)将selector应用到button中

android:background="@drawable/key_btn_enter_style"
将Button的background属性，设置为相应的selector即可。

3.其他

在设置颜色的时候，一度找不到取色器。
原来只要点击xml文件左侧的颜色即可，参考下图：

4.效果

下面是以上GridLayout和自定义Button的效果图：

GridLayout 使用的更多相关文章

  1. GridLayout自定义数字键盘(两个EditText)

    功能说明: 适用于两个EditText输入框,并控制输入字符的长度,点击键盘中的"确定"按钮完成输入,点击"前一项"光标跳到前一个EditText 运行效果图如 ...

  2. 浅谈GridLayout（网格布局）

    Android 4.0 布局-->GridLayout 网格布局 以行列单元格的形式展示内部控件排列,可以实现类似计算机键盘效果 ,也可以实现可自动变行的标签群效果 使用GridLayout , ...

  3. Android中帧布局-FrameLayout和网格布局-GridLayout

    帧布局-FrameLayout 一.概念 帧布局中,容器为每个加入其中的空间创建一个空白的区域(成为一帧).每个空间占据一帧,这些帧会按gravity属性自动对齐. 帧布局的效果是将其中的所有空间叠加 ...

  4. 4.0以后的新布局方式GridLayout

    <?xml version="1.0" encoding="utf-8"?> <GridLayout xmlns:android=" ...

  5. Android 布局之GridLayout

    Android 布局之GridLayout 1 GridLayout简介 GridLayout是Android4.0新提供的网格矩阵形式的布局控件. GridLayout的继承关系如下:java.la ...

  6. android——学习：网格布局——GridLayout

    Android一开始就提供了几种布局控件,如线性布局LinearLayout.相对布局RelativeLayout和表格布局TableLayout等,但在很多情况下,这些布局控件是不能满足要求的,因此 ...

  7. Android——GridLayout

    转载自http://www.cnblogs.com/over140/archive/2011/12/08/2280224.html 欢迎大家转载 前言 本章内容android.widget.GridL ...

  8. Android中GridLayout与GridView区别

    GridLayout初步研究:可以这么说这个布局绝对是开发者的福音,它大大简化了对复杂布局的处理,包括性能提高不是一倍两倍.它与GridView是完全不同的概念, GridView是一种适配器布局,它 ...

  9. Space and GridLayout 教程

    Ice Cream Sandwich (ICS) sports two new widgets that have been designed to support the richer user i ...

随机推荐

  1. [转].net core 通过ViewComponent封装控件 左侧菜单

    本文转自:http://www.cnblogs.com/BenDan2002/p/6224816.html 我们在.net core中还使用了ViewComponent方式生成控件.ViewCompo ...

  2. BZOJ 1691: [Usaco2007 Dec]挑剔的美食家 [treap 贪心]

    1691: [Usaco2007 Dec]挑剔的美食家 Time Limit: 5 Sec  Memory Limit: 64 MBSubmit: 786  Solved: 391[Submit][S ...

  3. 威佐夫博弈(Wythoff Game)

    有两堆石子,数量任意,可以不同.游戏开始由两个人轮流取石子.游戏规定,每次有两种不同的取法,一是可以在任意的一堆中取走任意多的石子:二是可以在两堆中同时取走相同数量的石子.最后把石子全部取完者为胜者. ...

  4. [LeetCode] Assign Cookies 分点心

    Assume you are an awesome parent and want to give your children some cookies. But, you should give e ...

  5. 20145222《信息安全系统设计基础》Linux常用命令汇总

    学习Linux时常用命令汇总 通过Ctrl+f键可在该网页搜索到你想要的命令. Linux中命令格式为:command [options] [arguments] //中括号代表是可选的,即有些命令不 ...

  6. .NET Core中ADO.NET SqlClient的使用与常见问题

    一.简介 在很多要求性能的项目中,我们都要使用传统的ADO.NET的方式来完成我们日常的工作:目前有一些网友问有关于.NET Core操作SQL Server的问题在本文中解答一下. 本文旨在指出,在 ...

  7. 20170103简单解析MySQL查询优化器工作原理

    转自博客http://www.cnblogs.com/hellohell/p/5718238.html 感谢楼主的贡献 查询优化器的任务是发现执行SQL查询的最佳方案.大多数查询优化器,包括MySQL ...

  8. mybatis一对多关联

    这里的一对多指的是:当我们查询一个对象的时候,同时将其有关联的多方对象都查询出来. 下面以国家(Country)和部长(Minsiter)做案例 一个国家有多个部长 1.定义实体 定义实体的时候需要注 ...

  9. 关于Django 错误 查询之后结果序列化出现的问题is not JSON serializable

    由于查询出来的结果是instance (实例 /对象) 无法实例化, 在model结果加 .value()

  10. java-读取xml

    1.使用w3c.document /** * 测试 * */ public static void testReadLabel() { String path = "C:\\Users\\h ...