Android简单美观计算器（界面部分）

被南宫问雅摸过虾头

已于 2023-10-02 23:03:10 修改

阅读量8k

点赞数 12

分类专栏：开发笔记文章标签： android java xml

于 2022-03-18 14:21:37 首次发布

这里是被南宫问雅摸了虾头！

本文链接：https://blog.csdn.net/weixin_59249304/article/details/123551370

版权

开发笔记专栏收录该内容

2 篇文章 1 订阅

订阅专栏

本文介绍了如何使用Android Studio构建一个简单的计算器应用，重点在于布局设计，包括LinearLayout和GridLayout的使用，以及通过XML定义圆形和圆角按钮的样式。布局中包含了信息显示区和计算按钮区，按钮采用自定义的圆形和椭圆形样式，实现了基本的计算功能展示。

摘要由CSDN通过智能技术生成

一问题描述：

总体任务：制作一个简单的计算器，实现计算功能。本部分内容：完成计算器的界面制作。

二解题思路:

布局细分线框图：

采用LinearLayout布局内包含一个LinearLayout用于显示信息，一个GridLayout放置按钮的方式实现布局。

GridLayout布局：

如果要实现行合并的布局效果，采用GridLayout布局是最简单轻松的实现方式。

常用属性：

android:orientation: 设置水平或垂直显示

android:columnCount : 设置列数

android:rowCount : 设置行数

子控件属性：

android:layout_rowSpan: 纵向跨合并几列

android:layout_columSpan: 横向合并几行

android:layout_gravity: 在父组件的位置

注意：设置android:layout_rowSpan: 属性后需要设置android:layout_gravity:才可以正常显示

圆形按钮与圆角按钮：

在res/drawable目录下新建一个样式文件.xml文件,定义形状样式，然后在布局代码中调用就好。

调用：android:background="@drawable/布局文件名"

shape: 定义视图的形状，可以为矩形，椭圆形，线形，环形。

stroke: 定义形状边界

solid: 定义形状背景

size: 定义形状大小

corners: 定义圆角度数

android:topLeftRadius

android:topRightRadius

android:bottomRightRadius

android:bottomLeftRadius

三界面代码：

了解了需要用到的内容后，我们开始构建布局代码部分了

round_button.xml圆形按钮布局文件：

在drawable目录下新建一个样式文件.xml文件,我的命名为round_button.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <stroke
        android:color="#F8F8F9"
        android:width="3dip"/>
    <solid
        android:color="#FCFCFC"/>
    <size
        android:width="62dp"
        android:height="62dp"/>
</shape>

效果图：

elliptical_button.xml圆角按钮布局文件：

在drawable目录下新建一个样式文件.xml文件,我的命名为elliptical_button.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<stroke
    android:color="#749FF4"
    android:width="3dip"/>
<solid
    android:color="#0A59F7"/>
<size
    android:width="62dp"
    android:height="124dp"/>
<corners
    android:topLeftRadius="40dp"
    android:topRightRadius="40dp"
    android:bottomRightRadius="40dp"
    android:bottomLeftRadius="40dp"/>
</shape>

效果图：

activit_main.xml布局代码：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:layout_marginLeft="35dp">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:layout_marginTop="30dp">
        <TextView
            android:id="@+id/tex_M"
            android:layout_width="20dp"
            android:layout_height="20dp"
            android:text="M"
            android:textSize="20sp"
            android:layout_marginLeft="5dp"/>
        <TextView
            android:id="@+id/tex_count"
            android:layout_width="match_parent"
            android:layout_height="60dp"
            android:layout_marginTop="10dp"
            android:text="1024×2"
            android:gravity="right"
            android:textSize="35sp"/>
        <TextView
            android:id="@+id/result"
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:layout_marginTop="10dp"
            android:textSize="30sp"
            android:text="2048"
            android:gravity="right"/>

    </LinearLayout>
    <GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:rowCount="6"
        android:columnCount="4"
        android:layout_marginTop="20dp">

        <Button
            android:id="@+id/btn_MC"
            android:layout_width="75dp"
            android:layout_height="75dp"
            android:text="MC"
            android:textSize="20sp"
            android:layout_margin="5dp"
            android:background="@drawable/round_button"/>
        <Button
            android:id="@+id/btn_MAdd"
            android:layout_width="75dp"
            android:layout_height="75dp"
            android:text="M+"
            android:textSize="20sp"
            android:layout_margin="5dp"
            android:background="@drawable/round_button"/>
        <Button
            android:id="@+id/btn_MSub"
            android:layout_width="75dp"
            android:layout_height="75dp"
            android:text="M-"
            android:textSize="20sp"
            android:layout_margin="5dp"
            android:background="@drawable/round_button"/>
        <Button
            android:id="@+id/btn_MResult"
            android:layout_width="75dp"
            android:layout_height="75dp"
            android:text="MR"
            android:textSize="20sp"
            android:layout_margin="5dp"
            android:background="@drawable/round_button"/>

        <Button
            android:id="@+id/btn_clear"
            android:layout_width="75dp"
            android:layout_height="75dp"
            android:text="C"
            android:textColor="#0A59F7"
            android:textSize="30sp"
            android:layout_margin="5dp"
            android:background="@drawable/round_button"/>
        <Button
            android:id="@+id/btn_div"
            android:layout_width="75dp"
            android:layout_height="75dp"
            android:text="÷"
            android:textColor="#0A59F7"
            android:textSize="30sp"
            android:layout_margin="5dp"
            android:background="@drawable/round_button"/>
        <Button
            android:id="@+id/btn_mul"
            android:layout_width="75dp"
            android:layout_height="75dp"
            android:text="×"
            android:textColor="#0A59F7"
            android:textSize="30sp"
            android:layout_margin="5dp"
            android:background="@drawable/round_button"/>
        <Button
            android:id="@+id/btn_del"
            android:layout_width="75dp"
            android:layout_height="75dp"
            android:text="⋘"
            android:textColor="#0A59F7"
            android:textSize="30sp"
            android:layout_margin="5dp"
            android:background="@drawable/round_button"/>

        <Button
            android:id="@+id/btn_seven"
            android:layout_width="75dp"
            android:layout_height="75dp"
            android:text="7"
            android:textSize="30sp"
            android:layout_margin="5dp"
            android:background="@drawable/round_button"/>
        <Button
            android:id="@+id/btn_eight"
            android:layout_width="75dp"
            android:layout_height="75dp"
            android:text="8"
            android:textSize="30sp"
            android:layout_margin="5dp"
            android:background="@drawable/round_button"/>
        <Button
            android:id="@+id/btn_nine"
            android:layout_width="75dp"
            android:layout_height="75dp"
            android:text="9"
            android:textSize="30sp"
            android:layout_margin="5dp"
            android:background="@drawable/round_button"/>
        <Button
            android:id="@+id/btn_sub"
            android:layout_width="75dp"
            android:layout_height="75dp"
            android:text="━"
            android:textColor="#0A59F7"
            android:textSize="30sp"
            android:layout_margin="5dp"
            android:background="@drawable/round_button"/>

        <Button
            android:id="@+id/btn_four"
            android:layout_width="75dp"
            android:layout_height="75dp"
            android:text="4"
            android:textSize="30sp"
            android:layout_margin="5dp"
            android:background="@drawable/round_button"/>
        <Button
            android:id="@+id/btn_five"
            android:layout_width="75dp"
            android:layout_height="75dp"
            android:text="5"
            android:textSize="30sp"
            android:layout_margin="5dp"
            android:background="@drawable/round_button"/>
        <Button
            android:id="@+id/btn_six"
            android:layout_width="75dp"
            android:layout_height="75dp"
            android:text="6"
            android:textSize="30sp"
            android:layout_margin="5dp"
            android:background="@drawable/round_button"/>
        <Button
            android:id="@+id/btn_add"
            android:layout_width="75dp"
            android:layout_height="75dp"
            android:text="+"
            android:textColor="#0A59F7"
            android:textSize="30sp"
            android:layout_margin="5dp"
            android:background="@drawable/round_button"/>

        <Button
            android:id="@+id/btn_one"
            android:layout_width="75dp"
            android:layout_height="75dp"
            android:text="1"
            android:textSize="30sp"
            android:layout_margin="5dp"
            android:background="@drawable/round_button"/>
        <Button
            android:id="@+id/btn_two"
            android:layout_width="75dp"
            android:layout_height="75dp"
            android:text="2"
            android:textSize="30sp"
            android:layout_margin="5dp"
            android:background="@drawable/round_button"/>
        <Button
            android:id="@+id/btn_three"
            android:layout_width="75dp"
            android:layout_height="75dp"
            android:text="3"
            android:textSize="30sp"
            android:layout_margin="5dp"
            android:background="@drawable/round_button"/>
        <Button
            android:id="@+id/btn_result"
            android:text="="
            android:textSize="30sp"
            android:textColor="#FCFCFC"
            android:layout_width="75dp"
            android:layout_height="150dp"
            android:layout_rowSpan="2"
            android:layout_gravity="fill"
            android:layout_margin="5dp"
            android:background="@drawable/elliptical_button"/>

        <Button
            android:id="@+id/btn_percent"
            android:layout_width="75dp"
            android:layout_height="75dp"
            android:text="%"
            android:textSize="30sp"
            android:layout_margin="5dp"
            android:background="@drawable/round_button"/>
        <Button
            android:id="@+id/btn_zero"
            android:layout_width="75dp"
            android:layout_height="75dp"
            android:text="0"
            android:textSize="30sp"
            android:layout_margin="5dp"
            android:background="@drawable/round_button"/>
        <Button
            android:id="@+id/btn_point"
            android:layout_width="75dp"
            android:layout_height="75dp"
            android:text="."
            android:textSize="30sp"
            android:layout_margin="5dp"
            android:background="@drawable/round_button"/>
    </GridLayout>
</LinearLayout>