Android设计计算器的UI页面

设计计算器的UI

技术要点: 简单的布局控件的使用。
设计思路:

  • 设计出几个计算器页面
  • 让这几个页面在同一个activity内来回跳转。
  • 重写返回键,使其功能变刷新activity,不然点击返回键会退出程序。

实现步骤:

  1. 简单计算器页面设计。
  2. 科学计算器页面设计。
  3. 程序计算器页面设计。
  4. 设计MainActivity.java代码,实现逻辑功能。

MainActivity.java代码:

package com.henu.CalcUI;

import androidx.appcompat.app.AppCompatActivity;

import android.content.Intent;
import android.os.Bundle;
import android.view.KeyEvent;
import android.view.View;
import android.widget.Button;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        Button but1 = (Button) findViewById(R.id.button);
        Button but2 = (Button) findViewById(R.id.button2);
        Button but3 = (Button) findViewById(R.id.button3);
        Button but4 = (Button) findViewById(R.id.button4);
        but1.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                setContentView(R.layout.simple);
            }
        });
        but2.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                setContentView(R.layout.science);
            }
        });
        but3.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                setContentView(R.layout.procedure);
            }
        });
        but4.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                System.exit(0);
            }
        });
    }
    //重写返回键,返回(刷新)主页面(因为只有一个Activity,不重写返回键会退出程序)
    @Override
    public boolean onKeyDown(int keyCode, KeyEvent event) {
        if(keyCode==KeyEvent.KEYCODE_BACK){
            Intent intent = new Intent(this, MainActivity.class);
            intent.setFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP);
            startActivity(intent);
            finish();
        }
        return true;
    }
}


简单计算器页面代码:

<?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:id="@+id/simple"

    android:layout_width="match_parent"
    android:layout_height="match_parent">

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

        <TextView
            android:layout_width="match_parent"
            android:layout_height="100dp"
            android:gravity="center|right"
            android:text="0"
            android:textSize="50sp"></TextView>

        <TableLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_margin="10dp"
            android:padding="0dp">

            <TableRow android:layout_weight="1">

                <Button
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:text="退格"
                    android:textSize="20sp"></Button>

                <Button
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:text="清除"
                    android:textSize="20sp"></Button>

                <Button
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:text="±"
                    android:textSize="20sp"></Button>

                <Button
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:text="+"
                    android:textSize="20sp"></Button>
            </TableRow>
            <TableRow android:layout_weight="1">

                <Button
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:text="7"
                    android:textSize="20sp"></Button>

                <Button
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:text="8"
                    android:textSize="20sp"></Button>

                <Button
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:text="9"
                    android:textSize="20sp"></Button>

                <Button
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:text="-"
                    android:textSize="20sp"></Button>
            </TableRow>
            <TableRow android:layout_weight="1">

                <Button
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:text="4"
                    android:textSize="20sp"></Button>

                <Button
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:text="5"
                    android:textSize="20sp"></Button>

                <Button
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:text="6"
                    android:textSize="20sp"></Button>

                <Button
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:text="*"
                    android:textSize="20sp"></Button>
            </TableRow>
            <TableRow android:layout_weight="1">

                <Button
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:text="1"
                    android:textSize="20sp"></Button>

                <Button
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:text="2"
                    android:textSize="20sp"></Button>

                <Button
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:text="3"
                    android:textSize="20sp"></Button>

                <Button
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:text="/"
                    android:textSize="20sp"></Button>
            </TableRow>
            <TableRow android:layout_weight="1">

                <Button
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:text="0"
                    android:textSize="20sp"></Button>

                <Button
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:text="."
                    android:textSize="20sp"></Button>

                <Button
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:text="1/x"
                    android:textSize="20sp"></Button>

                <Button
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:text="="
                    android:textSize="20sp"></Button>
            </TableRow>
        </TableLayout>
    </LinearLayout>
</LinearLayout>

科学计算器页面代码:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/science"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout

        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <TextView

            android:layout_width="match_parent"
            android:layout_height="100dp"
            android:gravity="center|right"
            android:text="0"
            android:textSize="50sp"></TextView>

        <TableLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="10dp"

            android:padding="0dp">

            <TableRow

                android:layout_width="match_parent"
                android:layout_height="wrap_content">

                <RadioGroup
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:orientation="horizontal">

                    <RadioButton
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_weight="1"
                        android:text="角度"
                        android:textSize="20dp"></RadioButton>

                    <RadioButton
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_weight="1"
                        android:text="弧度"
                        android:textSize="20dp"></RadioButton>

                    <RadioButton
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_weight="1"
                        android:text="梯度"
                        android:textSize="20dp"></RadioButton>
                </RadioGroup>
            </TableRow>
        </TableLayout>

        <TableLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="0dp"
            android:layout_weight="1"
            android:padding="0dp">

            <TableRow
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:padding="0dp">

                <Button

                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:text="SIN"></Button>

                <Button
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:text="COS"></Button>

                <Button
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:text="TAN"></Button>

                <Button
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:text="COT"></Button>
            </TableRow>

            <TableRow
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:padding="0dp">

                <Button

                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:text="ASIN"></Button>

                <Button
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:text="ACOS"></Button>

                <Button
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:text="ATAN"></Button>

                <Button
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:text="AOT"></Button>
            </TableRow>

            <TableRow
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_weight="1">

                <Button
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:text="SINH"></Button>

                <Button
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:text="COSH"></Button>

                <Button
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:text="TANH"></Button>

                <Button
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:text="COTH"></Button>
            </TableRow>

            <TableRow
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1">

                <Button
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:text="ASINH"></Button>

                <Button
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:text="ACOSH"></Button>

                <Button
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:text="ATANH"></Button>

                <Button
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:text="ACOTH"></Button>
            </TableRow>

            <TableRow
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1">

                <Button
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:text="LN"></Button>

                <Button
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:text="LOG10"></Button>

                <Button
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:text="N!"></Button>

                <Button
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:text="X^Y"></Button>
            </TableRow>

            <TableRow
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1">

                <Button
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:text="E^X"></Button>

                <Button
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:text="π"></Button>

                <Button
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:text="("></Button>

                <Button
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:text=")"></Button>
            </TableRow>

            <TableRow
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1">

                <Button
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:text="退格"></Button>

                <Button
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:text="清除"></Button>

                <Button
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:text="9"></Button>

                <Button
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:text="±"></Button>
            </TableRow>

            <TableRow
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1">

                <Button
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:text="7"></Button>

                <Button
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:text="8"></Button>

                <Button
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:text="9"></Button>

                <Button
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:text="-"></Button>
            </TableRow>

            <TableRow
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1">

                <Button
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:text="4"></Button>

                <Button
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:text="5"></Button>

                <Button
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:text="6"></Button>

                <Button
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:text="*"></Button>
            </TableRow>

            <TableRow
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1">

                <Button
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:text="1"></Button>

                <Button
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:text="2"></Button>

                <Button
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:text="3"></Button>

                <Button
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:text="/"></Button>
            </TableRow>

            <TableRow
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1">

                <Button
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:text="0"></Button>

                <Button
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:text="."></Button>

                <Button
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:text="1/x"></Button>

                <Button
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:text="="></Button>
            </TableRow>
        </TableLayout>
    </LinearLayout>
</LinearLayout>



程序计算器页面代码:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/procedure"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

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

        <TextView
            android:layout_width="match_parent"
            android:layout_height="100dp"
            android:gravity="center|right"
            android:text="0"
            android:textSize="50sp"></TextView>

        <TableLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_margin="10dp"
            android:layout_weight="1"
            android:padding="0dp">

            <TableRow android:layout_width="match_parent">

                <RadioGroup
                    android:layout_width="match_parent"
                    android:layout_weight="1"
                    android:orientation="horizontal">

                    <RadioButton
                        android:layout_width="wrap_content"
                        android:layout_height="match_parent"
                        android:layout_weight="1"
                        android:text="十六进制"
                        android:textSize="20dp"></RadioButton>

                    <RadioButton
                        android:layout_width="wrap_content"
                        android:layout_height="match_parent"
                        android:layout_weight="1"
                        android:text="十进制"
                        android:textSize="20dp"></RadioButton>

                    <RadioButton
                        android:layout_width="wrap_content"
                        android:layout_height="match_parent"
                        android:layout_weight="1"
                        android:text="八进制"
                        android:textSize="20dp"></RadioButton>

                    <RadioButton
                        android:layout_width="wrap_content"
                        android:layout_height="match_parent"
                        android:layout_weight="1"
                        android:text="二进制"
                        android:textSize="20dp" />
                </RadioGroup>
            </TableRow>

            <TableRow android:layout_width="match_parent">

                <RadioGroup
                    android:layout_width="match_parent"
                    android:layout_weight="1"
                    android:orientation="horizontal">

                    <RadioButton
                        android:layout_width="wrap_content"
                        android:layout_height="match_parent"
                        android:layout_weight="1"
                        android:text="八字节"
                        android:textSize="20dp"></RadioButton>

                    <RadioButton
                        android:layout_width="wrap_content"
                        android:layout_height="match_parent"
                        android:layout_weight="1"
                        android:text="四字节"
                        android:textSize="20dp"></RadioButton>

                    <RadioButton
                        android:layout_width="wrap_content"
                        android:layout_height="match_parent"
                        android:layout_weight="1"
                        android:text="二字节"
                        android:textSize="20dp"></RadioButton>

                    <RadioButton
                        android:layout_width="wrap_content"
                        android:layout_height="match_parent"
                        android:layout_weight="1"
                        android:text="单字节"
                        android:textSize="20dp" />
                </RadioGroup>
            </TableRow>

            <TableLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent">

                <TableRow
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content">

                    <Button
                        android:layout_weight="1"
                        android:text="NOT"
                        android:textSize="20dp"></Button>

                    <Button
                        android:layout_weight="1"
                        android:text="AND"
                        android:textSize="20dp"></Button>

                    <Button
                        android:layout_weight="1"
                        android:text="OR"
                        android:textSize="20dp"></Button>

                    <Button
                        android:layout_weight="1"
                        android:text="XOR"
                        android:textSize="20dp"></Button>
                </TableRow>

                <TableRow
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content">

                    <Button
                        android:layout_weight="1"
                        android:text="循环左移"
                        android:textSize="20dp"></Button>

                    <Button
                        android:layout_weight="1"
                        android:text="循环右移"
                        android:textSize="20dp"></Button>

                    <Button
                        android:layout_weight="1"
                        android:text="左移"
                        android:textSize="20dp"></Button>

                    <Button
                        android:layout_weight="1"
                        android:text="MOD"
                        android:textSize="20dp"></Button>
                </TableRow>

                <TableRow
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content">

                    <Button
                        android:layout_weight="1"
                        android:text="无符号右移"
                        android:textSize="20dp"></Button>

                    <Button
                        android:layout_weight="1"
                        android:text="有符号右移"
                        android:textSize="20dp"></Button>
                </TableRow>

                <TableRow
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="40dp">

                    <Button
                        android:layout_weight="1"
                        android:text="退格"
                        android:textSize="35dp"></Button>

                    <Button
                        android:layout_weight="1"
                        android:text="清除"
                        android:textSize="35dp"></Button>

                    <Button
                        android:layout_weight="1"
                        android:text="9"
                        android:textSize="35dp"></Button>

                    <Button
                        android:layout_weight="1"
                        android:text="±"
                        android:textSize="35dp"></Button>


                </TableRow>

                <TableRow
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content">

                    <Button
                        android:layout_weight="1"
                        android:text="6"
                        android:textSize="35dp"></Button>

                    <Button
                        android:layout_weight="1"
                        android:text="7"
                        android:textSize="35dp"></Button>

                    <Button
                        android:layout_weight="1"
                        android:text="8"
                        android:textSize="35dp"></Button>

                    <Button
                        android:layout_weight="1"
                        android:text="+"
                        android:textSize="35dp"></Button>


                </TableRow>

                <TableRow
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content">

                    <Button
                        android:layout_weight="1"
                        android:text="3"
                        android:textSize="35dp"></Button>

                    <Button
                        android:layout_weight="1"
                        android:text="4"
                        android:textSize="35dp"></Button>

                    <Button
                        android:layout_weight="1"
                        android:text="5"
                        android:textSize="35dp"></Button>

                    <Button
                        android:layout_weight="1"
                        android:text="-"
                        android:textSize="35dp"></Button>


                </TableRow>

                <TableRow
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content">

                    <Button
                        android:layout_weight="1"
                        android:text="0"
                        android:textSize="35dp"></Button>

                    <Button
                        android:layout_weight="1"
                        android:text="1"
                        android:textSize="35dp"></Button>

                    <Button
                        android:layout_weight="1"
                        android:text="2"
                        android:textSize="35dp"></Button>

                    <Button
                        android:layout_weight="1"
                        android:text="*"
                        android:textSize="35dp"></Button>


                </TableRow>

                <TableRow
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content">

                    <Button
                        android:layout_weight="1"
                        android:text="A"
                        android:textSize="35dp"></Button>

                    <Button
                        android:layout_weight="1"
                        android:text="B"
                        android:textSize="35dp"></Button>

                    <Button
                        android:layout_weight="1"
                        android:text="C"
                        android:textSize="35dp"></Button>

                    <Button
                        android:layout_weight="1"
                        android:text="/"
                        android:textSize="35dp"></Button>


                </TableRow>

                <TableRow
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content">

                    <Button
                        android:layout_weight="1"
                        android:text="D"
                        android:textSize="35dp"></Button>

                    <Button
                        android:layout_weight="1"
                        android:text="E"
                        android:textSize="35dp"></Button>

                    <Button
                        android:layout_weight="1"
                        android:text="F"
                        android:textSize="35dp"></Button>

                    <Button
                        android:layout_weight="1"
                        android:text="="
                        android:textSize="35dp"></Button>
                </TableRow>
            </TableLayout>
        </TableLayout>
    </LinearLayout>
</LinearLayout>

效果图:

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

注意 因为每个人设置的屏幕大小不同,显示会有所变化,这里我用的是6.67英寸。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值