初识Android的界面UI

这一小节，我们通过开发一个简单的程序，来了解Android一些UI控件的使用方法。
准备开发的程序界面如下图1所示。界面上有3个控件，最上面是一个输入框，输入框下面是一个按钮，最下面是一个文本信息显示。程序要实现的功能逻辑是，当我们在最上面的输入框中输入一段文字，如“123”后，点击输入框下面的按钮，在最下面文本信息显示控件上，会显示输入的这段文字“123”。好了，让我们开干吧！

图1

• 创建一个APP程序，工程名为FristUI，创建步骤及各选项如下图2~图6所示。
  
  图2

  
  图3
  说明：选择通过ADT来创建activity

  
  图4

  
  图5

  
  图6

• 创建好的程序中，我们看一下程序自动生成的布局文件activity_main.xml，文件中已自动生成了一个文本信息控件TextView，如下图7中红色标示所示。
  
  图7

• 我们按照程序要完成界面样式，在界面上增加输入框和按钮。修改activity_main.xml文件，如下图8所示。
  
  图8
  说明：
  1）第11~14行代码，是增加的输入框代码；
  2）第16~20行代码，是增加的按钮代码；
  3）第22~26行代码，是原来就有的文本信息空间TextView，我们给它增加了一个id；

• 运行程序，我们看到程序界面样式如下图9所示。三个控件都重叠在一起，看上去乱糟糟的。我看一下界面布局文件activity_main.xml，看看问题出在哪里？
  
  图9

• 问题就出在布局类型上面。现在的布局文件时自动生成的，布局类型为RelativeLayout，我们修改activity_main.xml文件代码，将布局类型由RelativeLayout改为LinearLayout，修改代码如下图10红色表示所示。
  
  图10
  说明：
  1）第1行和第29行代码，修改布局类型由RelativeLayout改为LinearLayout
  2）第10行代码，增加对布局LinearLayout布局类型的一个属性说明

• 重新运行程序，显示效果如下图11所示。我们看到界面已经我们设计的界面一模一样了。为什么更改了一下布局类型，就会变好呢？这涉及到布局类型的使用问题，我们单独一节来说明，现在暂时不管它。那么至此，程序已经按照界面设计的要求开发好了。接下来要实现程序的功能逻辑了。
  
  图11

• 修改程序的活动文件MainActivity.java，修改onCreate()方法，并增加onClick()方法，如下图12所示。
  
  图12
  说明：
  1）第13行代码，增加了监听器onClickListener接口
  2）第20~28行代码，改写了onCreate()方法，获取界面上的三个控件id，并为按钮控件增加了监听
  3）第31~40行代码，实现了onClick()方法，当按钮被点击时，该方法中的逻辑将被触发

• 重新运行程序，程序展示如下图13的界面，在最上面的输入框中输入一段文字，如“123”后，点击输入框下面的按钮，在最下面文本信息显示控件上，会显示输入的这段文字“123”。这和我们设计的逻辑功能实现一致。好了，大功告成！（:
  
  图13

---

扫描下面二维码，关注yun哥的微信公众号“yunge2000”，了解更多内容

扫描下面二维码，加yun哥微信号“yunge2000wx”，和yun哥直接开聊