手把手教你做安豆计算器（二）－计算器界面布局

最新推荐文章于 2022-11-13 13:25:43 发布
最新推荐文章于 2022-11-13 13:25:43 发布
阅读量1w 收藏 9
点赞数 5
分类专栏： 安豆计算器 手把手教你做安卓应用开发 文章标签： 界面布局 计算器
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/anddlecn/article/details/51800324
版权

第3节 计算器界面布局

现在起，我们就开始正式开发“计算器”应用。这一节，我们将完成计算器的界面布局，让它初具计算器的模样。

计算器界面是通过布局文件定义的。它位于项目的res\layout\activity_main.xml文件中。

这个布局文件通过java源代码MainActivity.java中的setContentView()函数，设置到界面上。

@Override
protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
}

接下来，我们的界面布局，就会在这个布局文件activity_main.xml中进行。
在修改布局文件的过程中，可以通过Preview功能，来实时观看我们修改的界面布局效果。

3.1 上下段布局

首先确定布局形式。界面分为两个大区域，上半区域显示计算表达式和计算结果，下半区域显示键盘。

  1. 两个区域一上一下，呈线型排列，因此我们选择LinearLayout布局；
  2. 通过将LinearLayout的android:orientation属性设置成vertical来将它包含的内容以竖直方式排列;
  3. 整个界面将尽可能占用整个屏幕，因此使用match_parent指定布局的宽度和高度。match_parent说明尺寸要尽可能的大。
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:orientation="vertical"
    tools:context="com.anddle.calculator.MainActivity">
</LinearLayout>
  1. 上半区域包含了表达式区域和计算结果区域，它们也成竖直排列，所以还需要一个LinearLayout包含它们。上半区域占整个界面的1/3，就要将android:layout_weight设置成1，android:layout_height设置成0dp；
  2. 下半区域是键盘的显示区域，我们也选用LinearLayout作为这个区域的布局。下半区域占整个界面的2/3,就要将android:layout_weight设置成2，android:layout_height设置成0dp；

这样的设置说明，要将父布局剩余的空间平均分成1+2=3份，上半区域分得1/3，下半区域分的2/3。所谓空余的空间就是:父布局的空间，被子布局的空间占用后，所剩余的空间。

布局文件中，我们将现实区域和键盘区域的高度都设置成了0dp，说明它们在竖直方向上不占用任何空间，但是又设置了layout_weight，说明它们要按照父控件match_parent占用的高度来按比例分配。

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:orientation="vertical"
    tools:context="com.anddle.calculator.MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"/>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="2"/>

</LinearLayout>

3.2 显示区域布局

结果区域和表达式区域一上一下，各占一半空间，用来显示文字内容。它们可以使用TextView控件来实现。

  1. 为结果区域指定android:id为result_area，android:layout_weight设置成1，android:layout_height设置成0dp；
  2. 为表达式区域指定android:id为formula_area，android:layout_weight设置成1，android:layout_height设置成0dp；
    设置了id，我们以后就可以在代码中，通过这id来获取并使用这个控件了。
  3. 包含结果区域和表达式区域的LinearLayout设置android:orientation属性为vertical，让它们竖直排列
  4. 为了祛除界面上四个边的空白，我们还要移除最外层LinearLayout的android:paddingXXXX这几个属性，让整个界面填满显示区域。
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.anddle.calculator.MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:orientation="vertical"/>

        <TextView
            android:id="@+id/result_area"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"/>

        <TextView
            android:id="@+id/formula_area"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"/>

    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="2"/>

</LinearLayout>

3.3 键盘区域布局

键盘布局可以进一步分成左右两个区域，

  1. 左边区域是C DEL ／ 0-9以及.；
  2. 右边区域是* - + =。

这两个区域，可以同样使用水平排列的LinearLayout作为它们的父布局，

  1. 左边区域像个表格，可以使用TableLayout，让它占据3个单位的宽度，android:layout_weight设置成3，android:layout_width设置成0dp；
  2. 右边区域就是一个简单的竖直排列的LinearLayout，让它占据1个单位的宽度，也就是android:layout_weight设置成1，android:layout_width设置成0dp；
<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="2">

    <TableLayout
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="3"/>

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"/>

</LinearLayout>

3.3.1 键盘左区域布局

键盘按钮分成3*5格，每一格就是一个按钮，这就像是一个表格，所以我们选用了TableLayout作为它们的布局。

  1. 每一行用TableRow表示，它是与TableLayout配合使用的布局，用来表示表格的每一行；这里有5行，就添加5个TableRow；
  2. TableRow在默认情况下，会假定android:layout_width为match_parent，android:layout_height为wrap_content，我们就简单的在这里设置一个android:layout_weight为1；
<TableLayout
    android:layout_width="0dp"
    android:layout_height="match_parent"
    android:layout_weight="3">

    <TableRow android:layout_weight="1">
    </TableRow>

    <TableRow android:layout_weight="1">
    </TableRow>

    <TableRow android:layout_weight="1">
    </TableRow>

    <TableRow android:layout_weight="1">
    </TableRow>

    <TableRow android:layout_weight="1">
    </TableRow>

</TableLayout>

键盘上的按钮可以使用Android SDK提供的Button控件，

  1. 通过android:text属性为每个Button设置需要显示的内容；
  2. 为它们各自的android:id取上对应的id名字；
  3. 每一行的Button还是按照相等的比例进行分配，android:layout_width设置成0dp，android:layout_weight设置成1，android:layout_height设置成match_parent。
  4. 最后一行中的‘0’按钮，它要占据两列的宽度，我们可以将这个Button控件的android:layout_weight设置成2，就能让它能够占据2格的位置了；
<TableLayout
    android:layout_width="0dp"
    android:layout_height="match_parent"
    android:layout_weight="3">

    <TableRow android:layout_weight="1">
        <Button android:id="@+id/btn_c" android:text="C"
                android:layout_weight="1"
                android:layout_width="0dp"
                android:layout_height="match_parent"/>
        <Button android:id="@+id/btn_del" android:text="DEL"
                android:layout_weight="1"
                android:layout_width="0dp"
                android:layout_height="match_parent"/>
        <Button android:id="@+id/btn_div" android:text="/"
                android:layout_weight="1"
                android:layout_width="0dp"
                android:layout_height="match_parent"/>
    </TableRow>

    <TableRow android:layout_weight="1">
        <Button android:id="@+id/btn_7" android:text="7"
                android:layout_weight="1"
                android:layout_width="0dp"
                android:layout_height="match_parent"/>
        <Button android:id="@+id/btn_8" android:text="8"
                android:layout_weight="1"
                android:layout_width="0dp"
                android:layout_height="match_parent"/>
        <Button android:id="@+id/btn_9" android:text="9"
                android:layout_weight="1"
                android:layout_width="0dp"
                android:layout_height="match_parent"/>
    </TableRow>

    <TableRow android:layout_weight="1">
        <Button android:id="@+id/btn_4" android:text="4"
                android:layout_weight="1"
                android:layout_width="0dp"
                android:layout_height="match_parent"/>
        <Button android:id="@+id/btn_5" android:text="5"
                android:layout_weight="1"
                android:layout_width="0dp"
                android:layout_height="match_parent"/>
        <Button android:id="@+id/btn_6" android:text="6"
                android:layout_weight="1"
                android:layout_width="0dp"
                android:layout_height="match_parent"/>
    </TableRow>

    <TableRow android:layout_weight="1">
        <Button android:id="@+id/btn_1" android:text="1"
                android:layout_weight="1"
                android:layout_width="0dp"
                android:layout_height="match_parent"/>
        <Button android:id="@+id/btn_2" android:text="2"
                android:layout_weight="1"
                android:layout_width="0dp"
                android:layout_height="match_parent"/>
        <Button android:id="@+id/btn_3" android:text="3"
                android:layout_weight="1"
                android:layout_width="0dp"
                android:layout_height="match_parent"/>
    </TableRow>

    <TableRow android:layout_weight="1">
        <Button android:id="@+id/btn_0" android:text="0"
                android:layout_weight="2"
                android:layout_width="0dp"
                android:layout_height="match_parent"/>
        <Button android:id="@+id/btn_dot" android:text="."
                android:layout_weight="1"
                android:layout_width="0dp"
                android:layout_height="match_parent"/>
    </TableRow>

</TableLayout>

3.3.2 键盘右区域布局

最后，我们将键盘右边区域的按钮添加上。

  1. 让Button竖直排列，就要将包裹它们的LinearLayout设置android:orientation成vertical；
  2. 这一列的Button还是按照相等的比例进行分配，所以android:layout_height设置成0dp，android:layout_weight设置成1，android:layout_width设置成match_parent。
<LinearLayout
    android:layout_width="0dp"
    android:layout_height="match_parent"
    android:layout_weight="1"
    android:orientation="vertical">

    <Button android:id="@+id/btn_mul" android:text="*"
            android:layout_weight="1"
            android:layout_width="match_parent"
            android:layout_height="0dp"/>
    <Button android:id="@+id/btn_sub" android:text="-"
            android:layout_weight="1"
            android:layout_width="match_parent"
            android:layout_height="0dp"/>
    <Button android:id="@+id/btn_add" android:text="+"
            android:layout_weight="1"
            android:layout_width="match_parent"
            android:layout_height="0dp"/>
    <Button android:id="@+id/btn_equ" android:text="＝"
            android:layout_weight="1"
            android:layout_width="match_parent"
            android:layout_height="0dp"/>

</LinearLayout>

至此，计算器的界面布局就完成了。

/*******************************************************************/
* 版权声明
* 本教程只在CSDN和安豆网发布，其他网站出现本教程均属侵权。

*另外，我们还推出了Arduino智能硬件相关的教程，您可以在我们的网店跟我学Arduino编程中购买相关硬件。同时也感谢大家对我们这些码农的支持。

*最后再次感谢各位读者对安豆的支持，谢谢:)
/*******************************************************************/

anddlecn
关注
  • 5
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
SAP创建供应商主数据.pdf
07-14
通过安豆学院提供的SAP认证培训，可以进一步提升对SAP系统的理解，培养创新思维，并在全球范围内增强职业竞争力。在实践中学习和掌握这些知识，对于优化企业的供应商管理、提高业务效率具有重要意义。访问...
计算器界面设计与实现
Andrea-地面宇航员
08-01 2127
计算器界面设计与实现 一. 计算器界面设计 设计 二. 注意事项 计算器界面没有最大化、最小化按钮和帮助按钮，只有关闭按钮 界面大小不能改变，是固定的 功能性组件比较多，如果构造功能性组件的过程中构造失败，需要释放掉之前构造工作的组件，解决方法采用二次构造 三. 实现 代码如下 #ifndef CALCULATORUI_H #define CALCULATORUI_H #include <QWidget> #include <QLineEdit> #include
Java - GUI -计算器界面（附效果图）
m0_64261982的博客
04-26 895
菜鸟入门-java-GUI
Android简单美观计算器（界面部分）
这里是努力做好AC吧
03-18 8049
问题描述： 制作一个简单的计算器，实现计算功能 问题分析：
综合使用各种布局和控件创建出计算器界面
weixin_42378520的博客
03-10 791
综合使用各种布局和控件创建出计算器界面 Grid layout子控件超出屏幕的一个解决方法 主要是gridlayout的使用（Tablelayout无法实现跨行操作） 有想法的小伙伴也可以用其他的 Gridlayout实现五行六列(这里有个坑） 直接上效果图（勉强这样的简易计算器界面图） 代 码分为两部分 第一部分MainActivity.java 主要作用是获取Grid layout的列...
Python实现简易图形用户界面计算器
热门推荐
Zhangguohao666的博客
02-16 1万+
基于tkinter的简易图形用户界面计算器的设计和实现，帮着读者深入了解图形界面的应用程序的开发流程
SAP创建流程行业资源.pdf
09-30
安豆学院作为学习平台，致力于培养具有远见和创新能力的人才，提供高质量的教育资源，帮助学员掌握SAP系统和流程，从而在企业中有效地管理和利用行业资源。 在实践中，理解SAP的符号和术语也非常重要。例如，"警告...
java grid_Java图形化界面设计——布局管理器之GridLayout（网格布局）
weixin_39884323的博客
02-12 608
网格布局特点：l 使容器中的各组件呈M行×N列的网格状分布。l 网格每列宽度相同，等于容器的宽度除以网格的列数。l 网格每行高度相同，等于容器的高度除以网格的行数。l 各组件的排列方式为：从上到下，从左到右。l 组件放入容器的次序决定了它在容器中的位置。l 容器大小改变时，组件的相对位置不变，大小会改变。l 设置网格布局行数和列数时，行数或者列数可以有一个为零。若rows为0，col...
学会使用Android Studio网格布局制作计算器界面
最新发布
RainBow_xiy的博客
11-13 5961
一、网格布局的介绍 1.1GridLayout布局使用虚细线将布局划分为行、列和单元格，也支持一个控件在行、列上都有交错排列。 1.2可以自己设置布局中组件的排列方式 1.3可以自定义网格布局有多少行、多少列 1.4可以直接设置组件位于某行某列 1.5可以设置组件横跨几行或者几列
简单计算器 及GridLayout布局
06-15
1编写Application程序，在Frame中加入80个按钮，分20行4列，用GridLayout布局方式，按钮背景为黄色(Color.yellow)，按钮文字颜色为红色(Color.red)。 2.设计一个简单计算器，如下图所示。在“操作数”标签右侧的两个文本框输入操作数，当单击操作符＋，－，×，÷按钮时，对两个操作数进行运算并将结果填入到“结果”标签右侧的文本框中。
CalculatorDesign:计算器布局是使用xml中的不同颜色和资源设计的
03-27
CalculatorDesign:计算器布局是使用xml中的不同颜色和资源设计的
简单计算器的布局
04-21
简单计算器的布局，只是布局问件，没有代码实现部分的代码
Android开发丶GridLayoutの一个简易精美的计算器界面
01-04
记录了Android开发的历程，本DEMO是通过GridLayout布局编写了一个精美简易的计算器界面，暂时还没计算的功能，后续会补上
简单的计算器界面
03-07
有关于计算器界面的代码，方便取用有关于计算器界面的代码，方便取用有关于计算器界面的代码，方便取用
布局管理的使用——计算器界面设计（LinearLayout，TableLayout，ConstraintLayout三种方式）
weixin_48383580的博客
05-08 3524
目录题目要求：一. LinearLayout二.TableLayout三.ConstraintLayout说明 题目要求： 分别用布局管理器LinearLayout，TableLayout，ConstraintLayout设计计算器的界面如图所示，基本组件有TextView、Button。通过本次作业，熟悉每种布局管理的特点及适用场景，掌握layout_weight的方法和使用。 一. LinearLayout 首先，我们需要明白LinearLayout布局的意思。这是一个线性布局。属性有水平或者竖直。接
小白用网格布局实现简单的计算器 ——Android
YanMeiHe的博客
03-16 4370
目的：采用网格布局，实现计算器的简单功能 开发工具：Android Studio3.3.2 开发环境： 实现过程： 第一步，创建一个Android项目，在这我把项目命名为MyApplication。 第二步，打开MyApplication/app/src/main/res/layout/activity_main.xml，使用text模式编写代码。 使用网格布局（...
计算器界面分析及界面程序实现
木子皿--啥都不会的菜鸟
02-26 1675
文章目录1 计算器程序界面分析2 计算器界面程序实现2.1 计算器界面程序初步实现2.2 计算器界面代码重构 1 计算器程序界面分析 程序界面如下： 界面设计： 定义组件间的间隔： Space = 10px 定义按钮组件的大小： Width = 40px，Height = 40px 定义文本框组件的大小： Width = 5 * 40px + 4 * 10px， Height =...
制作一个简单的计算器布局
meishadevs的个人博客
04-05 4365
最近一直在学习布局文件的使用，在android中一共提供了五种种布局，分别是相对布局、线性布局、帧布局、表格布局，绝对布局，其中最常用的是线性布局和相对布局，这次我们使用线性布局制作一个简单的计算器界面 界面的xml代码如下 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值