0
点赞
收藏
分享

微信扫一扫

开发一个安卓App-计算器-绘制界面-4

年夜雪 2022-01-30 阅读 40


回顾总体目标

计算器界面

开发一个安卓App-计算器-绘制界面-4_控件

回顾上一讲内容

1、计算器界面完成分割后,由如下几个红框部分堆叠而成

开发一个安卓App-计算器-绘制界面-4_android_02

2、上一讲介绍了如何完成第二个红框,最终效果图

开发一个安卓App-计算器-绘制界面-4_控件_03

本讲内容

本讲介绍如何完成第三个红框

开发一个安卓App-计算器-绘制界面-4_android_04

这一讲要稍微复杂一点,主要是因为对比上一讲,里面要放的东西多了。上一讲只放一个东西,这一讲要放四个东西。

不过内容是相似的,所以只要懂了从0到1,然后从1到十、百、千万,也就不是事了。

写代码之前,先对这个界面做下分析:可以在一个横向的布局容器里放入四个控件,让四个控件平均平分所有的空间。

基于上述分析,可以采用线性布局LinearLayout,布局方向为横向,然后各个子控件通过设置layout_weight来实现平分空间的效果。

先看看第一个控件(按钮7)的实现代码:

开发一个安卓App-计算器-绘制界面-4_android_05

<TextView
android:id="@+id/sevenBtn"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginStart="15dp"
android:layout_marginTop="10dp"
android:layout_marginEnd="15dp"
android:layout_marginBottom="10dp"
android:layout_weight="1"
android:background="#0a0a0a"
android:gravity="center"
android:text="7"
android:textColor="#FFFFFF"
android:textSize="30sp" />

代码解析:


  • 第一行,TextView表示添加一个文本控件。
  • 第二行,给整个控件设置一个id:sevenBtn,方便后面代码里找到整个控件,让用户点击时能有反应。
  • 第三行,表示当前控件宽,0dp表示由父控件自动计算,这个主要是因为我们将使用layout_weight属性来实现子控件平分父控件空间。
  • 第四行,表示当前控件高,和父控件保持一致,也就是把父控件撑满。
  • 第五行,layout_marginStart,设置当前控件距离父控件的左边距。
  • 第六行,layout_marginTop,设置当前控件距离父控件的上边距。
  • 第七行,layout_marginEnd,设置当前控件距离父控件的右边距。
  • 第八行,layout_marginBottom,设置当前控件距离父控件的下边距。
  • 第九行,layout_weight,设置划分控件空间的比重,值越大分得越多。
  • 第十行,background属性,用来设置控件的背景颜色。
  • 第十一行,gravity用来设置文字显示时的对齐方式,center表示居中。
  • 第十二行,text设置显示的文字信息。
  • 第十三行,textColor设置文字颜色。
  • 第十四行,textSize设置字体大小。
    后面8和9按钮,代码和前面的按钮7类似,仅仅text属性和id属性不一样
    开发一个安卓App-计算器-绘制界面-4_安卓_06
    开发一个安卓App-计算器-绘制界面-4_android_07
    最后面的加号按钮,跟前面的按钮差别则要大一些,主要是背景色和文字颜色不一样。
    差异之处,我在下图红框中标出来了,对应属性为:background和textColor,设置的值和前面不一样。
    开发一个安卓App-计算器-绘制界面-4_android_08

页面完整代码

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#EE181818"
android:orientation="vertical">

<LinearLayout
android:layout_width="match_parent"
android:layout_height="120dp">

<TextView
android:id="@+id/resultTv"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="10dp"
android:background="#0a0a0a"
android:gravity="end|bottom"
android:padding="10dp"
android:textColor="#FFFFFF"
android:textSize="25sp" />
</LinearLayout>

<LinearLayout
android:layout_width="match_parent"
android:layout_height="40dp">

<TextView
android:id="@+id/clearBtn"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginStart="15dp"
android:layout_marginEnd="15dp"
android:background="#0a0a0a"
android:gravity="center"
android:text="C"
android:textColor="#FFFFFF"
android:textSize="30sp" />
</LinearLayout>

<LinearLayout
android:layout_width="match_parent"
android:layout_height="75dp">

<TextView
android:id="@+id/sevenBtn"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginStart="15dp"
android:layout_marginTop="10dp"
android:layout_marginEnd="15dp"
android:layout_marginBottom="10dp"
android:layout_weight="1"
android:background="#0a0a0a"
android:gravity="center"
android:text="7"
android:textColor="#FFFFFF"
android:textSize="30sp" />

<TextView
android:id="@+id/eightBtn"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginStart="15dp"
android:layout_marginTop="10dp"
android:layout_marginEnd="15dp"
android:layout_marginBottom="10dp"
android:layout_weight="1"
android:background="#0a0a0a"
android:gravity="center"
android:text="8"
android:textColor="#FFFFFF"
android:textSize="30sp" />

<TextView
android:id="@+id/nineBtn"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginStart="15dp"
android:layout_marginTop="10dp"
android:layout_marginEnd="15dp"
android:layout_marginBottom="10dp"
android:layout_weight="1"
android:background="#0a0a0a"
android:gravity="center"
android:text="9"
android:textColor="#FFFFFF"
android:textSize="30sp" />

<TextView
android:id="@+id/addBtn"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginStart="15dp"
android:layout_marginTop="10dp"
android:layout_marginEnd="15dp"
android:layout_marginBottom="10dp"
android:layout_weight="1"
android:background="#FFFFFF"
android:gravity="center"
android:text="+"
android:textColor="#000000"
android:textSize="30sp" />
</LinearLayout>

<LinearLayout
android:layout_width="match_parent"
android:layout_height="75dp"></LinearLayout>

<LinearLayout
android:layout_width="match_parent"
android:layout_height="75dp"></LinearLayout>

<LinearLayout
android:layout_width="match_parent"
android:layout_height="75dp"></LinearLayout>

</LinearLayout>

开发一个安卓App-计算器-绘制界面-4_边距_09



举报

相关推荐

0 条评论