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

回顾上一讲内容

下面是我们要做的计算器的主界面，红框表示界面实际上由几个框垂直堆叠而成。

去掉红框里的内容，仅保留框：

对应代码如下：

<?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"></LinearLayout>

   <LinearLayout
       android:layout_width="match_parent"
       android:layout_height="40dp"></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
       android:layout_width="match_parent"
       android:layout_height="75dp"></LinearLayout>

</LinearLayout>

效果图：

往第一个框里添加内容

添加前：

添加后：

看起来效果图上变化不大，不过我们一一解析一下上面添加代码的意图：

<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" />

• • 
    
• 第一行，TextView表示添加一个文本控件，用于显示文字，也就是计算得到的最终结果。
• 第二行，给整个控件设置一个id：resultTv，方便后面代码里找到整个控件，修改显示的文字信息。
• 第三行和第四行，表示当前控件宽和高，和父控件保持一致，也就是把父控件撑满。
• 第五行，设置当前控件和父控件之间的边距，让它和父控件之前保持一点距离，这样看起来更美观一些。
• 第六行，background属性，用来设置控件的背景颜色。
• 第七行，gravity用来设置文字显示时的对齐方式，end表示靠后，bottom表示靠下。
• 第八行，padding，用来设置控件内部的边距，也是为了美化显示效果，具体值可以自己修改看看。
• 第九行，textColor设置文字颜色。
• 第十行，textSize设置字体大小。
  • 
    

上面解释了很多，但是可能还是比较抽象，因为上面并没有把计算结果显示出来，文字的颜色、大小等都看不出来。我们试着把文字显示出来，看下效果。

下图增加了text属性，就可以看到显示出来的文字了。

修改一下文字大小（textSize属性修改为55sp），可以看到文字明显变大。

修改一下文字的颜色（textColor属性修改为#FF0000），可以看到文字颜色变成了红色。

小结

本讲介绍添加显示结果的界面部分，因为按照我们的设计，用户没按计算器按钮时结果部分是空白的，所以我们最终还是还原一下代码。完整代码如下：

<?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"></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
        android:layout_width="match_parent"
        android:layout_height="75dp"></LinearLayout>

</LinearLayout>