首页 > 代码库 > .Net码农学Android---五分钟了解布局

.Net码农学Android---五分钟了解布局

2024-07-09 17:16:51   222人阅读

在android中应用的界面是以xml来组织的，这一点和WPF相似，通过配置xml文件我们可以灵活的构建出你自己想要的界面。

而在所有的xml界面文件中，根节点必须是布局，即先有布局，然后在布局中组织控件或嵌套布局，android中的布局有5种，熟悉各种布局的使用对我们以后开发中更好的组织界面大有益处，以下简单介绍。

  • TableLayout

表格布局，就是类似我们在网页中以表格来组织控件的布局。以N行N列的形式排列出相应的控件。

 1  <TableLayout 2         android:layout_width="wrap_content" 3         android:layout_height="wrap_content" 4         android:layout_alignLeft="@+id/textView1" 5         android:layout_centerHorizontal="true" 6         android:layout_centerVertical="true" > 7  8         <TableRow 9             android:id="@+id/tableRow1"10             android:layout_width="wrap_content"11             android:layout_height="wrap_content" >12 13             <Button14                 android:layout_width="wrap_content"15                 android:layout_height="wrap_content"16                 android:text="1行1列" />17 18             <Button19                 android:layout_width="wrap_content"20                 android:layout_height="wrap_content"21                 android:text="1行2列" />22         </TableRow>23 24         <TableRow25             android:id="@+id/tableRow2"26             android:layout_width="wrap_content"27             android:layout_height="wrap_content" >28 29             <Button30                 android:layout_width="wrap_content"31                 android:layout_height="wrap_content"32                 android:text="2行1列" />33 34             <Button35                 android:layout_width="wrap_content"36                 android:layout_height="wrap_content"37                 android:text="2行2列" />38         </TableRow>39 40         <TableRow41             android:id="@+id/tableRow3"42             android:layout_width="wrap_content"43             android:layout_height="wrap_content" >44 45             <Button46                 android:layout_width="wrap_content"47                 android:layout_height="wrap_content"48                 android:text="3行1列" />49 50             <Button51                 android:layout_width="wrap_content"52                 android:layout_height="wrap_content"53                 android:text="3行2列" />54         </TableRow>55     </TableLayout>

  • LineLayout

线性布局，比较简单，就是以水平或垂直的方式一行一个或一列一个的形式摆放控件。

 1   <LinearLayout 2         android:layout_width="fill_parent" 3         android:layout_height="fill_parent" 4         android:orientation="vertical" >//水平或垂直 5  6         <Button 7             android:layout_width="fill_parent" 8             android:layout_height="wrap_content" 9             android:text="1行" />10 11         <Button12             android:layout_width="fill_parent"13             android:layout_height="wrap_content"14             android:text="2行" />15 16         <Button17             android:layout_width="fill_parent"18             android:layout_height="wrap_content"19             android:text="3行" />20     </LinearLayout>

  • RelativeLayout

相对布局，最为灵活得分一种布局，用于组织一些复杂界面，在此布局中的子元素里与位置相关的属性将生效。例如android：layout_below,  android:layout_above, android:layout_centerVertical等。注意在指定位置关系时，引用的ID必须在引用之前，先被定义，否则将出现异常。

 1  <RelativeLayout 2         android:layout_width="fill_parent" 3         android:layout_height="fill_parent" 4         android:orientation="vertical" > 5  6         <Button 7             android:id="@+id/text_01" 8             android:layout_width="50dp" 9             android:layout_height="50dp"10             android:layout_alignParentBottom="true"11             android:gravity="center"12             android:text="1" />13 14         <Button15             android:id="@+id/text_02"16             android:layout_width="50dp"17             android:layout_height="50dp"18             android:layout_above="@id/text_01"//相对布局中的特有属性，xx之上/之下/之左/之右等19             android:layout_centerHorizontal="true"20             android:gravity="center"21             android:text="2" />22 23         <Button24             android:id="@+id/text_03"25             android:layout_width="50dp"26             android:layout_height="50dp"27             android:layout_above="@id/text_01"28             android:layout_toLeftOf="@id/text_02"//相对布局中的特有属性，在xx的左边29             android:gravity="center"30             android:text="3" />31     </RelativeLayout>

  • AbsoluteLayout

绝对布局，在此布局中的子元素的android:layout_x和android:layout_y属性将生效，用于描述该子元素的坐标位置，一经设置变不能改变位置，适用一些不经常变化的控件或界面。

 1 <AbsoluteLayout 2         android:layout_width="fill_parent" 3         android:layout_height="fill_parent" 4         android:orientation="vertical" > 5  6         <Button 7             android:layout_width="50dp" 8             android:layout_height="50dp" 9             android:layout_x="50dp"10             android:layout_y="50dp"11             android:background="#999999"12             android:gravity="center"13             android:text="1" />14 15         <Button16             android:layout_width="50dp"17             android:layout_height="50dp"18             android:layout_x="90dp"19             android:layout_y="90dp"20             android:background="#ff654321"21             android:gravity="center"22             android:text="2" />23 24         <Button25             android:layout_width="50dp"26             android:layout_height="50dp"27             android:layout_x="125dp"28             android:layout_y="125dp"29             android:background="#fffedcba"30             android:gravity="center"31             android:text="3" />32     </AbsoluteLayout>

  • FrameLayout

 帧布局，网上说的有些别扭，我自己理解就类似css中的z-index，可以实现遮罩，即有层的效果。注意：所有的帧默认都是从屏幕左上角开始绘制，然后按照控件的声明顺序，依次叠加，层级逐渐升高。 

 1 <FrameLayout 2         android:layout_width="fill_parent" 3         android:layout_height="fill_parent" 4         android:orientation="vertical" > 5  6         <TextView 7             android:layout_width="fill_parent" 8             android:layout_height="fill_parent" 9             android:background="#999999"10             android:gravity="center"11             android:text="1" />12 13         <TextView14             android:layout_width="200dp"15             android:layout_height="100dp"16             android:background="#ff654321"17             android:gravity="center"18             android:text="2" />19 20         <TextView21             android:layout_width="50dp"22             android:layout_height="50dp"23             android:background="#fffedcba"24             android:gravity="center"25             android:text="3" />26     </FrameLayout>

五大布局已经介绍完毕，有些简单，（因为这个布局我觉得确实也没什么好说的，结合配图我觉得已经很能说明问题了）。我在写这个系列之前也说了“我并不想做重复性的工作”，类似这种基础的东西，网上很多人写的比我好也很详细，我只是想把自己在学习过程中认为有必要和大家分享的一些经验和技巧写出来，所以你可以看到我并没有写什么HelloWorld之类的，因为与其把时间花在这种已经泛滥的内容上，倒不如多花时间去贡献一些独有的，或被大家忽略的内容上。

写技术博客真的很费时间，得理顺思路、组织语言、写Demo、截图、排版等等，有时候真羡慕那些可以一周一篇甚至几天一篇得大牛们。最近学的内容和点都比较多，看着大篇凌乱的笔记，一时间都不知道该从哪去写，自己更新的有些慢，不过自己还是会坚持的，一起加油！


联系
我们