Android常用布局总结

来源:互联网 发布:seo外链发到什么平台 编辑:程序博客网 时间:2024/05/17 07:50

Android常用布局总结:

这里写图片描述

1.线性布局

  什么是线性布局呢?很简单,这种布局可以让控件像线一样排布,只有垂直和水平两个方向,这是线性布局方向的特点,还有一点就是可以让子控件们按照比例划分空间,这里涉及到一个权重的问题。方向是有属性orientation的值所决定,属性值为vertical代表垂直方向的线性布局,而属性值为horizontal代表水平方向的线性布局。而子控件所占父线性布局的比例是由子控件的weight属性所决定,注意的是子控件划分的空见是父线性布局多余的空间,什么是多余的空间呢?比如有这样一个水平方向的线性布局A,水平最大长度为a,布局A里面有控件k1,k2,k3,k1初始水平长度为a1,K2水平初始长度为a2,k3水平初始长度为a3,那么对于线性布局A而言,它的多余的空间就是a-(a1+a2+a3),还是不懂?没关系,看看下图你就会明白的很彻底了:

线性布局多余的空间图

如果你给这三个子控件都设置了权重,假设权重都设置为1,也就是把多余的空间进行3等分,分别分给这三个子控件K1,k2,k3,那么进行权重设置的子控件们最终水平长度肯定是不会再是初始化值那样了,比如子控件K1的长度就变为了a1+(a-(a1+a2+a3))/3,这只不过是个很简单的数学问题,对你而言应该很简单吧!子控件k2和k3自然也不用我多啰嗦吧!讲这么多只为说明一点,线性布局对子控件权重的属性等分的不是父线性布局总空间,等分的是子控件们初始长度除去的剩下的空间。下面就来演示一下:

例子1:有三个按钮,水平方向排列,第一个按钮初始水平长度为10dp,第二个按钮初始水平长度为30dp,第三个按钮初始水平长度为80dp。它们的高度都为100dp,权重都为1。

<LinearLayout     xmlns:android="http://schemas.android.com/apk/res/android"    android:orientation="horizontal"     android:layout_width="match_parent"    android:layout_height="match_parent">    <Button        android:id="@+id/bt1"        android:layout_width="10dp"        android:layout_height="100dp"         android:text="bt1"        android:layout_weight="1"/>    <Button        android:id="@+id/bt2"        android:layout_width="30dp"        android:layout_height="100dp"        android:text="bt2"        android:layout_weight="1"/>    <Button        android:id="@+id/bt3"        android:layout_width="80dp"        android:layout_height="100dp"        android:text="bt3"        android:layout_weight="1"/></LinearLayout>

这个布局对应的UI截图如下:

这里写图片描述

可以明显的看到,权重划分的的确是父布局多余的空间。

例子2:有三个按钮,垂直方向排列,第一个按钮占父布局的1/6,第二个按钮占父布局1/3,第三个按钮占父布局1/2。宽度都为父布局的最大宽度。

<LinearLayout     xmlns:android="http://schemas.android.com/apk/res/android"    android:orientation="vertical"    android:layout_width="match_parent"    android:layout_height="match_parent">    <Button        android:id="@+id/bt1"        android:layout_width="match_parent"        android:layout_height="0dp"        android:text="bt1"        android:layout_weight="1"/>    <Button        android:id="@+id/bt2"        android:layout_width="match_parent"        android:layout_height="0dp"        android:text="bt2"        android:layout_weight="2"/>    <Button        android:id="@+id/bt3"        android:layout_width="match_parent"        android:layout_height="0dp"        android:text="bt3"        android:layout_weight="3"/></LinearLayout>

这个布局对应的UI截图如下:

这里写图片描述

其实权重划分原理很简单,这又是一个简单的数学题,拿id为bt1的按钮来讲,假设初始长度为a1,权重为q1,总权重为q,父线性布局多余的空间为a,那么bt1的最终长度为a1+a * (q1/q),而对于上面布局而言,a1等于0dp,a等于父布局的长度,q1等于1,而q=bt1的权重值+bt2的权重值+bt3的权重值=1+2+3=6,所以bt1的最终长度等于a * (1/6),这不就占1/6嘛,是不是很简单呢。

2.相对布局

  相对布局重在“相对”2个字,生活中也常常用到这两个字,比如:找人工智能方面的工作,武汉相对杭州而言,杭州更合适,那么Android中的“相对”是以什么为比较呢?答案就是位置,比如:武汉相对于北京而言,位于它的南方,因此相对布局这种思想还是很好理解的,毕竟生活中我们常常有过这种思维。
  一个布局里面通常有多个控件,那么就意味着一个控件有两种类型的“相对”,一种是相对于父相对布局,一种是相对于其他的兄弟控件或者布局,那么与这些“相对”属性有哪些呢?

RelativeLayout用到的一些重要的属性:
第一类:属性值为true或false
android:layout_centerHrizontal 水平居中
android:layout_centerVertical 垂直居中
android:layout_centerInparent 相对于父元素完全居中
android:layout_alignParentBottom 贴紧父元素的下边缘
android:layout_alignParentLeft 贴紧父元素的左边缘
android:layout_alignParentRight 贴紧父元素的右边缘
android:layout_alignParentTop 贴紧父元素的上边缘
android:layout_alignWithParentIfMissing 如果对应的兄弟元素找不到的话就以父元素做参照物

第二类:属性值必须为id的引用名“@id/id-name”
android:layout_below 在某元素的下方
android:layout_above 在某元素的的上方
android:layout_toLeftOf 在某元素的左边
android:layout_toRightOf 在某元素的右边
android:layout_alignTop 本元素的上边缘和某元素的的上边缘对齐
android:layout_alignLeft 本元素的左边缘和某元素的的左边缘对齐
android:layout_alignBottom 本元素的下边缘和某元素的的下边缘对齐
android:layout_alignRight 本元素的右边缘和某元素的的右边缘对齐

第三类:属性值为具体的像素值,如30dip,40px
android:layout_marginBottom 离某元素底边缘的距离
android:layout_marginLeft 离某元素左边缘的距离
android:layout_marginRight 离某元素右边缘的距离
android:layout_marginTop 离某元素上边缘的距离

光说不练贼把戏,那么我们来几个例子:

例子1:有五个按钮,宽度和高度分别都为50dp,将这五个按钮分别布置在界面的左上方,左下方,中间,右上方,右下方。示意图如下:

这里写图片描述

对应着此布局的代码为:

<RelativeLayout    xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent">    <Button        android:id="@+id/bt1"        android:layout_width="50dp"        android:layout_height="50dp"        android:layout_alignParentLeft="true"        android:text="bt1" />    <Button        android:id="@+id/bt2"        android:layout_width="50dp"        android:layout_height="50dp"        android:layout_alignParentRight="true"        android:text="bt2" />    <Button        android:id="@+id/bt3"        android:layout_width="50dp"        android:layout_height="50dp"        android:layout_centerHorizontal="true"        android:layout_centerVertical="true"        android:text="bt3" />    <Button        android:id="@+id/bt4"        android:layout_width="50dp"        android:layout_height="50dp"        android:layout_alignParentLeft="true"        android:layout_alignParentBottom="true"        android:text="bt4" />    <Button        android:id="@+id/bt5"        android:layout_width="50dp"        android:layout_height="50dp"        android:layout_alignParentRight="true"        android:layout_alignParentBottom="true"        android:text="bt5" /></RelativeLayout>

例子2:在例子1的基础上,在布局中间的按钮bt3周围围上一圈按钮,最后呈现为一个3*3格子的正方形。示意图如下:

这里写图片描述

对应着此布局的代码为:

<RelativeLayout    xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent">    <Button        android:id="@+id/bt1"        android:layout_width="50dp"        android:layout_height="50dp"        android:layout_alignParentLeft="true"        android:text="bt1" />    <Button        android:id="@+id/bt2"        android:layout_width="50dp"        android:layout_height="50dp"        android:layout_alignParentRight="true"        android:text="bt2" />    <Button        android:id="@+id/bt3"        android:layout_width="50dp"        android:layout_height="50dp"        android:layout_centerHorizontal="true"        android:layout_centerVertical="true"        android:text="bt3" />    <Button        android:id="@+id/zf2"        android:layout_width="50dp"        android:layout_height="50dp"        android:layout_above="@+id/bt3"        android:layout_alignLeft="@id/bt3"        android:text="zf2" />    <Button        android:id="@+id/zf1"        android:layout_width="50dp"        android:layout_height="50dp"        android:layout_toLeftOf="@+id/zf2"        android:layout_alignTop="@id/zf2"        android:text="zf1" />    <Button        android:id="@+id/zf3"        android:layout_width="50dp"        android:layout_height="50dp"        android:layout_toRightOf="@+id/zf2"        android:layout_alignTop="@id/zf2"        android:text="zf3" />    <Button        android:id="@+id/zf4"        android:layout_width="50dp"        android:layout_height="50dp"        android:layout_toLeftOf="@+id/bt3"        android:layout_alignTop="@id/bt3"        android:text="zf4" />    <Button        android:id="@+id/zf6"        android:layout_width="50dp"        android:layout_height="50dp"        android:layout_toRightOf="@+id/bt3"        android:layout_alignTop="@id/bt3"        android:text="zf6" />    <Button        android:id="@+id/zf8"        android:layout_width="50dp"        android:layout_height="50dp"        android:layout_below="@+id/bt3"        android:layout_alignLeft="@id/bt3"        android:text="zf8" />    <Button        android:id="@+id/zf7"        android:layout_width="50dp"        android:layout_height="50dp"        android:layout_toLeftOf="@+id/zf8"        android:layout_alignTop="@id/zf8"        android:text="zf7" />    <Button        android:id="@+id/zf9"        android:layout_width="50dp"        android:layout_height="50dp"        android:layout_toRightOf="@+id/zf8"        android:layout_alignTop="@id/zf8"        android:text="zf9" />    <Button        android:id="@+id/bt4"        android:layout_width="50dp"        android:layout_height="50dp"        android:layout_alignParentLeft="true"        android:layout_alignParentBottom="true"        android:text="bt4" />    <Button        android:id="@+id/bt5"        android:layout_width="50dp"        android:layout_height="50dp"        android:layout_alignParentRight="true"        android:layout_alignParentBottom="true"        android:text="bt5" /></RelativeLayout>

3.帧布局

  帧布局是怎样的呢?这里的“帧”是Flash动画一帧的那个“帧”,这种布局没有方便的定位方式,所有的控件都会默认放在布局的左上方。所以帧布局的应用场景很少,它的常用属性:

android:foreground: 设置该帧布局容器的前景图像
android:foregroundGravity: 设置前景图像显示的位置

例子:

<?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_width="200dp"             android:layout_height="200dp"             android:background="#FF0000" />       <TextView            android:layout_width="150dp"            android:layout_height="150dp"            android:background="#00FFFF" />    <TextView            android:layout_width="100dp"            android:layout_height="100dp"            android:background="#FFFF00" /></FrameLayout>

这里写图片描述

4.百分比布局

  百分比布局很好理解,可以让子控件按照百分比的方式划分宽度或者高度,在百分比布局里面不存在wrap_content,match_parent等,而是允许直接指定控件在布局中所占的百分比,这样就可以轻松达到屏幕适配的目的。
  百分比布局是新加入的布局,是Android设计团队精心设计的一个布局,去弥补一些老布局办不到的事,比如我在上面提到的屏幕适配,对于老布局而言,很难做到,要么借用屏幕适配的框架,要么就使用这个百分比布局。接下来我们看看如何使用百分比布局:

1.在项目下app/build.gradle中的dependencies闭包中添加:

compile 'com.android.support:percent:24.2.1'

2.新建布局文件,并使用android.support.percent.PercentFrameLayout引用百分比布局,示例代码如下:

<android.support.percent.PercentFrameLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:app="http://schemas.android.com/apk/res-auto"    android:id="@+id/activity_percent_layout"    android:layout_width="match_parent"    android:layout_height="match_parent"    >    <TextView        android:id="@+id/tv_test1"        android:text="认"        android:background="@android:color/holo_blue_light"        android:layout_gravity="top|left"        android:gravity="center"        app:layout_widthPercent="30%"        app:layout_heightPercent="30%"/>    <TextView        android:id="@+id/tv_test2"        android:text="努"        android:background="@android:color/holo_orange_light"        android:layout_gravity="top|right"        android:gravity="center"        app:layout_widthPercent="70%"        app:layout_heightPercent="70%"/>    <TextView        android:id="@+id/tv_test3"        android:text="真"        android:background="@android:color/holo_green_light"        android:layout_gravity="bottom|left"        android:gravity="center"        app:layout_widthPercent="50%"        app:layout_heightPercent="70%"/>    <TextView        android:id="@+id/tv_test4"        android:text="力"        android:background="@android:color/holo_red_light"        android:layout_gravity="bottom|right"        android:gravity="center"        app:layout_widthPercent="70%"        app:layout_heightPercent="50%"/></android.support.percent.PercentFrameLayout>

这里写图片描述

5.其它布局

待更新……

原创粉丝点击