devbox
盐析白兔
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

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

作者：盐析白兔 | 2024-03-12 08:32:23

赞

踩

android studio编写计算器布局

前言

此篇文章仅作为我的学习总结，结合我在学校所学，并参考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）输入显示部分

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3.     xmlns:app="http://schemas.android.com/apk/res-auto"
  4.     xmlns:tools="http://schemas.android.com/tools"
  5.     android:layout_width="match_parent"
  6.     android:layout_height="match_parent"
  7.     android:orientation="vertical"
  8.     tools:context=".MainActivity">
  9.  
  10.     <!--输入显示区-->
  11.     <TextView
  12.         android:layout_width="match_parent"
  13.         android:layout_height="0dp"
  14.         android:layout_weight="2"
  15.         android:background="#a8d67f"
  16.         android:gravity="bottom|right"
  17.         android:padding="10dp"
  18.         android:text="0"
  19.         android:textColor="@color/white"
  20.         android:textSize="30sp" />

（2）结果显示部分

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

（3）按键输入部分

  1. <!--按键输入区-->
  2.     <LinearLayout
  3.         android:layout_width="match_parent"
  4.         android:layout_height="0dp"
  5.         android:layout_weight="4">
  6.         <!--左侧按键区-->
  7.         <LinearLayout
  8.             android:layout_width="0dp"
  9.             android:layout_height="match_parent"
  10.             android:layout_weight="3"
  11.             android:background="#fefefe"
  12.             android:orientation="vertical">
  13.  
  14.             <!--按键第一行-->
  15.  
  16.             <LinearLayout
  17.                 android:layout_width="match_parent"
  18.                 android:layout_height="0dp"
  19.                 android:layout_weight="1"
  20.                 android:orientation="horizontal"
  21.                 android:padding="10dp"
  22.                 android:background="@drawable/circle_rectangle">
  23.  
  24.                 <Button
  25.                     android:id="@+id/clearTextView"
  26.                     android:layout_width="0dp"
  27.                     android:layout_height="match_parent"
  28.                     android:layout_weight="1"
  29.                     android:text="AC"
  30.                     android:textSize="30sp"
  31.                     android:layout_marginRight="10dp"
  32.                     android:textColor="@android:color/darker_gray"
  33.                     android:background="@android:color/transparent"
  34.                     />
  35.  
  36.                 <ImageButton
  37.                     android:id="@+id/backspace"
  38.                     android:layout_width="0dp"
  39.                     android:layout_height="match_parent"
  40.                     android:layout_weight="1"
  41.                     android:src="@drawable/backspace"
  42.                     android:background="@android:color/transparent"
  43.                     />
  44.  
  45.                 <Button
  46.                     android:layout_width="0dp"
  47.                     android:layout_height="match_parent"
  48.                     android:layout_weight="1"
  49.                     android:text="%"
  50.                     android:textSize="30sp"
  51.                     android:layout_marginLeft="10dp"
  52.                     android:textColor="@android:color/darker_gray"
  53.                     android:background="@android:color/transparent"
  54.                     />
  55.  
  56.             </LinearLayout>
  57.  
  58.             <!--按键第二行-->
  59.  
  60.             <LinearLayout
  61.                 android:layout_width="match_parent"
  62.                 android:layout_height="0dp"
  63.                 android:layout_weight="1"
  64.                 android:orientation="horizontal"
  65.                 android:padding="10dp">
  66.  
  67.                 <Button
  68.                     android:id="@+id/button_one"
  69.                     android:layout_width="0dp"
  70.                     android:layout_height="match_parent"
  71.                     android:layout_marginRight="10dp"
  72.                     android:layout_weight="1"
  73.                     android:background="@android:color/transparent"
  74.                     android:text="1"
  75.                     android:textColor="@color/black"
  76.                     android:textSize="30sp" />
  77.  
  78.                 <Button
  79.                     android:id="@+id/button_tow"
  80.                     android:layout_width="0dp"
  81.                     android:layout_height="match_parent"
  82.                     android:layout_weight="1"
  83.                     android:background="@android:color/transparent"
  84.                     android:text="2"
  85.                     android:textColor="@color/black"
  86.                     android:textSize="30sp" />
  87.  
  88.                 <Button
  89.                     android:id="@+id/button_three"
  90.                     android:layout_width="0dp"
  91.                     android:layout_height="match_parent"
  92.                     android:layout_marginLeft="10dp"
  93.                     android:layout_weight="1"
  94.                     android:background="@android:color/transparent"
  95.                     android:text="3"
  96.                     android:textColor="@color/black"
  97.                     android:textSize="30sp" />
  98.  
  99.             </LinearLayout>
  100.  
  101.             <!--按键第三行-->
  102.  
  103.             <LinearLayout
  104.                 android:layout_width="match_parent"
  105.                 android:layout_height="0dp"
  106.                 android:layout_weight="1"
  107.                 android:orientation="horizontal"
  108.                 android:padding="10dp">
  109.  
  110.                 <Button
  111.                     android:id="@+id/button_four"
  112.                     android:layout_width="0dp"
  113.                     android:layout_height="match_parent"
  114.                     android:layout_marginRight="10dp"
  115.                     android:layout_weight="1"
  116.                     android:background="@android:color/transparent"
  117.                     android:text="4"
  118.                     android:textColor="@color/black"
  119.                     android:textSize="30sp" />
  120.  
  121.                 <Button
  122.                     android:id="@+id/button_five"
  123.                     android:layout_width="0dp"
  124.                     android:layout_height="match_parent"
  125.                     android:layout_weight="1"
  126.                     android:background="@android:color/transparent"
  127.                     android:text="5"
  128.                     android:textColor="@color/black"
  129.                     android:textSize="30sp" />
  130.  
  131.                 <Button
  132.                     android:id="@+id/button_six"
  133.                     android:layout_width="0dp"
  134.                     android:layout_height="match_parent"
  135.                     android:layout_marginLeft="10dp"
  136.                     android:layout_weight="1"
  137.                     android:background="@android:color/transparent"
  138.                     android:text="6"
  139.                     android:textColor="@color/black"
  140.                     android:textSize="30sp" />
  141.  
  142.             </LinearLayout>
  143.  
  144.             <!--按键第四行-->
  145.  
  146.             <LinearLayout
  147.                 android:layout_width="match_parent"
  148.                 android:layout_height="0dp"
  149.                 android:layout_weight="1"
  150.                 android:orientation="horizontal"
  151.                 android:padding="10dp">
  152.  
  153.                 <Button
  154.                     android:id="@+id/button_seven"
  155.                     android:layout_width="0dp"
  156.                     android:layout_height="match_parent"
  157.                     android:layout_marginRight="10dp"
  158.                     android:layout_weight="1"
  159.                     android:background="@android:color/transparent"
  160.                     android:text="7"
  161.                     android:textColor="@color/black"
  162.                     android:textSize="30sp" />
  163.  
  164.                 <Button
  165.                     android:id="@+id/button_"
  166.                     android:layout_width="0dp"
  167.                     android:layout_height="match_parent"
  168.                     android:layout_weight="1"
  169.                     android:background="@android:color/transparent"
  170.                     android:text="8"
  171.                     android:textColor="@color/black"
  172.                     android:textSize="30sp" />
  173.  
  174.                 <Button
  175.                     android:id="@+id/button_nine"
  176.                     android:layout_width="0dp"
  177.                     android:layout_height="match_parent"
  178.                     android:layout_marginLeft="10dp"
  179.                     android:layout_weight="1"
  180.                     android:background="@android:color/transparent"
  181.                     android:text="9"
  182.                     android:textColor="@color/black"
  183.                     android:textSize="30sp" />
  184.  
  185.             </LinearLayout>
  186.  
  187.             <!--按键第五行-->
  188.  
  189.             <LinearLayout
  190.                 android:layout_width="match_parent"
  191.                 android:layout_height="0dp"
  192.                 android:layout_weight="1"
  193.                 android:orientation="horizontal"
  194.                 android:padding="10dp">
  195.  
  196.                 <Button
  197.                     android:layout_width="0dp"
  198.                     android:layout_height="match_parent"
  199.                     android:layout_marginRight="10dp"
  200.                     android:layout_weight="1"
  201.                     android:background="@android:color/transparent"
  202.                     android:textColor="@color/black"
  203.                     android:text="."
  204.                     android:textSize="30sp" />
  205.  
  206.                 <Button
  207.                     android:layout_width="0dp"
  208.                     android:layout_height="match_parent"
  209.                     android:layout_weight="1"
  210.                     android:background="@android:color/transparent"
  211.                     android:textColor="@color/black"
  212.                     android:text="0"
  213.                     android:textSize="30sp" />
  214.  
  215.                 <Button
  216.                     android:layout_width="0dp"
  217.                     android:layout_height="match_parent"
  218.                     android:layout_marginLeft="10dp"
  219.                     android:layout_weight="1"
  220.                     android:background="@android:color/transparent"
  221.                     android:textColor="@color/black"
  222.                     android:text="00"
  223.                     android:textSize="30sp" />
  224.  
  225.             </LinearLayout>

（4）圆角矩形的代码编写

在左侧项目结构栏点击res→drawable→右键→New→选择“Drawable Resource File”

修改File name为“circle_rectangle ”

修改Root element为“shape”

点击“OK”

 代码内容如下：

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <shape xmlns:android="http://schemas.android.com/apk/res/android"
  3.  
  4.     android:shape="rectangle"
  5.     >
  6.     <corners android:radius="50dp"/>
  7.  
  8.     <stroke
  9.         android:width="20px"
  10.         android:color="#001E90FF"/>
  11.  
  12.     <solid android:color="#F7F7F7"/>
  13.  
  14.     <padding
  15.         android:bottom="40dp"
  16.         android:left="40dp"
  17.         android:right="40dp"
  18.         android:top="40dp"
  19.         />
  20.  
  21.  
  22. </shape>

(5)backspace图形按键的编写

在左侧项目结构栏点击res→drawable→右键→New→选择“Vector Asset”

修改Name为“backspace”

点击“Clip art”

搜索“backspace”并选择你喜欢的图标

Size与Color选择自己 喜欢的大小与颜色

Opacity选择50%或者100%

点击“Finish”

至此才算完成了全部的界面布局代码的编写。

  

（6）效果图

四、完整代码

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3.     xmlns:app="http://schemas.android.com/apk/res-auto"
  4.     xmlns:tools="http://schemas.android.com/tools"
  5.     android:layout_width="match_parent"
  6.     android:layout_height="match_parent"
  7.     android:orientation="vertical"
  8.     tools:context=".MainActivity">
  9.  
  10.     <!--输入显示区-->
  11.     <TextView
  12.         android:layout_width="match_parent"
  13.         android:layout_height="0dp"
  14.         android:layout_weight="2"
  15.         android:background="#a8d67f"
  16.         android:gravity="bottom|right"
  17.         android:padding="10dp"
  18.         android:text="0"
  19.         android:textColor="@color/white"
  20.         android:textSize="30sp" />
  21.  
  22.     <!--结果显示区-->
  23.     <TextView
  24.         android:layout_width="match_parent"
  25.         android:layout_height="0dp"
  26.         android:layout_weight="1"
  27.         android:background="#72b780"
  28.         android:gravity="bottom|right"
  29.         android:padding="10dp"
  30.         android:text="0"
  31.         android:textColor="@color/white"
  32.         android:textSize="30sp" />
  33.  
  34.     <!--按键输入区-->
  35.     <LinearLayout
  36.         android:layout_width="match_parent"
  37.         android:layout_height="0dp"
  38.         android:layout_weight="4">
  39.         <!--左侧按键区-->
  40.         <LinearLayout
  41.             android:layout_width="0dp"
  42.             android:layout_height="match_parent"
  43.             android:layout_weight="3"
  44.             android:background="#fefefe"
  45.             android:orientation="vertical">
  46.  
  47.             <!--按键第一行-->
  48.  
  49.             <LinearLayout
  50.                 android:layout_width="match_parent"
  51.                 android:layout_height="0dp"
  52.                 android:layout_weight="1"
  53.                 android:orientation="horizontal"
  54.                 android:padding="10dp"
  55.                 android:background="@drawable/circle_rectangle">
  56.  
  57.                 <Button
  58.                     android:id="@+id/clearTextView"
  59.                     android:layout_width="0dp"
  60.                     android:layout_height="match_parent"
  61.                     android:layout_weight="1"
  62.                     android:text="AC"
  63.                     android:textSize="30sp"
  64.                     android:layout_marginRight="10dp"
  65.                     android:textColor="@android:color/darker_gray"
  66.                     android:background="@android:color/transparent"
  67.                     />
  68.  
  69.                 <ImageButton
  70.                     android:id="@+id/backspace"
  71.                     android:layout_width="0dp"
  72.                     android:layout_height="match_parent"
  73.                     android:layout_weight="1"
  74.                     android:src="@drawable/backspace"
  75.                     android:background="@android:color/transparent"
  76.                     />
  77.  
  78.                 <Button
  79.                     android:layout_width="0dp"
  80.                     android:layout_height="match_parent"
  81.                     android:layout_weight="1"
  82.                     android:text="%"
  83.                     android:textSize="30sp"
  84.                     android:layout_marginLeft="10dp"
  85.                     android:textColor="@android:color/darker_gray"
  86.                     android:background="@android:color/transparent"
  87.                     />
  88.  
  89.             </LinearLayout>
  90.  
  91.             <!--按键第二行-->
  92.  
  93.             <LinearLayout
  94.                 android:layout_width="match_parent"
  95.                 android:layout_height="0dp"
  96.                 android:layout_weight="1"
  97.                 android:orientation="horizontal"
  98.                 android:padding="10dp">
  99.  
  100.                 <Button
  101.                     android:id="@+id/button_one"
  102.                     android:layout_width="0dp"
  103.                     android:layout_height="match_parent"
  104.                     android:layout_marginRight="10dp"
  105.                     android:layout_weight="1"
  106.                     android:background="@android:color/transparent"
  107.                     android:text="1"
  108.                     android:textColor="@color/black"
  109.                     android:textSize="30sp" />
  110.  
  111.                 <Button
  112.                     android:id="@+id/button_tow"
  113.                     android:layout_width="0dp"
  114.                     android:layout_height="match_parent"
  115.                     android:layout_weight="1"
  116.                     android:background="@android:color/transparent"
  117.                     android:text="2"
  118.                     android:textColor="@color/black"
  119.                     android:textSize="30sp" />
  120.  
  121.                 <Button
  122.                     android:id="@+id/button_three"
  123.                     android:layout_width="0dp"
  124.                     android:layout_height="match_parent"
  125.                     android:layout_marginLeft="10dp"
  126.                     android:layout_weight="1"
  127.                     android:background="@android:color/transparent"
  128.                     android:text="3"
  129.                     android:textColor="@color/black"
  130.                     android:textSize="30sp" />
  131.  
  132.             </LinearLayout>
  133.  
  134.             <!--按键第三行-->
  135.  
  136.             <LinearLayout
  137.                 android:layout_width="match_parent"
  138.                 android:layout_height="0dp"
  139.                 android:layout_weight="1"
  140.                 android:orientation="horizontal"
  141.                 android:padding="10dp">
  142.  
  143.                 <Button
  144.                     android:id="@+id/button_four"
  145.                     android:layout_width="0dp"
  146.                     android:layout_height="match_parent"
  147.                     android:layout_marginRight="10dp"
  148.                     android:layout_weight="1"
  149.                     android:background="@android:color/transparent"
  150.                     android:text="4"
  151.                     android:textColor="@color/black"
  152.                     android:textSize="30sp" />
  153.  
  154.                 <Button
  155.                     android:id="@+id/button_five"
  156.                     android:layout_width="0dp"
  157.                     android:layout_height="match_parent"
  158.                     android:layout_weight="1"
  159.                     android:background="@android:color/transparent"
  160.                     android:text="5"
  161.                     android:textColor="@color/black"
  162.                     android:textSize="30sp" />
  163.  
  164.                 <Button
  165.                     android:id="@+id/button_six"
  166.                     android:layout_width="0dp"
  167.                     android:layout_height="match_parent"
  168.                     android:layout_marginLeft="10dp"
  169.                     android:layout_weight="1"
  170.                     android:background="@android:color/transparent"
  171.                     android:text="6"
  172.                     android:textColor="@color/black"
  173.                     android:textSize="30sp" />
  174.  
  175.             </LinearLayout>
  176.  
  177.             <!--按键第四行-->
  178.  
  179.             <LinearLayout
  180.                 android:layout_width="match_parent"
  181.                 android:layout_height="0dp"
  182.                 android:layout_weight="1"
  183.                 android:orientation="horizontal"
  184.                 android:padding="10dp">
  185.  
  186.                 <Button
  187.                     android:id="@+id/button_seven"
  188.                     android:layout_width="0dp"
  189.                     android:layout_height="match_parent"
  190.                     android:layout_marginRight="10dp"
  191.                     android:layout_weight="1"
  192.                     android:background="@android:color/transparent"
  193.                     android:text="7"
  194.                     android:textColor="@color/black"
  195.                     android:textSize="30sp" />
  196.  
  197.                 <Button
  198.                     android:id="@+id/button_"
  199.                     android:layout_width="0dp"
  200.                     android:layout_height="match_parent"
  201.                     android:layout_weight="1"
  202.                     android:background="@android:color/transparent"
  203.                     android:text="8"
  204.                     android:textColor="@color/black"
  205.                     android:textSize="30sp" />
  206.  
  207.                 <Button
  208.                     android:id="@+id/button_nine"
  209.                     android:layout_width="0dp"
  210.                     android:layout_height="match_parent"
  211.                     android:layout_marginLeft="10dp"
  212.                     android:layout_weight="1"
  213.                     android:background="@android:color/transparent"
  214.                     android:text="9"
  215.                     android:textColor="@color/black"
  216.                     android:textSize="30sp" />
  217.  
  218.             </LinearLayout>
  219.  
  220.             <!--按键第五行-->
  221.  
  222.             <LinearLayout
  223.                 android:layout_width="match_parent"
  224.                 android:layout_height="0dp"
  225.                 android:layout_weight="1"
  226.                 android:orientation="horizontal"
  227.                 android:padding="10dp">
  228.  
  229.                 <Button
  230.                     android:layout_width="0dp"
  231.                     android:layout_height="match_parent"
  232.                     android:layout_marginRight="10dp"
  233.                     android:layout_weight="1"
  234.                     android:background="@android:color/transparent"
  235.                     android:textColor="@color/black"
  236.                     android:text="."
  237.                     android:textSize="30sp" />
  238.  
  239.                 <Button
  240.                     android:layout_width="0dp"
  241.                     android:layout_height="match_parent"
  242.                     android:layout_weight="1"
  243.                     android:background="@android:color/transparent"
  244.                     android:textColor="@color/black"
  245.                     android:text="0"
  246.                     android:textSize="30sp" />
  247.  
  248.                 <Button
  249.                     android:layout_width="0dp"
  250.                     android:layout_height="match_parent"
  251.                     android:layout_marginLeft="10dp"
  252.                     android:layout_weight="1"
  253.                     android:background="@android:color/transparent"
  254.                     android:textColor="@color/black"
  255.                     android:text="00"
  256.                     android:textSize="30sp" />
  257.  
  258.             </LinearLayout>
  259.  
  260.  
  261.  
  262.  
  263.  
  264.  
  265.  
  266.  
  267.         </LinearLayout>
  268.  
  269.         <!--右侧按键区域-->
  270.         <LinearLayout
  271.             android:layout_width="0dp"
  272.             android:layout_height="match_parent"
  273.             android:layout_weight="1"
  274.             android:background="@drawable/circle_rectangle"
  275.             android:orientation="vertical"
  276.             android:padding="10dp">
  277.  
  278.             <Button
  279.                 android:id="@+id/divideBtn"
  280.                 android:layout_width="match_parent"
  281.                 android:layout_height="0dp"
  282.                 android:layout_weight="1"
  283.                 android:background="@android:color/transparent"
  284.                 android:text="÷"
  285.                 android:textColor="@color/black"
  286.                 android:textSize="30sp" />
  287.  
  288.             <Button
  289.                 android:id="@+id/multiplyBtn"
  290.                 android:layout_width="match_parent"
  291.                 android:layout_height="0dp"
  292.                 android:layout_weight="1"
  293.                 android:background="@android:color/transparent"
  294.                 android:text="×"
  295.                 android:textColor="@color/black"
  296.                 android:textSize="30sp" />
  297.  
  298.             <Button
  299.                 android:id="@+id/minusBtn"
  300.                 android:layout_width="match_parent"
  301.                 android:layout_height="0dp"
  302.                 android:layout_weight="1"
  303.                 android:background="@android:color/transparent"
  304.                 android:text="-"
  305.                 android:textColor="@color/black"
  306.                 android:textSize="30sp" />
  307.  
  308.             <Button
  309.                 android:id="@+id/addBtn"
  310.                 android:layout_width="match_parent"
  311.                 android:layout_height="0dp"
  312.                 android:layout_weight="1"
  313.                 android:background="@android:color/transparent"
  314.                 android:text="+"
  315.                 android:textColor="@color/black"
  316.                 android:textSize="30sp" />
  317.  
  318.             <Button
  319.                 android:id="@+id/equalBtn"
  320.                 android:layout_width="match_parent"
  321.                 android:layout_height="0dp"
  322.                 android:layout_weight="1"
  323.                 android:background="@android:color/transparent"
  324.                 android:text="="
  325.                 android:textColor="@color/black"
  326.                 android:textSize="30sp"
  327.  
  328.                 />
  329.  
  330.  
  331.         </LinearLayout>
  332.  
  333.     </LinearLayout>
  334.  
  335.  
  336. </LinearLayout>

此处仅为activity_main.xml的完整代码，并不是整套界面布局的代码，还须要返回观看“圆角矩形的代码编写”与“backspace图形按键的编写”

五、链接

此链接为圆角矩形的参考代码链接： 

https://blog.csdn.net/xiaohelan/article/details/105514130

此链接为视频链接：

https://www.bilibili.com/video/BV1xB4y1v7SV/?spm_id_from=333.337.search-card.all.click&vd_source=cfc1b990f3941ebdfe1544befb7cc3fb

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/盐析白兔/article/detail/223227
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号