Androidstudio如何制作一个高仿小米计算器小demo

Androidstudio如何制作一个高仿小米计算器小demo

————安德风

 

一、最终成品效果图：

 

二、界面设计布局源代码：文件名activity_main.xml

（存放在jsj(我的模块名为jsj)/res/layout/activity_main.xml）

<?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:orientation="vertical"
    tools:context="com.example.jsj.MainActivity" >

    <EditText
        android:id="@+id/EV_Result"
        android:layout_width="match_parent"
        android:layout_height="209dp"
        android:ems="10"
        android:gravity="right|bottom"
        android:inputType="textPersonName"
        android:paddingRight="30dp"
        android:paddingBottom="30dp"
        android:text="0"
        android:textSize="60sp" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"/>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <Button
            android:id="@+id/Btn_C"
            android:layout_width="98dp"
            android:layout_height="100dp"
            android:background="@drawable/border2"
            android:text="C"
            android:textColor="#FF5722"
            android:textSize="40sp" />

        <Button
            android:id="@+id/Btn_Back"
            android:layout_width="wrap_content"
            android:layout_height="100dp"
            android:layout_weight="1"
            android:background="@drawable/border2"
            android:text="Del"
            android:textSize="40sp" />

        <Button
            android:id="@+id/Btn_Division"
            android:layout_width="wrap_content"
            android:layout_height="100dp"
            android:layout_weight="1"
            android:background="@drawable/border2"
            android:text="/"
            android:textSize="40sp" />

        <Button
            android:id="@+id/Btn_Multiplication"
            android:layout_width="wrap_content"
            android:layout_height="100dp"
            android:layout_weight="1"
            android:background="@drawable/border2"
            android:text="*"
            android:textSize="40sp" />

    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <Button
            android:id="@+id/Btn_Num7"
            android:layout_width="wrap_content"
            android:layout_height="100dp"
            android:layout_weight="1"
            android:background="@drawable/border2"
            android:text="7"
            android:textSize="40sp" />

        <Button
            android:id="@+id/Btn_Num8"
            android:layout_width="wrap_content"
            android:layout_height="100dp"
            android:layout_weight="1"
            android:background="@drawable/border2"
            android:text="8"
            android:textSize="40sp" />

        <Button
            android:id="@+id/Btn_Num9"
            android:layout_width="wrap_content"
            android:layout_height="100dp"
            android:layout_weight="1"
            android:background="@drawable/border2"
            android:text="9"
            android:textSize="40sp" />

        <Button
            android:id="@+id/Btn_Subtraction"
            android:layout_width="wrap_content"
            android:layout_height="100dp"
            android:layout_weight="1"
            android:background="@drawable/border2"
            android:text="-"
            android:textSize="40sp" />

    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <Button
            android:id="@+id/Btn_Num4"
            android:layout_width="wrap_content"
            android:layout_height="100dp"
            android:layout_weight="1"
            android:background="@drawable/border2"
            android:text="4"
            android:textSize="40sp" />

        <Button
            android:id="@+id/Btn_Num5"
            android:layout_width="wrap_content"
            android:layout_height="100dp"
            android:layout_weight="1"
            android:background="@drawable/border2"
            android:text="5"
            android:textSize="40sp" />

        <Button
            android:id="@+id/Btn_Num6"
            android:layout_width="wrap_content"
            android:layout_height="100dp"
            android:layout_weight="1"
            android:background="@drawable/border2"
            android:text="6"
            android:textSize="40sp" />

        <Button
            android:id="@+id/Btn_Addition"
            android:layout_width="wrap_content"
            android:layout_height="100dp"
            android:layout_weight="1"
            android:background="@drawable/border2"
            android:text="+"
            android:textSize="40sp" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <Button
            android:id="@+id/Btn_Num1"
            android:layout_width="wrap_content"
            android:layout_height="100dp"
            android:layout_weight="1"
            android:background="@drawable/border2"
            android:text="1"
            android:textSize="40sp" />

        <Button
            android:id="@+id/Btn_Num2"
            android:layout_width="wrap_content"
            android:layout_height="100dp"
            android:layout_weight="1"
            android:background="@drawable/border2"
            android:text="2"
            android:textSize="40sp" />

        <Button
            android:id="@+id/Btn_Num3"
            android:layout_width="wrap_content"
            android:layout_height="100dp"
            android:layout_weight="1"
            android:background="@drawable/border2"
            android:text="3"
            android:textSize="40sp" />

        <Button
            android:id="@+id/Btn_Num0"
            android:layout_width="wrap_content"
            android:layout_height="100dp"
            android:layout_weight="1"
            android:background="@drawable/border2"
            android:text="0"
            android:textSize="40sp" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="111dp"
        android:orientation="horizontal">

        <Button
            android:id="@+id/Btn_ModuloDivision"
            android:layout_width="98dp"
            android:layout_height="match_parent"
            android:layout_weight="0"
            android:background="@drawable/border2"
            android:text="%"
            android:textSize="40sp" />

        <Button
            android:id="@+id/Btn_DecimalPoint"
            android:layout_width="98dp"
            android:layout_height="match_parent"
            android:layout_weight="0"
            android:background="@drawable/border2"
            android:text="."
            android:textSize="40sp" />

        <Button
            android:id="@+id/Btn_Equal"
            android:layout_width="160dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="@drawable/border"
            android:text="="
            android:textColor="#FDFDFD"
            android:textSize="40sp" />
    </LinearLayout>
</LinearLayout>

三、按钮设置边框以及点击颜色切换效果（这里我在res/drawable中建立了两个文件：
分别为 border.xml 用来改变“=”边框以及按钮效果，border.xml 用来改变普通按钮边框以及按钮效果）

1、border.xml源代码（“=”按钮特效）

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" >
        <shape>
            <solid
                android:color="#FF5722" />//设置按钮响应颜色
            <stroke
                android:width="3dp"
                android:color="#C3C3C3" />//设置按钮响应外边框颜色
            <corners
                android:radius="0dp" />
            <padding
                android:left="5dp"
                android:top="5dp"
                android:right="5dp"
                android:bottom="5dp" />
        </shape>
    </item>
    <item>
        <shape>
            <gradient
                android:startColor="#FF7421"
                android:endColor="#FF7421"
                android:centerColor="#FF7421"
                android:angle="270" />
            <stroke
                android:width="1dp"
                android:color="#A0A0A0" />//设置外边框颜色
            <corners
                android:radius="0dp" />
            <padding
                android:left="5dp"
                android:top="5dp"
                android:right="5dp"
                android:bottom="5dp" />
        </shape>
    </item>
</selector>

2、border2.xml源代码

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" >
        <shape>
            <solid
                android:color="#C6CBC9" />//设置按钮响应颜色
            <stroke
                android:width="3dp"
                android:color="#C3C3C3" />//设置按钮响应外边框颜色
            <corners
                android:radius="0dp" />
            <padding
                android:left="5dp"
                android:top="5dp"
                android:right="5dp"
                android:bottom="5dp" />
        </shape>
    </item>
    <item>
        <shape>
            <gradient
                android:startColor="#FFFFFF"/>//设置按钮内部上半部分颜色（可以做渐变颜色）
            android:endColor="#FFFFFF"/>//设置按钮内部下半部分颜色（可以做渐变颜色）
            android:angle="270" />
            <stroke
                android:width="1dp"
                android:color="#A0A0A0" />//设置外边框颜色
            <corners
                android:radius="0dp" />
            <padding
                android:left="5dp"
                android:top="5dp"
                android:right="5dp"
                android:bottom="5dp" />
        </shape>
    </item>
</selector>

四、设置隐藏导航栏以及状态栏源代码（在jsj/res/values/style.xml中设置）

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
        <!--隐藏标题栏-->
        <item name="windowNoTitle">true</item>
        <!--隐藏状态栏-->
        <item name="android:windowFullscreen">false</item>
    </style>

</resources>

五、设置导航栏以及状态栏中的颜色设置源代码（在jsj/res/values/color.xml中设置）

<?xml version="1.0" encoding="utf-8"?>
<resources>
<!--    <color name="colorPrimary">#6200EE</color>-->
<!--    <color name="colorPrimaryDark">#3700B3</color>-->
    <color name="colorAccent">#03DAC5</color>

    <color name="colorPrimary">#EDEEEE</color>
    <color name="colorPrimaryDark">#EDEEEE</color>
</resources>

六、实现计算器主要功能文件MainActivity.java该文件存路径：

源代码：

package com.example.jsj;

import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;

import androidx.appcompat.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity implements View.OnClickListener {

    private EditText EV_Result; // 结果框
    private double currentResult = 0.0;  // 存储数字及结果
    private boolean firstDigit = true;  // 标志用户按的是否是整个表达式的第一个数字,或者是运算符后的第一个数字
    private String operator = "=";  // 当前运算的运算符
    private boolean operateValidFlag = true;  // 操作是否合法

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        // 控件初始化及添加监听事件
        this.init();
    }

    /**
     * 点击事件重载方法
     * @param v 当前点击的控件
     */
    @Override
    public void onClick(View v) {
        String pre = ((Button) v).getText().toString();
        Log.i("TAG", pre);
        switch (v.getId()) {
            case R.id.Btn_Back:
                setBtn_Back();
                break;
            case R.id.Btn_C:
                setBtn_C();
                break;
            case R.id.Btn_Num0:
            case R.id.Btn_Num1:
            case R.id.Btn_Num2:
            case R.id.Btn_Num3:
            case R.id.Btn_Num4:
            case R.id.Btn_Num5:
            case R.id.Btn_Num6:
            case R.id.Btn_Num7:
            case R.id.Btn_Num8:
            case R.id.Btn_Num9:
            case R.id.Btn_DecimalPoint:
                setNum(pre);
                break;
            case R.id.Btn_Subtraction:
            case R.id.Btn_Addition:
            case R.id.Btn_ModuloDivision:
            case R.id.Btn_Multiplication:
            case R.id.Btn_Division:
            case R.id.Btn_Equal:
                setOperator(pre);
                break;
        }
    }

    /**
     * 点击运算符处理
     * @param label 接收当前点击的运算符
     */
    public void setOperator(String label) {
        switch (operator){
            case "/":
                // 除法运算
                // 如果当前结果文本框中的值等于0
                if (getNumFromEV_Result() == 0.0) {
                    // 操作不合法
                    operateValidFlag = false;
                    EV_Result.setText("除数不能为零！");
                } else {
                    currentResult /= getNumFromEV_Result();
                }
                break;
            case "+":
                // 加法运算
                currentResult += getNumFromEV_Result();
                break;
            case "-":
                // 减法运算
                currentResult -= getNumFromEV_Result();
                break;
            case "*":
                // 加法运算
                currentResult *= getNumFromEV_Result();
                break;
            case "%":
                // 加法运算
                currentResult %= getNumFromEV_Result();
                break;
            case "=":
                // 赋值运算
                currentResult = getNumFromEV_Result();
                break;
        }
        if (operateValidFlag) {
            // 双精度浮点数的运算
            long t1;
            double t2;
            t1 = (long) currentResult;
            t2 = currentResult - t1;
            if (t2 == 0) {
                EV_Result.setText(String.valueOf(t1));
            } else {
                EV_Result.setText(String.valueOf(currentResult));
            }
        }
        // 运算符等于用户按的按钮
        operator = label;
        firstDigit = true;
        operateValidFlag = true;
    }

    /**
     * 点击数字处理
     * @param n 接收当前点击的数字
     */
    public void setNum(String n) {
        if (firstDigit) {
            // 输入的第一个数字
            EV_Result.setText(n);
        } else if ((n.equals(".")) && (!EV_Result.getText().toString().contains("."))) {
            // 输入的是小数点，并且之前没有小数点，则将小数点附在结果文本框的后面
            String str = EV_Result.getText().toString();
            str += ".";
            EV_Result.setText(str);
        } else if (!n.equals(".")) {
            // 如果输入的不是小数点，则将数字附在结果文本框的后面
            String str = EV_Result.getText().toString();
            str += n;
            EV_Result.setText(str);
        }
        // 以后输入的肯定不是第一个数字了
        firstDigit = false;
    }

    /**
     * 从文本框中获取数字
     *
     * @return result
     */
    public double getNumFromEV_Result() {
        double result = 0;
        try {
            result = Double.valueOf(EV_Result.getText().toString());
        } catch (NumberFormatException e) {
            Log.i("TAG","您输入的不是数字");
        }
        return result;
    }

    /**
     * 设置清空C键
     */
    public void setBtn_C() {
        EV_Result.setText("0");
        firstDigit = true;
        operator = "=";
    }

    /**
     * 设置返回Back键
     */
    public void setBtn_Back() {
        String currentResult = EV_Result.getText().toString();
        int i = currentResult.length();
        if (i > 0) {
            currentResult = currentResult.substring(0, i - 1);  // 将文本最后一个字符去掉
            if (currentResult.length() == 0) {  // 如果没有了内容，初始化计算器的各种值
                EV_Result.setText("0");
            } else {
                EV_Result.setText(currentResult);  // 显示新的文本
            }
        }
    }

    /**
     * 初始化控件
     */
    public void init() {
        EV_Result = findViewById(R.id.EV_Result);

        // 第一行
        Button Btn_C;  // 清空结果框
        Button Btn_Back;  // 返回
        Button Btn_ModuloDivision;  // 模除
        Button Btn_Division; // 除法
        // 第二行
        Button Btn_Num7;
        Button Btn_Num8;
        Button Btn_Num9;
        Button Btn_Multiplication;  // 乘发
        // 第三行
        Button Btn_Num4;
        Button Btn_Num5;
        Button Btn_Num6;
        Button Btn_Subtraction;  // 减法
        // 第四行
        Button Btn_Num1;
        Button Btn_Num2;
        Button Btn_Num3;
        Button Btn_Addition;  // 加法
        // 第五行
        Button Btn_Num0;
        Button Btn_DecimalPoint;  // 小数点
        Button Btn_Equal;  // 等于
        Btn_C = findViewById(R.id.Btn_C);
        Btn_Back = findViewById(R.id.Btn_Back);
        Btn_ModuloDivision = findViewById(R.id.Btn_ModuloDivision);
        Btn_Division = findViewById(R.id.Btn_Division);

        Btn_Num7 = findViewById(R.id.Btn_Num7);
        Btn_Num8 = findViewById(R.id.Btn_Num8);
        Btn_Num9 = findViewById(R.id.Btn_Num9);
        Btn_Multiplication = findViewById(R.id.Btn_Multiplication);

        Btn_Num4 = findViewById(R.id.Btn_Num4);
        Btn_Num5 = findViewById(R.id.Btn_Num5);
        Btn_Num6 = findViewById(R.id.Btn_Num6);
        Btn_Subtraction = findViewById(R.id.Btn_Subtraction);

        Btn_Num1 = findViewById(R.id.Btn_Num1);
        Btn_Num2 = findViewById(R.id.Btn_Num2);
        Btn_Num3 = findViewById(R.id.Btn_Num3);
        Btn_Addition = findViewById(R.id.Btn_Addition);

        Btn_Num0 = findViewById(R.id.Btn_Num0);
        Btn_DecimalPoint = findViewById(R.id.Btn_DecimalPoint);
        Btn_Equal = findViewById(R.id.Btn_Equal);

        Btn_C.setOnClickListener(this);
        Btn_Back.setOnClickListener(this);
        Btn_ModuloDivision.setOnClickListener(this);
        Btn_Division.setOnClickListener(this);
        Btn_Num7.setOnClickListener(this);
        Btn_Num8.setOnClickListener(this);
        Btn_Num9.setOnClickListener(this);
        Btn_Multiplication.setOnClickListener(this);
        Btn_Num4.setOnClickListener(this);
        Btn_Num5.setOnClickListener(this);
        Btn_Num6.setOnClickListener(this);
        Btn_Subtraction.setOnClickListener(this);
        Btn_Num1.setOnClickListener(this);
        Btn_Num2.setOnClickListener(this);
        Btn_Num3.setOnClickListener(this);
        Btn_Addition.setOnClickListener(this);
        Btn_Num0.setOnClickListener(this);
        Btn_DecimalPoint.setOnClickListener(this);
        Btn_Equal.setOnClickListener(this);
    }

}

七、总结

最后声明一下，我的项目文件模块名（module）是jsj，大家在做的时候记得更改一下，还有实现功能的时候按钮控件ID最好与声明的控件变量一致方便与修改。还有一点建立界面布局时采用EditText文本控件（输入文本框），不要采用TextView。否则后面在实际模拟器运行时会，
无法正常运行，强制退出，模拟器会出现 keeps stopping ，表示你计算器MainActivity.java 文件中，方法或者变量出现错误。

 

 以上总结的是我在编写中常出现的错误，希望能给大家带来帮助。感谢大家关注，有问题欢迎在下方留言。看到后我会一一解答。