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 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上面看看,能够理解更深入。