欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

Android常用布局(FrameLayout、LinearLayout、RelativeLayout)详解

程序员文章站 2024-03-02 00:02:28
很多开发者一听说android终端的屏幕尺寸五花八门,屏幕分辨率千奇百怪,就觉得android开发在屏幕适配方面是必定是一件头疼的事情。因为在android问世之前,广大开...

很多开发者一听说android终端的屏幕尺寸五花八门,屏幕分辨率千奇百怪,就觉得android开发在屏幕适配方面是必定是一件头疼的事情。因为在android问世之前,广大开发者知道的ui解决方案大致分为两类:

1、在web开发中的css,一层一层的去层叠样式。
2、在ios开发中去计算每一个uiview的尺寸。

上面两种方案,无论哪种方案面对碎片化严重的android终端,那都是一场噩梦。好在android提供了另一套解决方案来应对严重的终端碎片化,这就是布局和9-patch。

这里想来说说布局,在android sdk刚刚问世的时候,android提供了absolutelayout,framelayout,linearlayout,relativelayout和tablelayout五大布局来应对终端碎片化问题。

但很快android发现absolutelayout是一个愚蠢的方案,在android 1.5系统中就不再支持此布局,剩下的四个布局中,tablelayout虽然依然被支持,但是由于fragment以及新的tablayout的出现,博主在此断言,tablelayout也命不久矣,被移除支持只是迟早的事儿。

所以,android的五大基本布局现在只剩下三个(这里说的是基本布局,在android support包里引入的新的布局不计入内),下面分别介绍一下这三个基本布局。

一、framelayout
framelayout应该是android系统中最简单的布局了,在framelayout中的元素,默认都是以framelayout控件的坐上顶点作为基准点,一层一层的重叠起来,后加进来的元素覆盖前面的元素。

下面先来一个演示,代码如下:

<framelayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="match_parent"
  android:layout_height="match_parent">
 
  <view
    android:layout_width="200dp"
    android:layout_height="200dp"
    android:background="#ff0000"/>
 
  <view
    android:layout_width="200dp"
    android:layout_height="200dp"
    android:background="#000000"/>
 
  <view
    android:layout_width="200dp"
    android:layout_height="200dp"
    android:layout_margin="100dp"
    android:background="#00ff00"/>
 
</framelayout>

运行结果如下:

Android常用布局(FrameLayout、LinearLayout、RelativeLayout)详解

在代码里,有三个view,而在运行结果上只能看到两个view,一个黑色和一个绿色。这是因为红色的view被黑色的view盖住了。

在framelayout中,通过android:layout_gravity属性去指定子元素的位置,下面调整一下上诉例子中的黑色view的位置,让红色的view显示出来,调整后的代码如下:

<view
  android:layout_width="200dp"
  android:layout_height="200dp"
  android:layout_gravity="bottom|right"
  android:background="#000000"/>
 

可以看到上面代码里添加了android:layout_gravity属性,并且指定了两个值,一个为bottom,一个为right,表示这个view将被放到framelayout的右下角。运行结果如下图所示:

Android常用布局(FrameLayout、LinearLayout、RelativeLayout)详解

二、linearlayout
linearlayout是线性布局,它可以让它内部的元素按照指定方向依次排开。linearlayout的方向是通过android:orientation属性指定,并且可以通过android:gravity属性指定对其方式。

还是直接上段代码看看效果,代码如下:

<linearlayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:orientation="vertical"
  android:gravity="center">
 
  <view
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:background="#ff0000"/>
 
  <view
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:background="#000000"/>
 
  <view
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:background="#00ff00"/>
</linearlayout>

在代码中,设置了linearlayout的方向为纵向,并且对其方式居中对齐,于是运行结果如下图所示:

Android常用布局(FrameLayout、LinearLayout、RelativeLayout)详解

除了android:orientation将设为vertical外,也可以设为horizontal。让linearlayout内部的元素横向排列,将上面例子中的android:orientation属性值改为horizontal后的运行结果,如下图所示:

Android常用布局(FrameLayout、LinearLayout、RelativeLayout)详解

三、relativelayout
relativelayout是基本布局里面最灵活,也是最复杂的布局,它内部的元素可以通过设定彼此之间的相对关系来决定布局,使用relativelayout时,推荐为其内部每个元素都设定id,下面依然通过一个列子来演示此布局的使用方法。代码如下:

<relativelayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="match_parent"
  android:layout_height="match_parent">
 
  <view android:id="@+id/red"
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:background="#ff0000"/>
 
  <view android:id="@+id/black"
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:layout_torightof="@id/red"
    android:layout_below="@id/red"
    android:background="#000000"/>
 
  <view android:id="@+id/green"
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:layout_below="@id/black"
    android:layout_alignparentright="true"
    android:background="#00ff00"/>
 
  <view android:id="@+id/gray"
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:layout_centerinparent="true"
    android:background="#888888"/>
 
  <view android:id="@+id/orange"
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:layout_torightof="@id/green"
    android:layout_below="@id/gray"
    android:background="#ff8800"/>
</relativelayout>

先分析代码,可以看到每一个view都被设置了一个id值,分别为red,black,green,gray和orange。然后通过代码,可以看出black位于red的右边和下面,green位于black的下面并且右对齐其父元素(即relativelayout),gray居中对齐父元素(即relativelayout), orange位于green的右边同时位于gray的下面,运行结果如图所示:

Android常用布局(FrameLayout、LinearLayout、RelativeLayout)详解

在此在归纳一下relativelayout中,与布局相关的属性

android:layout_below:位于指定元素的下方
android:layout_above:位于指定元素的上方
android:layout_toleftof:位于指定元素的左侧
android:layout_torightof:位于指定元素的右侧
android:layout_centervertical:垂直居中对齐父元素
android:layout_centerhorizontal:水平居中对齐父元素
android:layout_centerinparent:居中对齐父元素
android:layout_alignparentright:与父元素右对齐
android:layout_alignparentleft:与父元素左对齐
android:layout_alignparenttop:与父元素上对齐
android:layout_alignparentbottom:与父元素下对齐
android:layout_alignright:与指定元素右对齐
android:layout_alignleft:与指定元素左对齐
android:layout_aligntop:与指定元素上对齐
android:layout_alignbottom:与指定元素下对齐
从android 4.2开始,也就是从api level 17开始,android增强了relativelayout,使其能够更好的应对并本地化这一需求,比如在有的国家,文字是从右往左阅读,这也就是所说的rtl。为了应对rtl,relativelayout又增加了以下属性:

android:layout_alignstart:与指定元素的开始位置对齐
android:layout_tostartof:位于指定元素的开始侧
android:layout_alignparentstart:与父元素与开始侧对齐
android:layout_alignend:与指定元素的结束始位置对齐
android:layout_toendof:位于指定元素的结束侧
android:layout_alignparentend:与指定元素的结束位置对齐
这里的开始和结束我们可以做如下理解:

开始:在从左到右阅读习惯的国家,开始侧等于左侧,tostartof的显示效果就等于toleftof。但是在从右往左阅读习惯的国家,那么开始侧就变成了右侧,tostartof的显示效果就等于了torightof。
结束:同上面对开始的理解一样,结束侧在从左到右阅读习惯的国家就是右侧,反之则在左侧。

原文链接:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。