手把手教你安卓入门（二）

最新推荐文章于 2023-08-19 11:15:22 发布

anddlecn

最新推荐文章于 2023-08-19 11:15:22 发布

阅读量1.6w

点赞数 11

分类专栏：安卓入门快速指南手把手教你做安卓应用开发文章标签： android 源代码界面

本文链接：https://blog.csdn.net/anddlecn/article/details/51484715

版权

手把手教你做安卓应用开发同时被 2 个专栏收录

34 篇文章 299 订阅

订阅专栏

安卓入门快速指南

3 篇文章 0 订阅

订阅专栏

第3节计算器小应用

现在起，我们就开始正式开发“计算器”应用。

3.1 计算器界面布局

这一节，我们将完成计算器的界面布局，让它初具计算器的模样。

计算器界面是通过布局文件定义的。它位于项目的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布局。并且通过将LinearLayout的android:orientation属性设置成vertical来将它包含的内容以竖直方式排列。整个界面将尽可能占用整个屏幕，因此使用match_parent指定布局的宽度和高度。match_parent说明尺寸要尽可能的大。

<?xml version="1.0" encoding="utf-8"?>
<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"
    tools:context="com.anddle.calculator.MainActivity"
    android:orientation="vertical">
</LinearLayout>

3.1.2 区域分割

上半区域还包含了表达式区域和计算结果区域，它们也成竖直排列，所以还需要一个LinearLayout包含它们。上半区域占整个界面的1/3。

下半区域是键盘的显示区域，像一个表格排列，我们选用TableLayout作为这个区域的布局。下半区域占整个界面的2/3。

LinearLayout要在竖直方向上按比例分配，就需要为它的子布局使用android:layout_weight属性，并且把android:layout_height设置成0dp。

<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"
    tools:context="com.anddle.calculator.MainActivity"
    android:orientation="vertical">

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

    </LinearLayout>

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

    </TableLayout>

</LinearLayout>

3.1.3 显示区域布局

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

为结果区域指定android:id为result_area，为表达式区域指定android:id为formula_area。

<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"
    tools:context="com.anddle.calculator.MainActivity"
    android:orientation="vertical">

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

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

    </TableLayout>

</LinearLayout>

3.1.4 键盘区域布局

在TableLayout设计键盘按钮。键盘分成4*5格，每一行用TableRow布局，TableRow是与TableLayout配合使用的布局，用来表示表格的每一行。

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

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

按钮可以使用安卓自有的控件Button。通过android:text属性为每个Button设置需要显示的内容，并为它们各自的android:id取上对应的id名字。对于最后一行中的‘0’按钮，我们需要为这个Button控件再多使用一个android:layout_span属性，让它能够占据三格的位置。

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

    <TableRow android:layout_weight="1">
        <Button android:id="@+id/btn_c" android:text="C"/>
        <Button android:id="@+id/btn_del" android:text="DEL"/>
        <Button android:id="@+id/btn_dot" android:text="."/>
        <Button android:id="@+id/btn_add" android:text="+"/>
    </TableRow>

    <TableRow android:layout_weight="1">
        <Button android:id="@+id/btn_7" android:text="7"/>
        <Button android:id="@+id/btn_8" android:text="8"/>
        <Button android:id="@+id/btn_9" android:text="9"/>
        <Button android:id="@+id/btn_sub" android:text="-"/>
    </TableRow>

    <TableRow android:layout_weight="1">
        <Button android:id="@+id/btn_4" android:text="4"/>
        <Button android:id="@+id/btn_5" android:text="5"/>
        <Button android:id="@+id/btn_6" android:text="6"/>
        <Button android:id="@+id/btn_mul" android:text="*"/>
    </TableRow>

    <TableRow android:layout_weight="1">
        <Button android:id="@+id/btn_1" android:text="1"/>
        <Button android:id="@+id/btn_2" android:text="2"/>
        <Button android:id="@+id/btn_3" android:text="3"/>
        <Button android:id="@+id/btn_div" android:text="/"/>
    </TableRow>

    <TableRow android:layout_weight="1">
        <Button android:id="@+id/btn_0" android:text="0"
                android:layout_span="3" />
        <Button android:id="@+id/btn_equ" android:text="="/>
    </TableRow>

</TableLayout>

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

3.2 计算器功能实现

这一节我们将实现计算器的功能。在实现的过程中，可以随时将修改的代码部署到设备上，看看实际的效果。

3.2.1 按键响应

按钮是可以在用户点击的时候做出响应的。

首先在布局文件中，给所有Button控件的android:onClick属性设置一个响应函数，这里我们取名也叫做onClick。

<TableRow android:layout_weight="1">
    <Button android:id="@+id/btn_c" android:text="C" android:onClick="onClick"/>
    <Button android:id="@+id/btn_del" android:text="DEL" android:onClick="onClick"/>
    <Button android:id="@+id/btn_dot" android:text="." android:onClick="onClick"/>
    <Button android:id="@+id/btn_add" android:text="+" android:onClick="onClick"/>
</TableRow>

在MainActivity.java的源代码当中，添加对应的onClick()函数方法。这个方法是public的，返回值为void，传入的参数是view－也就是这个按钮对象。
```
public void onClick(View view)
{

}
```

用每个按钮的android:id来区分，每次点击的是哪个按钮。在代码中，id可以通过Android Studio自动编译生成的R－资源类来访问，形如R.id.xxx。

public void onClick(View view)
{
    switch (view.getId()) {
        case R.id.btn_0:
        case R.id.btn_1:
        case R.id.btn_2:
        case R.id.btn_3:
        case R.id.btn_4:
        case R.id.btn_5:
        case R.id.btn_6:
        case R.id.btn_7:
        case R.id.btn_8:
        case R.id.btn_9:
        case R.id.btn_add:
        case R.id.btn_sub:
        case R.id.btn_mul:
        case R.id.btn_div:
        case R.id.btn_dot: 
        case R.id.btn_c:
        case R.id.btn_del:
        case R.id.btn_equ:
        break;
    }
}

3.2.2 表达式输入功能

当用户点击数字键（0-9和.）以及运算符键（＋－＊／）时，需要将它们对应的符号显示到表达式区域。

把view转换成Button类型，通过Button的getText()方法，获取按钮上的字符；
通过Activity的findViewById()方法获取表达式区域；在通过表达式区域TextView的getText()方法，获取已经显示在表达式区域上的内容；
把按钮代表的字符，添加到表达式内容的最后；
把新的表达式内容，通过TextView的setText()方法，显示到表达式区域上。

public void onClick(View view) {

        switch (view.getId()) {
            case R.id.btn_0:
            case R.id.btn_1:
            case R.id.btn_2:
            case R.id.btn_3:
            case R.id.btn_4:
            case R.id.btn_5:
            case R.id.btn_6:
            case R.id.btn_7:
            case R.id.btn_8:
            case R.id.btn_9:
            case R.id.btn_add:
            case R.id.btn_sub:
            case R.id.btn_mul:
            case R.id.btn_div:
            case R.id.btn_dot: {
                Button btn = (Button) view;
                String strAdded = btn.getText().toString();
                TextView formula = (TextView) findViewById(R.id.formula_area);
                String strContent = formula.getText().toString();
                String strNewContent = strContent + strAdded;
                formula.setText(strNewContent);
            }
            break;
            ......
        }
}

3.2.3 字符删除功能

当用户点击“C”按钮的时候，清空显示区域的内容和结果区域的内容。

通过Activity的findViewById()方法，分别获取表达式区域和结果区域；
通过TextView的setText()方法，分别为它们设置空字符串。

public void onClick(View view)
{
        switch (view.getId()) {
            ......
            case R.id.btn_c: {
                TextView formula = (TextView) findViewById(R.id.formula_area);
                formula.setText("");

                TextView result = (TextView) findViewById(R.id.result_area);
                result.setText("");
            }

            break;
            ......
        }
}

当用户点击“DEL”按钮的时候，删除表达式内容的最后一个字符。

获取表达式区域的内容；
如果表达式区域是空的，没有字符串，就不管它；否则利用String类的subString()方法，截取最后一个字符之前的所有内容；
将最新截取的内容，设置到表达式区域里。

public void onClick(View view)
{
        switch (view.getId()) {
            ......
            case R.id.btn_del: {
                TextView formula = (TextView) findViewById(R.id.formula_area);
                String strContent = formula.getText().toString();
                if (strContent.length() > 0) {
                    strContent = strContent.substring(0, strContent.length() - 1);
                    formula.setText(strContent);
                }
            }
            break;        
        }
}

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

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

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