本章我们将进行Android布局组件的学习,在前一章节,我们也初步使用LinearLayout布局,接下来我们就对布局文件进行更详细的学习与了解,并在案例的使用过程中去深入体会。
Android的界面是有布局和组件协同完成的,布局好比是建筑里的框架,而组件则相当于建筑里的砖瓦。组件按照布局的要求依次排列,就组成了用户所看见的界面。Android的五大布局分别是LinearLayout(线性布局)、FrameLayout(单帧布局)、RelativeLayout(相对布局)、AbsoluteLayout(绝对布局)和TableLayout(表格布局)。
1、线性布局(LinearLayout)
线性布局的形式可以分为两种,第一种横向线性布局 第二种纵向线性布局,总而言之都是以线性的形式 一个个排列出来的,纯线性布局的缺点是很不方便修改控件的显示位置,所以开发中经常会以线性布局与相对布局嵌套的形式设置布局。
2、帧布局(FrameLayout)
原理是在控件中绘制任何一个控件都可以被后绘制的控件覆盖,最后绘制的控件会盖住之前的控件。
3、绝对布局(AbsoluteLayout)
使用绝对布局可以设置任意控件的 在屏幕中 X Y 坐标点,和帧布局一样后绘制的控件会覆盖住之前绘制的控件。
4、相对布局(RelativeLayout)
相对布局是android布局中最为强大的,首先它可以设置的属性是最多了,其次它可以做的事情也是最多的。android手机屏幕的分辨率五花八门所以为了考虑屏幕自适应的情况所以在开发中建议大家都去使用相对布局 它的坐标取值范围都是相对的所以使用它来做自适应屏幕是正确的。
5、表格布局(TableLayout)
在表格布局中可以设置TableRow 可以设置 表格中每一行显示的内容 以及位置 ,可以设置显示的缩进,对齐的方式。
【博客专栏:http://blog.csdn.net/column/details/alearning.html】
LinearLayout (线性布局)
本例拓展的属性配置是:
- android:layout_weight 权重
<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:gravity="center"
android:orientation="vertical"
tools:context=".MainActivity" >
<!-- 单个LinearLayout -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#99CCFF"
android:orientation="horizontal" >
<TextView
android:layout_width="match_parent"
android:layout_height="80dp"
android:gravity="center"
android:text="#99CCFF" />
</LinearLayout>
<!-- 单个LinearLayout下包含两个水平平均分布的LinearLayout -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#CCFF66"
android:orientation="vertical" >
<TextView
android:layout_width="match_parent"
android:layout_height="60dp"
android:gravity="center"
android:text="#CCFF66" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#FF9900"
android:orientation="vertical" >
<TextView
android:layout_width="match_parent"
android:layout_height="60dp"
android:gravity="center"
android:text="#FF9900" />
</LinearLayout>
</LinearLayout>
<!-- 以上两种情况的叠加 -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#CC99CC"
android:orientation="vertical" >
<TextView
android:layout_width="match_parent"
android:layout_height="120dp"
android:gravity="center"
android:text="#CC99CC" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#CC9933"
android:orientation="horizontal" >
<TextView
android:layout_width="match_parent"
android:layout_height="60dp"
android:gravity="center"
android:text="#CC9933" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#99CCCC"
android:orientation="horizontal" >
<TextView
android:layout_width="match_parent"
android:layout_height="60dp"
android:gravity="center"
android:text="#99CCCC" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
</LinearLayout>
效果截图:
FrameLayout (帧布局)
- android: gravity 指定控件的基本位置
android:gravity="bottom|center"
【布局文件】activity_framelayoutt.xml
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView android:layout_height="match_parent"
android:background="#99CCFF"
android:layout_width="match_parent"
android:gravity="bottom|center"
android:text="第一层\n【#99CCFF】"/>
<TextView android:layout_height="200dp"
android:background="#CC99CC"
android:layout_width="200dp"
android:gravity="bottom|center"
android:text="第二层\n【#CC99CC】"/>
<TextView android:layout_height="100dp"
android:layout_width="100dp"
android:gravity="bottom|center"
android:background="#99CCCC"
android:text="第三层\n【#99CCCC】"/>
</FrameLayout>
效果截图:
AbsoluteLayout (绝对布局)
- android:layout_x 指定控件的x轴的位置
- android:layout_y 指定控件的y轴的位置
<?xml version="1.0" encoding="utf-8"?>
<AbsoluteLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<TextView
android:layout_width="60dp"
android:layout_height="60dp"
android:layout_x="30dp"
android:layout_y="30dp"
android:background="#009966"
android:text="#009966" />
<TextView
android:layout_width="60dp"
android:layout_height="60dp"
android:layout_x="90dp"
android:layout_y="80dp"
android:background="#CC6699"
android:text="#CC6699" />
<TextView
android:layout_width="60dp"
android:layout_height="60dp"
android:layout_x="30dp"
android:layout_y="180dp"
android:background="#3366CC"
android:text="#3366CC" />
<TextView
android:layout_width="60dp"
android:layout_height="60dp"
android:layout_x="180dp"
android:layout_y="90dp"
android:background="#FFCC99"
android:text="#FFCC99" />
<TextView
android:layout_width="60dp"
android:layout_height="60dp"
android:layout_x="240dp"
android:layout_y="200dp"
android:background="#FF6666"
android:text="#FF6666" />
</AbsoluteLayout>
效果截图:
参考资料
1、http://blog.chinaunix.net/uid-23544029-id-2985631.html
2、http://www.cnblogs.com/wisekingokok/archive/2011/08/23/2150452.html
3、http://blog.csdn.net/jzp12/article/details/7590591