上一篇文章中主要介绍了ui的控件,这里就学习下布局吧。android的基本布局在layout下主要如图:
从上图可以看出有FrameLayout(单帧布局),LinearLayout(线性布局),TableLayout(表格布局),RelativeLayout(相对布局),GridLayout(网格布局)等。具体的布局样式,在上图中也可以简单地看出来。
这里先介绍下android的View,ViewGroup,Layout。
1、View:代表了用户界面的一块可绘制区域。每个View在屏幕上占据一个矩形区域。在这个区域内,View对象负责图形绘制和事件处理。View是小控件widgets和ViewGroup的父类。
2、ViewGroup:ViewGroup是一个特殊的View对象,其功能是装载和管理一组View和ViewGroup。它是一组容器,允许控件放置其中,并提供对控件的管理。
3、Layout:即使上面讲的布局,它是ViewGroup的子类。
如下图,一个容器可以放置和管理多个容器和控件,其中可以把VIewGroup看作布局,View看作控件即可。
基本上了解了布局和控件的关系,那么就来一个一个地学习下了。
1、LinearLayout(线性布局):控件成线性排列,水平或者垂直方向上。还是来个例子吧,新建LayoutTest工程,并且修改代码如下:
其中android:orientation表示的就是水平还是垂直排列,这里是垂直:vertical,那么水平就是:horizontal了。如下图:
接着看一下android:layout_gravity属性,不过只有在horizontal的时候才可以在垂直方向上有效,同样vertical的时候在水平方向上有效,修改各个button的这个属性,分别为top,center,和bottom,运行效果如下:
接着学习android:layout_weight属性,这个主要是控制控件比例大小的,比如有一个EditText用来输入内容,一个button用来发送,那么一般button包含了Send内容后,其余的都是由EditText来填充了,修改代码如下:
这里是比例1:0,也就是button在send这个字被包含了除外的地方都是edit_text的,如果比例为1:1,那么如下图所示,平分width:
2、RelativeLayout(相对布局):通过相对定位的方式让控件出现在布局的任何位置。也就是前面我们学习的所有都是基于相对布局的。相信有些属性也有所了解了,这里再讲解下。这里编写5个button,分别位于左上,右上,中间,左下,右下,代码如下:
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="horizontal"> <Button android:id="@+id/button1" android:text="Button1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentLeft="true" /> <Button android:id="@+id/button2" android:text="Button2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentRight="true" /> <Button android:id="@+id/button3" android:text="Button3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" /> <Button android:id="@+id/button4" android:text="Button4" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentLeft="true" android:layout_alignParentBottom="true"/> <Button android:id="@+id/button5" android:text="Button5" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_alignParentRight="true"/> </RelativeLayout>效果如下:
由上述代码可知,android:layout_alignParentLeft,android:layout_alignParentRight,android:layout_alignParentBottom,android:layout_centerInParent这么几个属性,其实也很好理解,就是在父view的左边,右边,下面,中间,当然还有Top了,这里默认是Top的。
当然这些都是相对于父view的,那么控件也是可以相对于控件的,这里都相对于center的button,代码如下:
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="horizontal"> <Button android:id="@+id/button1" android:text="Button1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_above="@id/button3" android:layout_toLeftOf="@id/button3"/> <Button android:id="@+id/button2" android:text="Button2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_above="@id/button3" android:layout_toRightOf="@id/button3"/> <Button android:id="@+id/button3" android:text="Button3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" /> <Button android:id="@+id/button4" android:text="Button4" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@id/button3" android:layout_toLeftOf="@id/button3"/> <Button android:id="@+id/button5" android:text="Button5" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@id/button3" android:layout_toRightOf="@id/button3"/> </RelativeLayout>
效果如下所示:
其实相对的布局还是比较容易理解的,就是相对于一个控件或者View的位置,有左,右,上,下之分,只要ui设计好了,就可以充分利用了。
3、FrameLayout(单帧布局):这个用得比较少,是后面的控件覆盖前面的空间。
4、TableLayout(表格布局):用表格的方式来排列控件,表格当然有行列之分,应该尽量让每一行拥有相同的列数,这样比较简单,下面看一个登陆界面的例子:
<?xml version="1.0" encoding="utf-8"?> <TableLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="horizontal"> <TableRow> <TextView android:layout_height="wrap_content" android:textSize="20sp" android:text="用户名"/> <EditText android:id="@+id/Account" android:layout_height="wrap_content" android:hint="请输入用户名"/> </TableRow> <TableRow> <TextView android:layout_height="wrap_content" android:textSize="20sp" android:text="密码"/> <EditText android:id="@+id/password" android:layout_height="wrap_content" android:hint="请输入密码"/> </TableRow> <TableRow> <Button android:id="@+id/login" android:text="登陆" android:layout_span="2" android:layout_width="wrap_content" android:layout_height="wrap_content" /> </TableRow> </TableLayout>
效果如下:
从代码可以得之,TableLayout是由很多的TableRow组成,每一个TableRow表示一行,这一行可以有许多的子元素控件组成,从上图可知,这里分了3行,两列。其中android:layout_span表示登陆按钮占了两列,所以可以和1、2两行对齐。这里明显看出来右边还有很多的空余空间,显得格格不入,所以这里可以使用android:stretchColumns 属性,该属性表示的是如果表格不能占满控件,那么指定的那列拉伸到占满表格为止。修改代码添加android:stretchColumns=1,表示把第2列拉伸,代码如下:
<?xml version="1.0" encoding="utf-8"?> <TableLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:stretchColumns="1"> <TableRow> <TextView android:layout_height="wrap_content" android:textSize="20sp" android:text="用户名"/> <EditText android:id="@+id/Account" android:layout_height="wrap_content" android:hint="请输入用户名"/> </TableRow> <TableRow> <TextView android:layout_height="wrap_content" android:textSize="20sp" android:text="密码"/> <EditText android:id="@+id/password" android:layout_height="wrap_content" android:hint="请输入密码"/> </TableRow> <TableRow> <Button android:id="@+id/login" android:text="登陆" android:layout_span="2" android:layout_width="wrap_content" android:layout_height="wrap_content" /> </TableRow> </TableLayout>效果如下所示:
这样,基本上登陆界面就很漂亮了。
关于布局基本上就这些了,匆匆写完这篇文章,然后整理东西,准备回家了。明天就是年三十了,新的一年希望可以把android学习完,然后再写几个app,多钻研设计模式,架构,android源码,以及linux。好了,今年的博客基本上到此结束了。
2016,新的开始,加油!^_^
附:参考《第一行代码》