【Android】安卓野路子学习项目之Android计算器（一）——界面布局

m0_70857716

已于 2023-09-30 09:51:20 修改

阅读量1.9k

点赞数 1

CC 4.0 BY-SA版权

文章标签：学习

于 2023-09-30 01:11:36 首次发布

本文链接：https://blog.csdn.net/m0_70857716/article/details/133418475

本文记录了使用Android Studio创建一个计算器应用的过程，包括新建工程、界面结构划分、布局代码填充，涉及输入显示、结果展示和按键输入部分的设计。通过创建圆角矩形和backspace图形按键，实现了计算器的基本界面效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

此篇文章仅作为我的学习总结，结合我在学校所学，并参考B站up主Ezralin的视频边学边做，文章末尾附上原视频链接，在此也感谢up的视频，让我学会了很多的android知识。

圆角矩形参考站内作者：jackiesky1206的文章

使用软件：Android studio 的 2022.3.1 Patch 1 版本

一、新建工程

点击“New Project”新建一个项目文件

在新窗口中选择“Empty Views Activity”并点击“Next”

然后修改“Name”为“CalculatorSecon”，修改项目的保存路径（save location）此处我的项目路径为D:\AndroidProject\CalculatorSecon 然后修改“Language”为“Java”最后点击Finish。到此新建工程完成。（因为我使用的是Android Studio 的 2022.3.1 版本，所以新建项目与up视频中的不同）

新建项目完成之后，现实如下：

二、结构划分

up的视频中将计算器界面分为了三部分从上到下依次为：

输入显示部分

结果显示部分

按键输入部分

三、布局代码填充

接下来开始写代码的布局，首先先点击“activity_main.xml”文件然后点击“Split”，如果找不到“activity_main.xml”文件，也可以打开左侧项目结构栏res→layout→activity_main.xml

Tips：接下来的activity_main.xml的主体代码将分段展示，若看不太懂结构的同学可直接跳转至第四部分完整代码。

（1）输入显示部分

<?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=".MainActivity">

    <!--输入显示区-->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="2"
        android:background="#a8d67f"
        android:gravity="bottom|right"
        android:padding="10dp"
        android:text="0"
        android:textColor="@color/white"
        android:textSize="30sp" />

（2）结果显示部分

 <!--结果显示区-->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:background="#72b780"
        android:gravity="bottom|right"
        android:padding="10dp"
        android:text="0"
        android:textColor="@color/white"
        android:textSize="30sp" />

（3）按键输入部分

<!--按键输入区-->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="4">
        <!--左侧按键区-->
        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="3"
            android:background="#fefefe"
            android:orientation="vertical">

            <!--按键第一行-->

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="1"
                android:orientation="horizontal"
                android:padding="10dp"
                android:background="@drawable/circle_rectangle">

                <Button
                    android:id="@+id/clearTextView"
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:text="AC"
                    android:textSize="30sp"
                    android:layout_marginRight="10dp"
                    android:textColor="@android:color/darker_gray"
                    android:background="@android:color/transparent"
                    />

                <ImageButton
                    android:id="@+id/backspace"
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:src="@drawable/backspace"
                    android:background="@android:color/transparent"
                    />

                <Button
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:text="%"
                    android:textSize="30sp"
                    android:layout_marginLeft="10dp"
                    android:textColor="@android:color/darker_gray"
                    android:background="@android:color/transparent"
                    />

            </LinearLayout>

            <!--按键第二行-->

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="1"
                android:orientation="horizontal"
                android: