Android新手入门2016（7）--布局

布局，这个在服务端变成是没有的，也是服务端的人学习客户端的一道坎吧。

以前用cocos2d-x写小游戏的时候就是这个非常难懂，或者能用，但是理解不多的话，很难写出好的布局，难以适合商业化的应用。

游戏的布局有点像用photoshop画画的感觉，现有一个场景的概念，就像一个画布，然后上面分一层一层，可以单独某一层进行操作，显示的时候，可以认为画面是从下往上一层一层堆上去。层里面有很多精灵，精灵就是我们看到的那些会动的人物，建筑，怪什么的。这大概是cocos2d的设计思想吧。

我一直觉得，学编程，一定要想理解人家的设计思想，理解了，跟着思想走，一路顺畅。不能理解，就是一个大迷宫，这里一扇门，那边一扇门，好像哪里都能去，都能通向成功，但是有些路径看似能实现，实际上事半功倍。同样，我们做功能，做应用，也是一样，先想好思路，然后才能动手去做。或许这就是大学的时候学的概要设计吧，一直这么做，可能当年学的理论还是有点用的。

暂时先这么想，先在去看看别人的博客吧。最后，可能在后面几个文章里面，再回过头来总结对照一下。

布局是什么？

布局是Android程序中基础的容器，可以把各种控件放进去，自动按特定的方式拍板。

布局方式有哪些？

LinearLayout, RleativeLayout, TableLayout, FrameLayout 等，可以通过XML方式类声明，或者编码的方式。通过XML声明的方式能够更好地让代码和视图分离，修改后不需要编译，更容易支持不同屏幕大小。

说到这里，大家应该明白，布局单独存在的时候是看不到的，需要通过其他组件来表现。既然是入门，一上来就跟我说这些抽象的东西，是在难以费解。

RleativeLayout：

先来几个能看到的，我想想，按钮、文字、输入框，应该是比较简单，能看得到的。我们先来看看能看见的东西吧。

先看看布局文件，文件放在哪里了？来看看工程结构说明

布局文件在res/layout/目录下面，activity_hello_world.xml.这里顺便说明一下，文件名必须用小写，不同单词用‘_’分开。

打开文件，点击图中的Graphical Layout可以看到一个可视化的布局界面，可以选择不同组件，然后拖拽摆放。

我们可以看到已经有一个字符串在上面了“Hello world!”。现在加多一些文字，按钮，输入框看看吧。这样应该能显示出布局的作用。

拖拽的时候，会出现各种对齐其他组件的提示。我随便摆，然后就很乱了。

随便拉了一些按钮和文字，拉过去就会显示出来，本来想拉个输入框的，但是好像报错。可能有些操作不对。不过今天的主题的布局，所以先不研究文本、按钮这些控件的细节。运行程序后界面跟上图一样，就不上图了。

上图的文本，按钮乱糟糟的，是我随意拉的，好像放在哪里就哪里了。我们先看看布局文件的xml代码如何。为什么会是这样的。

<!--相对布局方式，能够指定子元素相对于父元素或者其他子元素的位置。这个是比较常用的布局之一。
xmlns:android xml的命名空间，通过这里告诉Eclipse相关的属性
android:layout_width 当前这个布局的宽度，android:layout_height 当前这个布局的高度，都是match_parent，即是填充父元素，这个布局已经是最外层了，所以填充了整个手机屏幕。
tools:context 关联指定的activity，一般情况下一个布局文件可以在多个地方被用到，这么写是声明特定的上下文。如果指定了主题还可以进行渲染。
-->
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="${relativePackage}.${activityClass}" >
	<!-- 文本， "wrap_content"自适应大小，强制显示文本的全部内容。这里宽高都是了。
	android:text文本内容，这里填了@string，指示内容在res/values/strings.xml内，名称为hello_wrold的属性。
	android:id定义这个TestView的id。会在R.java内生成对应的id。写java代码的时候，可以通过R.id.textView2来获取这个文本
	-->
    <TextView 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/hello_world" android:id="@+id/textView2"/>
	<!-- 这是手动拉进来的TextView，跟上面的差不多，还多了一些属性。 layout_alignParentLeft相对于父控件是否左对齐，
	layout_below设置了为某个控件的下面。这里填了在textView2下面。
	android:text这里直接填了文本的内容，可以通过id，配在strings.xml中-->
    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_below="@+id/textView2"
        android:text="TextView" />

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_below="@+id/textView1"
        android:layout_marginTop="16dp"
        android:text="Button" />

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@+id/button1"
        android:layout_marginLeft="27dp"
        android:layout_toRightOf="@+id/button1"
        android:text="Button" />

    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBaseline="@+id/button2"
        android:layout_alignBottom="@+id/button2"
        android:layout_toRightOf="@+id/button2"
        android:text="Button" />

    <TextView
        android:id="@+id/textView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignRight="@+id/button2"
        android:layout_below="@+id/button1"
        android:layout_marginRight="32dp"
        android:layout_marginTop="23dp"
        android:text="Medium Text"
        android:textAppearance="?android:attr/textAppearanceMedium" />

    <TextView
        android:id="@+id/textView4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/button3"
        android:layout_below="@+id/textView3"
        android:text="Large Text"
        android:textAppearance="?android:attr/textAppearanceLarge" />

</RelativeLayout>

通过这个xml文件，我们可以看到layout组件跟TextView、Button，有很多相似的地方。

他们有很多共同的属性，这些属性是有默认值的，很多是可以不配置的。而且很多，建议用到了再去百度。

总结一下，现在接触到的属性主要有显示的文字内容，摆放位置，以及id。

现在有了初步的印象，可以看看其他的布局了方式了（差点忘了今天是说布局的，呃。。。）

LinearLayout：

直接把RleativeLayout改了，layout_alignParentLeft这些明显是相对位置的属性，全部提警告说不合法了。把那些明显是相对布局的东西删除掉后。

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
<!--android:orientation为方向属性，vertical为垂直排列。所以layout组件会把所有的子元素，都竖直排列出来。-->	 
    <TextView 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/hello_world" android:id="@+id/textView2"/>
	 
    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/text1" />

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" 
        android:text="@string/text2" />

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" 
        android:text="@string/text3" />

    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/text4" />

    <TextView
        android:id="@+id/textView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"  
        android:text="@string/text5" />

    <TextView
        android:id="@+id/textView4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" 
        android:text="@string/text6"  />

</LinearLayout>

可以看到，很整齐了，竖着拍成一排了。

TableLayout：

感觉上这个布局就跟HTML的table一样，把所有的组件弄成一个一个的表格。

它的元素分成一行一行的，TableRow。再下面才是具体的一个个元素。子元素的宽度是不可控的，高度可以根据自身变化。

 
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">
  
<!--用TableRow来分成一行一行的。-->
        <TableRow 
            android:id="@+id/tableRow1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" >

            <Button
                android:id="@+id/button4"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Button1" />

            <Button
                android:id="@+id/button5"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Button2" />

            <Button
                android:id="@+id/button7"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Button3" />
 

        </TableRow>

        <TableRow
            android:id="@+id/tableRow2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" >

            <TextView
                android:id="@+id/textView5"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="TextView" />

            <TextView
                android:id="@+id/textView6"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="TextView" />

            <TextView
                android:id="@+id/textView7"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Large Text"
                android:textAppearance="?android:attr/textAppearanceLarge" />

            

        </TableRow>

        <TableRow
            android:id="@+id/tableRow3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" >

            <TextView
                android:id="@+id/textView9"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="TextView" />

            <TextView
                android:id="@+id/textView10"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Large Text"
                android:textAppearance="?android:attr/textAppearanceLarge" />

            <Button
                android:id="@+id/button8"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Button" />
 

        </TableRow>

        <TableRow
            android:id="@+id/tableRow4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" >
        </TableRow> 

</TableLayout>

FrameLayout：

所有的子元素将会固定在屏幕的左上角;不能为FrameLayout中的一个子元素指定一个位置。但可以通过子控件自身控制其位置。后一个子元素将会直接在前一个子元素之上进行覆盖填充，把它们部份或全部挡住(除非后一个子元素是透明的)。此布局通常用于游戏或者处理一些画廊程序。

从下图可以看出，三个按钮都被叠加在一起了，

 
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">
  

 
      <Button
          android:id="@+id/button4"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:text="Button1" />

      <Button
          android:id="@+id/button5"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:text="Button2" />

      <Button
          android:id="@+id/button7"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:text="Button3" />

</FrameLayout>

布局暂时就说到这里，因为是入门，准确来说是让我自己入门。没必要深究，最重要是了解layout是什么，有个大致了解，会用，这才是学习的第一步。建议大家把代码复制到自己的Eclipse上面看看，能够理解更深入。