当前位置:   article > 正文

绝了!Android网格布局搭计算器界面竟然很完美!_选择合理的布局管理器,搭建一个计算器界面

选择合理的布局管理器,搭建一个计算器界面

本博文是Android程序设计的初级阶段,主要采用网格布局搭建计算器界面。网格布局(GridLayout)把设置区域划分为若干行和列的网格,就如网页设计中表格布局一样,定的比较死!因此控制每个控件大小就变得轻松加愉快了。
博文需要Andrio Studio并且有会成功跑hello world的基础,如果不会,下面mooc链接传送给你:
mooc链接
20分钟即可学会的那种!

放一下最终效果图

在这里插入图片描述

网格布局基础属性预热

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

创建布局文件

在这里插入图片描述
然后创建一个名为activity_main4.xml,如这种
在这里插入图片描述
ok之后,我们点击右边的这个按钮,第三个哟!
在这里插入图片描述
拖动按钮模块,选择下图几个控件
在这里插入图片描述
然后随意拖,只要控件管够就行了。
一个TextView,17个Button,比如拖的像这种
在这里插入图片描述
然后回到第一个视图,编辑xml(Ctrl+b)可以试试。
在这里插入图片描述

编辑如下代码

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

<?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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54

讲解

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

GridLayout

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

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

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

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

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

TextView

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

button

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

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

java布局文件调用修改

在这里插入图片描述
然后选择绿色箭头,开始运行
在这里插入图片描述
最后出现这样的效果
在这里插入图片描述

总结

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

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

希望此文对大家有帮助!

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/小小林熬夜学编程/article/detail/271907
推荐阅读
相关标签
  

闽ICP备14008679号