说起UI布局,实际上就相当于我们小时候玩的拼图游戏,Android为我们提供了各种各样的布局和控件(拼图块儿),我们只需要根据不同的需求来将各个布局和控件拼起来。
注意:所有的布局或者控件都必须要指定宽和高:width&height
这里有三个属性:
fill_parent:填满父容器
match_parent:可填满的最大值
wrap_content:根据内部内容自适应大小
1.五大布局:
线性布局 LinearLayout
线性布局有一个最重要的属性:方向(orientation)
它可以指定我们内容的排列方式:要么从上到下/要么从左到右
我们可以在LinearLayout标签内部通过android:orientation="方向"来指定排列方向
android:orientation="vertical" -->指定排列方向为从上到下
android:orientation="horizontal" -->指定排列的方向从左到右
让我们写个布局看看
<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"
tools:context=".MainActivity" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_launcher" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_launcher" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="horizontal"
>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_launcher" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_launcher" />
</LinearLayout>
</LinearLayout>
可以看到我们首先在一个纵向的LinearLayout中添加了两个图片控件和一个横向的LinearLayout,显示出来是这样的
另外,线性布局还有一些属性:
layout_gravity:当前控件相对于父控件的对齐方式
gravity:当前控件中的内容或子控件相对于当前控件的对齐方式
margin: 当前控件相对于四周控件的间距;
padding:当前控件中的内容相对于当前控件的间距;
相对布局RelativeLayout
相对布局不需要想线性布局一样指定方向,不过需要指定每个控件的相对位置,什么是相对位置呢?----------比如说坐座位,你坐在我的左边,你相对我就是左,我在你屁股后面,我相对你的屁股,就是在后面。这么理解应该就容易一些了吧。
相对布局有几个常用的属性:
android:layout_toLeftOf —— 该组件位于引用组件的左方 android:layout_toRightOf —— 该组件位于引用组件的右方 android:layout_above —— 该组件位于引用组件的上方 android:layout_below —— 该组件位于引用组件的下方 android:layout_alignParentLeft —— 该组件是否对齐父组件的左端 android:layout_alignParentRight —— 该组件是否齐其父组件的右端 android:layout_alignParentTop —— 该组件是否对齐父组件的顶部 android:layout_alignParentBottom —— 该组件是否对齐父组件的底部
android:layout_centerInParent —— 该组件是否相对于父组件居中
android:layout_centerHorizontal —— 该组件是否横向居中 android:layout_centerVertical —— 该组件是否垂直居中
让我们来看看代码
<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"
android:layout_margin="20dp"
tools:context=".MainActivity" >
<TextView
android:id="@+id/center"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="中"
android:textSize="30sp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="@+id/center"
android:layout_toLeftOf="@+id/center"
android:text="左"
android:textSize="30sp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="@+id/center"
android:layout_toRightOf="@+id/center"
android:text="右"
android:textSize="30sp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="@+id/center"
android:layout_alignLeft="@+id/center"
android:text="上"
android:textSize="30sp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="@+id/center"
android:layout_below="@+id/center"
android:text="下"
android:textSize="30sp" />
</RelativeLayout>
我们可以看到,每一个控件他都有相对于另一个控件或者父控件的位置
效果图:
帧布局FrameLayout
帧布局也是Android开发中常用的布局,理解起来的话就像小时候看的动画片一样
再不理解给你看个动画
外国牛人手绘七龙珠
…………暴露年龄了
帧布局的绘制都是从屏幕的左上角开始绘制,每个控件都会覆盖上一个控件
废话不多说,上代码
<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="match_parent"
tools:context=".MainActivity" >
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#eeff0000"
android:gravity="center"
android:text="这是第一个控件"
android:textSize="50sp" />
<TextView
android:layout_width="50dp"
android:layout_height="50dp"
android:background="#4400ff00"
android:gravity="center"
android:text="这是第二个控件"
android:textSize="13sp" />
</FrameLayout>
我们现在在一个帧布局中添加了两个控件,并且为了区分,设置了不同的背景颜色,和尺寸大小
效果图:
可以看到,我们设置的第一个控件的大小为填满父窗体,第二个大小指定宽和高都是50dp,我们首先添加的控件被第二个控件从屏幕的左上角开始覆盖了,因为宽和高有限,所有没有全部覆盖。这样做的好处就是,我们可以在一个activity页面中切换不同的界面,后面会讲。
表格布局
TableLayout代表一个表格TableLayout中的一个TableRow代表一行;TableRow中的一个控件代表一列;
不常用 ,可以用GridView代替
绝对布局 (被google抛弃了)
这个标题够不够醒目,绝对布局招谁惹谁了。。。
他其实上就是给控件指定具体的位置,因为太麻烦了,而且功能也不是特别突出,所以被上面三种布局给比下去了,用的人很少,可以说几乎没有,如果有。。。。。。。那一定是个耿直boy
权重
所谓的权重就是等比例划分,在线性布局中使用,可以用来屏幕适配从开发的角度来讲,Android和ios比最大的麻烦就是屏幕适配(虽然我不会ios)不同的机型,不同的尺寸,你写一套布局并不能适应所有的屏幕尺寸,可能在试验机上好好的,换到另一个手机,看起来就走形了,权重适配是解决这个问题的方法之一。
<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"
tools:context=".MainActivity"
android:orientation="horizontal">
<TextView
android:layout_width="0dp"
android:layout_height="50dp"
android:layout_weight="1"
android:background="#f00"
/>
<TextView
android:layout_width="0dp"
android:layout_height="50dp"
android:layout_weight="1"
android:background="#0f0"
/>
</LinearLayout>
在这个线性布局中我们指定了方向为横向,添加了两个文本控件,并且设置width(宽度)都为0dp,weight(权重)都为1,就是说,我们把LinearLayout这个父控件的宽度平均分成了两份,每个控件各占一份(1/2)
有人有疑问了,我们可不可以让红色的控件占屏幕的1/2,让绿色的控件占屏幕的1/4呢?
答:可以,我们可以通过 android:weightSum=""这个属性,来设置具体把父控件分成几份,然后根据每个控件占几份来指定它的大小
<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"
tools:context=".MainActivity"
android:orientation="horizontal"
android:weightSum="4">
<TextView
android:layout_width="0dp"
android:layout_height="50dp"
android:layout_weight="2"
android:background="#f00"
/>
<TextView
android:layout_width="0dp"
android:layout_height="50dp"
android:layout_weight="1"
android:background="#0f0"
/>
</LinearLayout>
看到了么?是不是很神奇?
总结
相信看完这篇文章,你已经对布局有一些认识并且会简单使用了,后面我会关于android开发中一些常用的控件写一篇文章。