天天看點
傳回

你們要的Android電腦，今天它來了~

項目目錄

  • ​​一、項目概述​​
  • ​​二、開發環境​​
  • ​​三、詳細設計​​
  • ​​1、布局設計​​
  • ​​2、主函數​​
  • ​​2.1、控件定義​​
  • ​​2.2、控件綁定​​
  • ​​2.3、控件設定監聽器​​
  • ​​2.4、控件設定點選事件​​
  • ​​2.5、運作結果​​
  • ​​四、項目效果​​
  • ​​五、項目總結​​
  • ​​六、源碼下載下傳​​

一、項目概述

本次項目主要實作了簡單的電腦功能，包括加減乘除基本運算，還有小數點和清零功能，目前可以進行兩個數的計算操作。可以算得上是很好的Android界面和按鈕點選事件學習執行個體。剛用模拟器顯示hello world的同學或者完全沒有接觸過Android的同學都可以直接上手。

二、開發環境

Android版本相對之前調整了一下，現在是4.2.1，當然版本不影響，代碼文法并不會變，隻是建構工具的版本變了而已。代碼在任何版本的AS上都可以運作。如果遇到問題，可以參考這兩篇經驗：

  • 快速解決Android項目的Gradle報錯問題
  • 如何導入gradle版本不同的Android項目​
    你們要的Android電腦，今天它來了~

三、詳細設計

1、布局設計

在講布局前我們先介紹GridLayout（網格布局），來說下它的優點：

1、可以自己設定布局中元件的排列方式
2、可以自定義網格布局有多少行,多少列
3、可以直接設定元件位于某行某列
4、可以設定元件橫跨幾行或者幾列

下面我們看下電腦的layout代碼：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/AliceBlue"
    tools:context=".MainActivity"
    android:orientation="vertical">
    <ImageView
        android:layout_gravity="center"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_margin="10dp"
        android:background="@drawable/icon"/>
    <EditText
        android:id="@+id/result"
        android:layout_width="match_parent"
        android:layout_height="80dp"
        android:layout_marginBottom="50dp"
        android:textSize="30sp"/>

    <GridLayout
        android:rowCount="5"
        android:columnCount="4"
        android:layout_gravity="center"
        android:layout_height="match_parent"
        android:layout_width="wrap_content">

        <Button
            android:id="@+id/btn1"
            android:layout_margin="5dp"
            android:text="1"
            android:background="@drawable/button_selector"
            android:textSize="25sp"/>

        <Button
            android:id="@+id/btn2"
            android:layout_margin="5dp"
            android:text="2"
            android:background="@drawable/button_selector"
            android:textSize="25sp"/>

        <Button
            android:id="@+id/btn3"
            android:layout_margin="5dp"
            android:text="3"
            android:background="@drawable/button_selector"
            android:textSize="25sp"/>

        <Button
            android:id="@+id/divide"
            android:layout_margin="5dp"
            android:text="÷"
            android:background="@drawable/button_selector"
            android:textSize="25sp"/>

        <Button
            android:id="@+id/btn4"
            android:layout_margin="5dp"
            android:text="4"
            android:background="@drawable/button_selector"
            android:textSize="25sp"/>

        <Button
            android:id="@+id/btn5"
            android:layout_margin="5dp"
            android:text="5"
            android:background="@drawable/button_selector"
            android:textSize="25sp"/>
        <Button
            android:id="@+id/btn6"
            android:layout_margin="5dp"
            android:text="6"
            android:background="@drawable/button_selector"
            android:textSize="25sp"/>
        <Button
            android:id="@+id/multi"
            android:layout_margin="5dp"
            android:text="×"
            android:background="@drawable/button_selector"
            android:textSize="25sp"/>
        <Button
            android:id="@+id/btn7"
            android:layout_margin="5dp"
            android:text="7"
            android:background="@drawable/button_selector"
            android:textSize="25sp"/>

        <Button
            android:id="@+id/btn8"
            android:layout_margin="5dp"
            android:text="8"
            android:background="@drawable/button_selector"
            android:textSize="25sp"/>

        <Button
            android:id="@+id/btn9"
            android:layout_margin="5dp"
            android:text="9"
            android:background="@drawable/button_selector"
            android:textSize="25sp"/>

        <Button
            android:id="@+id/sub"
            android:layout_margin="5dp"
            android:text="—"
            android:background="@drawable/button_selector"
            android:textSize="25sp"/>

        <Button
            android:id="@+id/point"
            android:layout_margin="5dp"
            android:layout_columnSpan="1"
            android:text="."
            android:background="@drawable/button_selector"
            android:textSize="25sp"/>

        <Button
            android:id="@+id/btn0"
            android:layout_margin="5dp"
            android:text="0"
            android:background="@drawable/button_selector"
            android:textSize="25sp"/>

        <Button
            android:id="@+id/clean"
            android:layout_margin="5dp"
            android:text="C"
            android:background="@drawable/button_selector"
            android:textSize="25sp"/>

        <Button
            android:id="@+id/plus"
            android:layout_margin="5dp"
            android:layout_rowSpan="1"
            android:text="+"
            android:background="@drawable/button_selector"
            android:textSize="25sp"/>
        <Button
            android:id="@+id/delete"
            android:layout_columnSpan="1"
            android:layout_rowSpan="2"
            android:layout_margin="5dp"
            android:text="Del"
            android:background="@drawable/button_selector"
            android:textSize="25sp"/>

        <Button
            android:id="@+id/equal"
            android:layout_columnSpan="3"
            android:layout_gravity="fill"
            android:layout_margin="5dp"
            android:text="="
            android:background="@drawable/button_selector"
            android:textSize="25sp"/>
    </GridLayout>

</LinearLayout>

代碼很簡單，首先是個圖檔框，用來顯示電腦的圖示。接着是文本框，用來顯示輸入的計算式。下面就是GridLayout，為每個Button設定了id 、margin 和 background，其中“Del”和“=”按鈕橫跨兩列，其他的都是直接添加的，預設每個元件都是占一行一列。我們來看下界面預覽：

你們要的Android電腦，今天它來了~

2、主函數

2.1、控件定義

定義了很多button，分别代表0-9、加減乘除、小數點、等于和清零，這裡變量名一定要簡潔易懂，盡可能保證Main裡面聲明的變量名和layout檔案中的控件id相同。不要随意定義變量名，養成好習慣。

//顯示結果
    private EditText resultText;
    //按鈕0-9
    private Button btn0,btn1,btn2,btn3,btn4,btn5,btn6,btn7,btn8,btn9;
    //運算符
    private  Button plus;   // 加号+
    private  Button sub;    // 減号-
    private  Button multi;  // 乘号×
    private  Button divide; // 除号÷
    private  Button point;  // 小數點.
    private  Button equal;  // 等于=
    private  Button clean;  // 清空
    private  Button delete; // 删除

2.2、控件綁定

将剛剛定義的變量和已經設定好的控件通過id進行綁定，這樣整個變量就代表了這個控件記住，寫Android一定要先寫layout，再寫Main函數。

//綁定運算符控件
     plus = findViewById(R.id.plus);
     sub = findViewById(R.id.sub);
     multi = findViewById(R.id.multi);
     divide = findViewById(R.id.divide);
     point = findViewById(R.id.point);
     equal = findViewById(R.id.equal);
     clean = findViewById(R.id.clean);
     delete = findViewById(R.id.delete);
     //綁定文本框
     resultText = findViewById(R.id.result);

2.3、控件設定監聽器

将每個控件添加上點選事件，這是最常用的方法，系統監聽到你的動作進而給出響應。

plus.setOnClickListener(this);
     sub.setOnClickListener(this);
     multi.setOnClickListener(this);
     divide.setOnClickListener(this);
     equal.setOnClickListener(this);
     point.setOnClickListener(this);
     clean.setOnClickListener(this);
     delete.setOnClickListener(this);

2.4、控件設定點選事件

核心的思想如下：如果是數字，那麼直接輸入；如果是操作符，那麼前後加上空格，再放入文本框中；如果有小數點，則結果為浮點數；如果隻有後面的操作數，那麼預設第一個操作數為0；如果輸入的計算式不合法不會給出響應。中間處理邏輯就很像LeetCode中的字元串處理。

String input = resultText.getText().toString();
    switch (view.getId()){//選擇按鈕id
        case R.id.btn0:
        case R.id.btn1:
        case R.id.btn2:
        case R.id.btn3:
        case R.id.btn4:
        case R.id.btn5:
        case R.id.btn6:
        case R.id.btn7:
        case R.id.btn8:
        case R.id.btn9:
            resultText.setText(input + ((Button)view).getText());
            break;
        case R.id.point:
            if (input.isEmpty() || input.substring(input.length() - 1).equals(" "))
                return;//如果最後是空格，無響應
            else
                resultText.setText(input + '.');
            break;
        //加減乘除，運算符前後都是空格
        case R.id.plus:
        case R.id.sub:
        case R.id.multi:
        case R.id.divide:
            resultText.setText(input + " " + ((Button)view).getText() + " ");
            break;
        case R.id.clean://清除輸入框
            resultText.setText("");
            break;
        case R.id.delete://從後往前删除字元
            if(!input.isEmpty())
                resultText.setText(input.substring(0, input.length() - 1));
            break;
        case R.id.equal://計算運算結果
            getResult();//回調函數
            break;
    }
}

2.5、運作結果

這部分方法就是計算兩個數字運算結果，就是if-else語句，equals( )就是兩個對象比較，如果相同則為true，否則為false，contains( ) 就是包含關系，包含為ture，否則為false。

//運算結果的方法
    private void getResult(){
        //擷取文本框的内容
        String exp = resultText.getText().toString();
        if(exp==null||exp.equals("")){//如果内容為空
            return;
        }
        if(!exp.contains(" ")){//如果不包含運算符
            return;
        }
        double result = 0.0;//傳回結果
        /***********進行字元串截取**************/
        //運算符前的數字，從0下标到第一個空格下标前
        String s1 = exp.substring(0,exp.indexOf(" "));
        //運算符，第一個空格下标和第二個空格下标之間
        String op = exp.substring(exp.indexOf(" ")+1,exp.indexOf(" ")+2);
        //運算符後的數字，從第二個空格後全是
        String s2 = exp.substring(exp.indexOf(" ")+3);

        if(!s1.equals("")&&!s2.equals("")) {//如果數字合法
            double d1 = Double.parseDouble(s1);//則數字都是double類型
            double d2 = Double.parseDouble(s2);
            if (op.equals("+")) //如果是 +
                result = d1 + d2;
            else if (op.equals("-"))
                result = d1 - d2;
            else if (op.equals("×"))
                result = d1 * d2;
            else if (op.equals("÷")) {
                if (d2 == 0) //如果被除數是0
                    Toast.makeText(this,"除數不能為0，請重新輸入！",Toast.LENGTH_SHORT).show();
                else //否則執行正常是除法運算
                    result = d1 / d2;
            }

            if (!s1.contains(".") && !s2.contains(".") && !op.equals("÷")) {//如果都是整型
                int r = (int) result;
                resultText.setText(r + "");
            } else{//如果有浮點型
                resultText.setText(result + "");
            }
        } else if(!s1.equals("") && s2.equals("")){//如果是隻輸入運算符前的數
            return;//直接傳回目前文本框的内容
        } else if(s1.equals("") && !s2.equals("")){//如果是隻輸入運算符後面的數
            double d2 = Double.parseDouble(s2);
            //運算符前沒有輸入數字
            if (op.equals("+"))
                result = 0 + d2;
            else if (op.equals("-"))
                result = 0 - d2;
            else if (op.equals("×"))
                result = 0;
            else if (op.equals("÷"))
                result = 0;

            if (!s2.contains(".")) {
                int r = (int) result;
                resultText.setText(r + "");
            } else{
                resultText.setText(result + "");
            }
        }else {
            resultText.setText("");
        }
    }

四、項目效果

1、打開模拟器運作，随意輸入兩個數字進行加減乘除

你們要的Android電腦，今天它來了~

2、按等于鍵，得出結果

你們要的Android電腦，今天它來了~

3、再用上面計算出來的結果做一次乘法

你們要的Android電腦，今天它來了~

4、按C清空輸入框，按Del逐個字元删除

你們要的Android電腦，今天它來了~

五、項目總結

本次項目是比較基礎的考驗布局和按鈕點選事件的執行個體，對于初學者來說是非常好的example，可以作為Hello World之後第二個執行個體，認真消化裡面的内容，以後做起來會非常快。

六、源碼下載下傳

需要源碼學習的同學可以關注我的微信公衆号 《萌新加油站》，背景回複：電腦，即可擷取源碼。還有很多經典的Android項目等你來學習！

android studio 電腦 android電腦 安卓app 移動應用開發
上一篇: 3種方法實作Android按鈕的點選事件，建議收藏！
下一篇: Android Studio實作通訊錄項目

繼續閱讀