Android移动开发计算器界面

举措提高

已于 2024-10-03 22:18:21 修改

阅读量355

点赞数 3

文章标签：前端

于 2024-09-25 19:48:24 首次发布

本文链接：https://blog.csdn.net/m0_74174723/article/details/142531251

版权

一、创建新项目Calculator

二、创建表格中每行的样式

在res/values/styles.xml中创建名为rowStyle的样式。（注意：如果在res/values/中未找到styles.xml,可如下图直接创建一个，styles.xml代码如下）

    <style name="rowStyle">
        <item name="android:layout_weight">1</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:layout_width">wrap_content</item>
    </style>

三、创建表格中按钮的样式

在上面res/values/styles.xml中添加即可

 <style name="btnStyle">
        <item name="android:layout_height">match_parent</item>
        <item name="android:layout_width">wrap_content</item>
        <item name="android:textSize">20sp</item>
    </style>

四、放置界面控件

<TableLayout>：这是布局的根元素，用于创建一个表格，其子元素（即<TableRow>）将作为表格的行。android:layout_width和android:layout_height都设置为match_parent，意味着这个表格将填充其父容器的整个宽度和高度。android:stretchColumns="*"指示所有列都应该平均分配额外的空间（如果有的话）。
<TableRow>：这些是<TableLayout>的子元素，代表表格中的行。每行都通过style="@style/rowStyle"应用了一个样式，这个样式在代码中未定义，但可以假设它包含了一些通用的行样式属性（如内边距、背景色等）。此外，第一行（tr_one）还通过android:layout_marginTop="200dp"设置了顶部的外边距，这可能会将这一行相对于其父容器顶部推开200dp的距离。
<Button>：这些是<TableRow>的子元素，代表表格中的按钮。每个按钮都通过style="@style/btnStyle"应用了一个样式，这个样式同样在代码中未定义，但可以假设它包含了一些通用的按钮样式属性（如大小、内边距、文字颜色等）。每个按钮还通过android:text属性设置了显示的文本，这些文本对应于计算器上常见的按钮标签（如数字、运算符等）。注意，第一行中的某些按钮使用了非标准字符（如←、_等），这可能意味着这些按钮在应用程序中有特殊的用途或功能。
android:layout_span：在最后一行中，两个按钮（0和=）都使用了android:layout_span="2"属性。这个属性指定了该按钮应该横跨的列数。由于这个表格默认有四列，android:layout_span="2"意味着这些按钮将横跨两列，使得它们看起来比其他按钮更宽。这通常用于创建较大的按钮或布局上的特殊元素。

定义了一个简单的表格布局，包含五行和四列按钮，这些按钮可能被用于一个计算器的用户界面。

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:stretchColumns="*">
    <TableRow
        android:id="@+id/tr_one"
        style="@style/rowStyle"
        android:layout_marginTop="200dp">
        <Button
            style="@style/btnStyle"
            android:text="c"/>
        <Button
            style="@style/btnStyle"
            android:text="←"/>
        <Button
            style="@style/btnStyle"
            android:text="+"/>
        <Button
            style="@style/btnStyle"
            android:text="_"/></TableRow>
    <TableRow
        android:id="@+id/tr_two"
        style="@style/rowStyle">
        <Button
            style="@style/btnStyle"
            android:text="7"/>
        <Button
            style="@style/btnStyle"
            android:text="8"/>
        <Button
            style="@style/btnStyle"
            android:text="g"/>
        <Button
            style="@style/btnStyle"
            android:text="x"/>
    </TableRow>
    <TableRow
        android:id="@+id/tr_three"
        style="@style/rowStyle">
        <Button
            style="@style/btnStyle"
            android:text="6"/>
        <Button
            style="@style/btnStyle"
            android:text="5"/>
        <Button
            style="@style/btnStyle"
            android:text="4"/>
        <Button
            style="@style/btnStyle"
            android:text="/"/>
    </TableRow>
    <TableRow
        android:id="@+id/tr_four"
        style="@style/rowStyle">
        <Button
            style="@style/btnStyle"
            android:text="1"/>
        <Button
            style="@style/btnStyle"
            android:text="2"/>
        <Button
            style="@style/btnStyle"
            android:text="3"/>
        <Button
            style="@style/btnStyle"
            android:text="."/>
    </TableRow>
    <TableRow
        android:id="@+id/tr_five"
        style="@style/rowStyle">
        <Button
            style="@style/btnStyle"
            android:layout_span="2"
            android:text="0"/>
        <Button
            style="@style/btnStyle"
            android:layout_span="2"
            android:text="="/>
    </TableRow>
</TableLayout>

五、MainActivity代码

package com.example.calculator;


import android.os.Bundle;
import androidx.appcompat.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity {

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

    }
}

六、运行效果界面图