当前位置:   article > 正文

Android studio 实现计算机界面_android studio计算机界面开发

android studio计算机界面开发

大家好!今天我将向大家介绍如何在Android Studio中创建一个漂亮的计算器布局。通过这个教程,你将学会如何利用Android Studio的功能来设计用户界面,从而实现一个令人印象深刻的计算器界面。

首先,我们来看一下最终的效果图。在这个计算器界面中,我们使用了LinearLayout来排列各个元素,并利用权重(weight)属性来确定元素的大小。

接下来,让我们来看一下代码块(.xml文件)。这段代码是实现计算器界面的全部内容。

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <!-- 主布局,垂直排列 -->
  3. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  4. android:layout_width="match_parent"
  5. android:layout_height="match_parent"
  6. android:orientation="vertical">
  7. <!-- 显示计算结果的文本视图 -->
  8. <TextView
  9. android:id="@+id/txt1"
  10. android:layout_width="match_parent"
  11. android:layout_height="0dp"
  12. android:layout_weight="1"></TextView>
  13. <!-- 包含所有按钮的布局,水平排列 -->
  14. <LinearLayout
  15. android:layout_width="match_parent"
  16. android:layout_height="0dp"
  17. android:layout_weight="2"
  18. android:orientation="horizontal">
  19. <!-- 包含数字和运算符按钮的布局,垂直排列 -->
  20. <LinearLayout
  21. android:layout_width="0dp"
  22. android:layout_height="match_parent"
  23. android:layout_weight="3"
  24. android:orientation="vertical">
  25. <!-- 第一行按钮,包含CE、除法和乘法按钮 -->
  26. <LinearLayout
  27. android:layout_width="match_parent"
  28. android:layout_height="0dp"
  29. android:layout_weight="1"
  30. android:orientation="horizontal">
  31. <Button
  32. android:id="@+id/btn_CE"
  33. android:layout_width="0dp"
  34. android:layout_height="match_parent"
  35. android:layout_weight="1"
  36. android:text="CE"></Button>
  37. <Button
  38. android:id="@+id/btn_CHU"
  39. android:layout_width="0dp"
  40. android:layout_height="match_parent"
  41. android:layout_weight="1"
  42. android:text="÷"></Button>
  43. <Button
  44. android:id="@+id/btn_CHENG"
  45. android:layout_width="0dp"
  46. android:layout_height="match_parent"
  47. android:layout_weight="1"
  48. android:text="×"></Button>
  49. </LinearLayout>
  50. <!-- 第二行按钮,包含7、8、9数字按钮 -->
  51. <LinearLayout
  52. android:layout_width="match_parent"
  53. android:layout_height="0dp"
  54. android:layout_weight="1"
  55. android:orientation="horizontal">
  56. <Button
  57. android:id="@+id/btn_7"
  58. android:layout_width="0dp"
  59. android:layout_height="match_parent"
  60. android:layout_weight="1"
  61. android:text="7"></Button>
  62. <Button
  63. android:id="@+id/btn_8"
  64. android:layout_width="0dp"
  65. android:layout_height="match_parent"
  66. android:layout_weight="1"
  67. android:text="8"></Button>
  68. <Button
  69. android:id="@+id/btn_9"
  70. android:layout_width="0dp"
  71. android:layout_height="match_parent"
  72. android:layout_weight="1"
  73. android:text="9"></Button>
  74. </LinearLayout>
  75. <!-- 第三行按钮,包含4、5、6数字按钮 -->
  76. <LinearLayout
  77. android:layout_width="match_parent"
  78. android:layout_height="0dp"
  79. android:layout_weight="1"
  80. android:orientation="horizontal">
  81. <Button
  82. android:id="@+id/btn_4"
  83. android:layout_width="0dp"
  84. android:layout_height="match_parent"
  85. android:layout_weight="1"
  86. android:text="4"></Button>
  87. <Button
  88. android:id="@+id/btn_5"
  89. android:layout_width="0dp"
  90. android:layout_height="match_parent"
  91. android:layout_weight="1"
  92. android:text="5"></Button>
  93. <Button
  94. android:id="@+id/btn_6"
  95. android:layout_width="0dp"
  96. android:layout_height="match_parent"
  97. android:layout_weight="1"
  98. android:text="6"></Button>
  99. </LinearLayout>
  100. <!-- 第四行按钮,包含1、2、3数字按钮 -->
  101. <LinearLayout
  102. android:layout_width="match_parent"
  103. android:layout_height="0dp"
  104. android:layout_weight="1"
  105. android:orientation="horizontal">
  106. <Button
  107. android:id="@+id/btn_1"
  108. android:layout_width="0dp"
  109. android:layout_height="match_parent"
  110. android:layout_weight="1"
  111. android:text="1"></Button>
  112. <Button
  113. android:id="@+id/btn_2"
  114. android:layout_width="0dp"
  115. android:layout_height="match_parent"
  116. android:layout_weight="1"
  117. android:text="2"></Button>
  118. <Button
  119. android:id="@+id/btn_3"
  120. android:layout_width="0dp"
  121. android:layout_height="match_parent"
  122. android:layout_weight="1"
  123. android:text="3"></Button>
  124. </LinearLayout>
  125. <!-- 最后一行的按钮,包含0和小数点按钮 -->
  126. <LinearLayout
  127. android:layout_width="match_parent"
  128. android:layout_height="0dp"
  129. android:layout_weight="1"
  130. android:orientation="horizontal">
  131. <Button
  132. android:id="@+id/btn_0"
  133. android:layout_width="0dp"
  134. android:layout_height="match_parent"
  135. android:layout_weight="2"
  136. android:text="0"></Button>
  137. <Button
  138. android:id="@+id/btn_DIAN"
  139. android:layout_width="0dp"
  140. android:layout_height="match_parent"
  141. android:layout_weight="1"
  142. android:text="."></Button>
  143. </LinearLayout>
  144. </LinearLayout>
  145. <!-- 包含运算符按钮的布局,垂直排列 -->
  146. <LinearLayout
  147. android:layout_width="0dp"
  148. android:layout_height="match_parent"
  149. android:layout_weight="1"
  150. android:orientation="vertical">
  151. <!-- 包含C、加法、减法和等于按钮的布局 -->
  152. <LinearLayout
  153. android:layout_width="match_parent"
  154. android:layout_height="match_parent"
  155. android:orientation="vertical">
  156. <Button
  157. android:id="@+id/btn_C"
  158. android:layout_width="match_parent"
  159. android:layout_height="0dp"
  160. android:layout_weight="1"
  161. android:text="C"></Button>
  162. <Button
  163. android:id="@+id/btn_JIA"
  164. android:layout_width="match_parent"
  165. android:layout_height="0dp"
  166. android:layout_weight="1"
  167. android:text="+"></Button>
  168. <Button
  169. android:id="@+id/btn_JIAN"
  170. android:layout_width="match_parent"
  171. android:layout_height="0dp"
  172. android:layout_weight="1"
  173. android:text="-"></Button>
  174. <Button
  175. android:id="@+id/btn_DENGYU"
  176. android:layout_width="match_parent"
  177. android:layout_height="0dp"
  178. android:layout_weight="2"
  179. android:text="="></Button>
  180. </LinearLayout>
  181. </LinearLayout>
  182. </LinearLayout>
  183. </LinearLayout>

最后,希望这个教程对大家有所帮助!

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

闽ICP备14008679号