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

创建计算器工程

1. 1. 
      
2. 打开Android Studio
   
3. 创建工程-点击上图“New Project”
   选择“Empty Activity”，然后点击“Next”
   
4. 设置项目基本信息
   可以参考我下面的设置，也可以保持默认设置不变，对于“Save Location”设置一个存放工程的目录即可。
   最后点击“Finish”。
   4. 成品如下：
   
   1. 
      

打开界面文件

res/layout/activity_main.xml

点击右上角“Split”，切换显示模式，这样可以一边看代码，一遍看效果：

回顾我们的目标

下图是我们最终要做出来的计算器的界面。

那如何做呢？ 我们一步步来看。

怎么做？

初学者看到这个界面上有这么多东西，可能不知道该怎么下手，所以呢，我们需要化繁为简。简化，简化，再简化。

1. 1. 
      
2. 下图我标了红框
   整个界面，其实就是由这几个红框像积木一样搭起来的。
   
3. 先把红框里的内容去掉
   
4. 最后把所有的框都去掉
   这就是我们的起点线。
   
   1. 
      

回到我们的工程

res/layout/activity_main.xml

1. 删除上面代码，替换成下面代码：

<?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:background="#EE181818"​​用于设置容器的背景颜色，其中​​EE181818​​我们称之为色值，想详细了解的，可以看看下面网站，就会有个基本概念了：​​色值网站​​

2. 增加6个子容器

1） 每个子容器的代码样例如下：

• • 
    
• ​​android:layout_width​​​设置宽度，​​match_parent​​表示和父容器一样宽；
• ​​android:layout_height​​设置高度，单位是dp，这个具体含义暂不展开，自己可以去写写看，就能感知到这个单位的含义。
  • 
    

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

2） 添加6个

完整代码如下：

<?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>

效果图：

下一讲，我们继续介绍往子容器里添加内容。