设计计算器的UI
技术要点: 简单的布局控件的使用。
设计思路:
- 设计出几个计算器页面
- 让这几个页面在同一个activity内来回跳转。
- 重写返回键,使其功能变刷新activity,不然点击返回键会退出程序。
实现步骤:
- 简单计算器页面设计。
- 科学计算器页面设计。
- 程序计算器页面设计。
- 设计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英寸。