天天看点

绝了!Android网格布局搭计算器界面竟然很完美!

本博文是Android程序设计的初级阶段,主要采用网格布局搭建计算器界面。网格布局(GridLayout)把设置区域划分为若干行和列的网格,就如网页设计中表格布局一样,定的比较死!因此控制每个控件大小就变得轻松加愉快了。

博文需要Andrio Studio并且有会成功跑hello world的基础,如果不会,下面mooc链接传送给你:

mooc链接

20分钟即可学会的那种!

放一下最终效果图

绝了!Android网格布局搭计算器界面竟然很完美!

网格布局基础属性预热

不需要预热,大片理论,看起来对文章层次不清晰,我们是做中学。

创建布局文件

绝了!Android网格布局搭计算器界面竟然很完美!

然后创建一个名为activity_main4.xml,如这种

绝了!Android网格布局搭计算器界面竟然很完美!

ok之后,我们点击右边的这个按钮,第三个哟!

绝了!Android网格布局搭计算器界面竟然很完美!

拖动按钮模块,选择下图几个控件

绝了!Android网格布局搭计算器界面竟然很完美!

然后随意拖,只要控件管够就行了。

一个TextView,17个Button,比如拖的像这种

绝了!Android网格布局搭计算器界面竟然很完美!

然后回到第一个视图,编辑xml(Ctrl+b)可以试试。

绝了!Android网格布局搭计算器界面竟然很完美!

编辑如下代码

后面附带讲解,先看讲解,再看代码

<?xml version="1.0" encoding="utf-8"?>
<GridLayout
    xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:rowCount="6"
    android:columnCount="4">

    <TextView
        android:id="@+id/textView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="0"
        android:layout_columnSpan="4"
        android:layout_marginLeft="4px"
        android:gravity="left"
        android:textSize = "50dp"
         />

    <Button
        android:layout_columnWeight="1"
        android:layout_columnSpan="3"
        android:text="清除"
        android:textSize="26sp"/>

    <Button android:text="+" android:textSize="26sp"/>
    <Button android:text="1" android:textSize="26sp"/>
    <Button android:text="2" android:textSize="26sp"/>
    <Button android:text="3" android:textSize="26sp"/>
    <Button android:text="-" android:textSize="26sp"/>
    <Button android:text="4" android:textSize="26sp"/>
    <Button android:text="5" android:textSize="26sp"/>
    <Button android:text="6" android:textSize="26sp"/>
    <Button android:text="*" android:textSize="26sp"/>
    <Button android:text="7" android:textSize="26sp"/>
    <Button android:text="8" android:textSize="26sp"/>
    <Button android:text="9" android:textSize="26sp"/>
    <Button android:text="/" android:textSize="26sp"/>



    <Button
        android:layout_height="wrap_content"
        android:layout_columnSpan="2"
        android:layout_columnWeight="1"
        android:text="0"
        android:textSize="26sp"/>



    <Button android:text="." android:textSize="26sp"/>
    <Button android:text="=" android:textSize="26sp"/>
</GridLayout>
           

讲解

代码一共出现了三样事物,先讲GridLayout然后讲TextView最后讲Button

GridLayout

没错它就是一种布局,叫做网格布局

android:layout_width 就是布局的宽度,我们这里匹配父元素
android:layout_height 就是布局的高度,我们这里匹配父元素
           

有的同学会问,匹配父元素啥意思,就是可以理解为与整个app外壳一起高宽。

android:rowCount 设置网格行的数量
android:columnCount 设置网格列的数量
           

也就是我们设置了六行四列网格。

TextView

其中TextView,width与height就是最普通的自己元素的高度与宽度。Text占用四列的宽度,离边缘宽度4像素,跟html类似。gravity表示在当前控件内的text属性值相对于该控件的对齐方式。text就是开始显示内容值。textsize就是内容字体大小。

button

layout_columnWeight 设置列权重
layout_columnSpan 指定该单元格占据的列数
           

所谓的权重就是安卓根据这个分配大小。占据的列数大家应该能明白,textSize就是文本字体大小,sp是个单位

java布局文件调用修改

绝了!Android网格布局搭计算器界面竟然很完美!

然后选择绿色箭头,开始运行

绝了!Android网格布局搭计算器界面竟然很完美!

最后出现这样的效果

绝了!Android网格布局搭计算器界面竟然很完美!

总结

本博文采用网格布局,具有会成功跑hello world的功底,步骤如下

  • 创建资源文件
  • 进入控件视图,添加控件
  • 转到代码视图,修改xml文件代码
  • 修改java调用文件
  • 尝试运行,取得效果。

希望此文对大家有帮助!