码迷,mamicode.com
首页 > 其他好文 > 详细

手把手教你做安豆计算器(二)-计算器界面布局

时间:2016-07-01 16:26:18      阅读:215      评论:0      收藏:0      [点我收藏+]

标签:

第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. 通过将LinearLayoutandroid: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设置成1android:layout_height设置成0dp
  2. 下半区域是键盘的显示区域,我们也选用LinearLayout作为这个区域的布局。下半区域占整个界面的2/3,就要将android:layout_weight设置成2android: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:idresult_areaandroid:layout_weight设置成1android:layout_height设置成0dp
  2. 为表达式区域指定android:idformula_areaandroid:layout_weight设置成1android:layout_height设置成0dp
    设置了id,我们以后就可以在代码中,通过这id来获取并使用这个控件了。
  3. 包含结果区域和表达式区域的LinearLayout设置android:orientation属性为vertical,让它们竖直排列
  4. 为了祛除界面上四个边的空白,我们还要移除最外层LinearLayoutandroid: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设置成3android:layout_width设置成0dp
  2. 右边区域就是一个简单的竖直排列的LinearLayout,让它占据1个单位的宽度,也就是android:layout_weight设置成1android: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_widthmatch_parentandroid:layout_heightwrap_content,我们就简单的在这里设置一个android:layout_weight1
<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设置成0dpandroid:layout_weight设置成1android: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:orientationvertical
  2. 这一列的Button还是按照相等的比例进行分配,所以android:layout_height设置成0dpandroid:layout_weight设置成1android: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>
技术分享

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

手把手教你做安豆计算器(二)-计算器界面布局

标签:

原文地址:http://blog.csdn.net/anddlecn/article/details/51800324

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!