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

第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>


/*******************************************************************/

* 版权声明

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

/*******************************************************************/

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>

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

时间： 2024-12-12 03:22:18

手把手教你做安豆计算器（二）－计算器界面布局的相关文章

手把手教你做安豆计算器（一）－开发环境搭建与部署

前言 很多同学想学安卓应用开发,但是还没有开始就遇到了很多问题,比如资源无法下载,环境搭建遇到问题,代码不知该从何处写起.从0到1的过程让新手们抓狂. 于是我们写了这篇操作性强,手把手教你应用开发的教程,帮助准备开始学习安卓应用开发的同学.万事开头难,把开始的第一只拦路虎解决掉,以后的路就越走越宽了. 本文将从一个实用的例子-"计算器"应用入手,向准备学习安卓开发的新手介绍安卓应用开发的整个过程–包括开发环境的搭建,程序的部署,界面设计,功能实现等等. 当完成这个"计算器&q

手把手教你做安豆计算器（八）－动画效果

第9节 动画效果 当用户点击了＝以后,为了让结果区域的显示和表达式区域的清空显得很优雅,我们可以为它们添加淡如淡出的效果:让结果区域的文字淡入,让表达式区域的文字淡出. 这种效果可以使用动画实现. 安卓系统的动画可以分成, 逐帧动画:就像电影胶片那样,通过连续放映一张一张差距不大的图片实现动画效果: 属性动画:一点点改变控件的某个属性值,从而产生动画的视觉效果: 渐变动画:产生控件的透明效果 平移效果 缩放效果或者旋转效果: 我们准备加入的文字淡入淡出效果,就是渐变动画的透明效果. 9.1 定义

手把手教你做安豆计算器（四）－界面美化

第5节 界面美化 这一节,我们将对粗糙的计算器界面进行美化,最后让它的效果如下, 5.1 整体背景色 给整个背景调整一个背景颜色,让它变得美观. 在布局文件activity_main.xml中,给整个界面增加一个背景颜色#FF4B5459,对界面的父布局LinearLayout使用android:background属性设置: 这里的颜色是采用AARRGGBB的形式进行定义的,AA表示透明度,RR代表红色,GG代表绿色,BB代表蓝色: <LinearLayout xmlns:android=&quo

手把手教你做安豆计算器（七）－“关于”界面

第8节 关于界面 现在我们开始为应用增加一个自我介绍,自我介绍也是一个Activity,它将从应用右上方的菜单栏启动. 8.1 菜单的添加 应用标题栏的区域,叫做Actionbar.这里用来显示应用的名字,提供应用的各种操作菜单.我们就要在这里添加一个关于菜单. 在项目浏览框,找到res目录,点击右键,选择new->android resource file; 在对应栏位按照下图填写: 在新创建的xml文件中加入菜单项,showAsAction属性表示菜单是否直接显示出来,如果给他指定never

手把手教你做蓝牙小车（二）

第5节 BTChat 本节开始介绍Arduino蓝牙模块,配合Android应用,实现一个蓝牙聊天应用. 5.1 什么是蓝牙 简单说就是一种不同设备之间点对点通讯的技术. 有大篇大篇的蓝牙各种协议,各种规范... 本课程只讲用到的内容,不展开更多内容了. 5.2 SDP Service Discovery Protocol,简称SDP,是允许设备发现其他设备所支持服务的协议. 蓝牙协议给每个服务分配一个UUID,用来区分各种服务. SDP的UUID是00001101-0000-1000-8000

手把手教你做视频播放器（二）

第2节 获取视频信息 要知道设备上有哪些可以被播放的视频文件,一般来讲有两个方法, 遍历设备磁盘上所有的目录,根据文件的后缀名,把这些目录中所有的视频文件都找出来: 向安卓系统提供的Media Provider提出查询请求,从而获取我们希望的视频文件信息: 从"减小开发难度,利用安卓系统自身功能,选择最简单的方案"的角度出发,我们采用Media Provider. 2.1 ContentProvider ContentProvider是安卓系统的四大组件之一,为别的组件(Activit

UWP Jenkins + NuGet + MSBuild 手把手教你做自动UWP Build 和 App store包

背景 项目上需要做UWP的自动安装包,在以前的公司接触的是TFS来做自动build. 公司要求用Jenkins来做,别笑话我,之前还真不晓得这个东西. 会的同学请看一下支持错误,不会的同学请先自行脑补,我们一步一步的来. 首先我们准备2个安装包,Jenkins,NuGet 都下载最新的好了. 1. 安装Jenkins,下一步下一步.安装好了会自动浏览器跳转到http://localhost:8080/ 如下图 按照提示去C:\Program Files (x86)\Jenkins\secrets

微信测试工程师手把手教你做弱网络模拟测试

微信测试工程师手把手教你做弱网络模拟测试 Posted by 腾讯优测 | 3,152 views 小优有话说: app研发不同于实验室里做研究,哪里有"理想环境". 理想里,用户用着性能卓越的手机,连着畅通无阻的wifi网络. "哇塞!这个app好用到飞起!" 现实是,他们可能正用着你闻所未闻的机型,穿梭于地铁.公交.火车.乡间.大山-.. 信号"若隐若现,扑朔迷离" "我去!又crash了!" "唉,怎么又连不上

手把手教你做关键词匹配项目（搜索引擎）---- 第三天

第三天 小王(运营总监)看到小丁丁整天都在淘宝.百度.魔方.拍拍上面淘关键词,每天花费的时间好长,工作效率又低,拿着这个借口来找到我. 说到:小帅帅,你看小丁丁每天都在淘宝.百度.魔方.拍拍上面淘关键词花费的时间好长,你能不能帮帮忙,看看能不能让系统自己做啦,这样可以节省好多人力,带来的效益多高.(0 其实就是为了掩饰他们懒惰 0) 小帅帅一听到可以带来的效益好高,王总还求着我呢 ,马上 两眼冒着星光,是该好好体现, 解决这个问题就可以体现出我的价值. 小帅帅拍着胸膛保证到:王总,这个小KS啦,