Android 多状态布局 android的布局_Android 多状态布局

布局介绍

在Android中,有五种常用的布局方式,分别是:FrameLayout(框架布局)、LinearLayout(线性布局)、AbsoluteLayout(绝对布局)、RelativeLayout(相对布局)和TableLayout(表格布局)。

  1. FrameLayout框架布局
  • 布局特点:放入其中的所有元素都被放置在最左上的区域,而且无法为这些元素指定一个确切的位置,下一个子元素会重叠覆盖上一个子元素
  • 应用场景:适合浏览单张图片,或者两张图片叠在一起动态改变。
  1. LinearLayout线性布局
  • 布局特点:放主要提供控件水平或者垂直排列的模型,每个子组件 都是以垂直或水平的方式来线性排布.(默认是垂直)
  • 应用场景:最常用的布局方式
  • linearLayout中有一个重要的属性 android:layout_weight=”1”,这个weight在垂直布局时,代表行距;水平的时候代表列宽;weight值越大就越大。
  1. AbsoluteLayout绝对定位布局
  • 布局特点:采用坐标轴的方式定位组件,左上角是(0,0)点,往右x轴递增,往下Y轴递增,组件定位属性为android:layout_x和 android:layout_y来确定坐标。
  • 应用场景:准确定位空间位置
  • 由于Android手机的屏幕尺寸、分辨率存在较大差异,使用AbsoluteLayout无法兼顾适配问题,所以该布局已经过时
  1. RelativeLayout相对布局
  • 布局特点:为某一个组件为参照物,来定位下一个组件的位置的布局方式。
  • 应用场景:控件之间存在相应关系(适配神器,推荐使用)
  1. GridLayout(网格布局)
  • 布局特点:和TableLayout(表格布局) 有点类似,不过他有很多前者没有的东西,也更加好用,。可以自己设置布局中组件的排列方式;可以自定义网格布局有多少行,多少列;可以直接设置组件位于某行某列;可以设置组件横跨几行或者几列。
  • 应用场景:控件之间存在相应关系。

布局属性配置

五种Layout中Item的基础属性

  1. layout_width & layout_height
  2. layout_margin+方位 & padding+方位
  3. layout_gravity & gravity

Android五种布局都具备上述几个基础属性

  1. layout_width & layout_height
    设置Layout中组件的宽度和高度。取值有以下三种
  • 固定的像素(px)值:android:layout_width = “66px”
  • wrap_content(包裹内容):相应视图的宽高会被设定成所需的最小尺寸以适应视图中的内容
  • match-parent:视图的宽和高延伸至充满整个父布局
  1. layout_margin+方位/padding+方位
  • 设置放入Layout中的View与Layout的边界或者其他View之间能够相距一段距离。
    有layout_marginLeft、layout_marginTop、layout_marginRight和layout_marginBottom四个方位,padding类似。取值都是固定值
  • 两者区别:padding和margin都是边距的含义,但二者边距的定义不同: padding是控件的内容相对控件的边缘的边距; layout_margin是控件边缘相对父控件的边距。
  1. layout_gravity/gravity(重力?)
  • 作用:用来确定View在Layout中的停靠位置
  • 区别:gravity属性:是对该view 内容的位置的设置。 比如一个button 上面的text. 你可以设置该text 在view的靠左,靠右等位置。
    layout_gravity属性是用来设置该view相对与父view 的位置
    比如一个button 在Linearlayout里,你可以通过设置该属性把该button放在父布Linearlayout靠左靠右等位置。
  • 取值:center,left,right,bottom,top;想同时用两种的话:bottom | left

各种Layout特有属性

FrameLayout

作为最基本的Layout,只具备上述的基础属性

AbsoluteLayout 略

LinearLayout

  • 属性介绍
  1. orientation(方向):设置Layout内控件的排列方式,有两个定值:vertical(垂直排列-默认值);horizontal(水平排列)
  2. layout_weight(权重):独有的比例分配属性。在同一个LinearLayout内的控件都会默认有这个值,且默认值是0 。计算公式是:
控件最终宽度/高度 = 控件设置宽度+layout_weight比例*layout剩余宽度/高度

可以看到,layout_weight实质上是将layout剩余宽度/高度根据比例分配控件设置宽度,也就是layout和控件的layout_width/layout_height共同决定的控件初始拥有的宽度/高度。layout剩余宽度/高度的计算看具体例子。

例1:LinearLayout的layout_width=“match_parent”,orientation=“horizontal”,占满了屏幕的宽度。里面有三个TextView,layout_width=“wrap_content”,那么三个子组件会按照默认TextView的宽度依次排列,剩余的位置也就是"layout剩余宽度",由于没有设置layout_weight的值,三个TextView默认都为0,所以剩余宽度没有被占用。如下图所示。

Android 多状态布局 android的布局_Android 多状态布局_02


例2:接例1,为三个TextView设置layout_weight分别为1、2、3,那么自然三个组件也就按照1:2:3的比例占满了屏幕宽度。其中第一个TextView的比例是1/1+2+3=1/6。

例3:接上例,当三个组件的layout_weight="match_parent"时,也就是三个组件都想占满整个父布局的宽度,这个时候layout剩余宽度的计算就比较有意思了。以screen_width代表屏幕宽度,父LinearLayout占满一个screen_width

此时的layout剩余宽度 = 1 screen_width - 3 screen_width = -2 screen_width

没错,这个剩余宽度可以是负值。所以在计算组件最终宽度的时候,是这么算的:控件最终宽度 = 1 screen_width(因为是match_parent)+ 比例 * -2 screen_width

照例2的layout_weight,当layout_weight都为"match_parent"时,第一个TextView宽度 = 1 + 1/6 * (-2) = 2/3;第二个TextView宽度 = 1 + 2/6 * (-2) = 1/3;第一个TextView宽度 = 1 + 3/6 * (-2) = 0 。效果如下图所示,第三个TextView不见了。

Android 多状态布局 android的布局_Android 多状态布局_03

  • 实例
    实现屏幕四角和居中摆放控件的布局Android实现分割线的三种方式

RelativeLayout

RelativeLayout的额外属性较多:

  • 相对于父控件

属性值

效果

layout_alignParentBottom

当前控件底端与父控件的底端对齐

layout_alignParentLeft

当前控件左端与父控件的左端对齐

layout_alignParentRight

当前控件右端与父控件的右端对齐

layout_alignParentTop

当前控件上端与父控件的上端对齐

layout_centerHorizontal

当前控件位于父控件的横向中间位置(水平方向上的中间)

layout_centerVertical

当前控件位于父控件的纵向中间位置(平面上的正中间)

layout_centerInParent

当前控件位于父控件的纵横向中间位置(垂直方向上的中间)

以上所有属性的取值皆为boolean属性。例:layout_alighParentBottom = “true”

  • 相对于给定控件

属性值

效果

layout_above

使当前控件位于给定id控件的上方

layout_below

使当前控件位于给出id控件的下方

layout_toLeftOf

使当前控件位于给出id控件的左侧

layout_toRightOf

使当前控件位于给出id控件的右侧

layout_alignBottom

使当前控件与给定id控件的底部重合

layout_alignTop

使当前控件与给定id控件的顶部重合

layout_alignLeft

使当前控件与给定id控件的左侧重合

layout_alignRight

使当前控件与给定id控件的右侧重合

layout_alignBaseline

使当前控件的BaseLine与给定id控件的BaseLine重合

  • 实例
    相对布局和线性布局的结合的例子

GridLayout

  • 属性介绍
1. android:orientation 与LinearLayout中的一样使用
2. 设置几行几列:android:rowCount = “x” android:columnCount = “y” //x行y列
3. 设置组件所在的行列:从0开始计算的。android:layout_row = “1” android:layout_column = “2” //设置组件位于第二行第三列。 不设置默认每个组件占一行一列
4. 设置组件横跨几行几列:android:rowSpan = “2” //纵向横跨2行 android:columnSpan = “3” //横向横跨3列

选择器selector.xml的属性

  • 作用:通过设置selector.xml可使得控件在不同操作下(默认、点击、焦点等)显示不同的样式。
  • 创建方式
  1. 以Xml方式写出状态选择器,然后将我们写好的selector状态器存在放res - drawable 或 res - color 文件夹下,较为常用
  2. 在代码中动态创建selector,实现不如前者简单,但胜在灵活,一般用在选择器状态改变频繁的情况下

注意
设置 background属性的时候,我们的selector状态选择器存放在res - drawable 下;
设置TextColor属性的时候,我们的selector状态选择器存放在res - color 下。

  • 属性

XML属性

说明

android:drawable

放一个drawable资源

android:state_pressed

按下状态,入一个按钮触摸或者点击

android:state_focused

取得焦点状态,比如用户选择了一个文本框

android:state_hovered

光标悬停状态(API Level 11及以上才支持)

android:state_selected

选中状态

android:state_enabled

能够被触摸或者点击事件

android:state_checked

设置是否勾选状态,主要用于CheckBox和RadioButton,true表示已被勾选,false表示未被勾选

android:state_checkable

类似state_enabled,只是state_enabled会影响触摸或点击事件,state_checkable影响勾选事件

上述所有属性的取值皆为boolean属性,说明部分一般是取值为true时的效果。当取值为false时,效果是反过来的。例如state_pressed为false时代表按钮松开时。

  • 实例说明
  1. 点击改变字体颜色 - android:state_pressed
    selector状态选择器代码(bg_btn_one.xml 存放在res-color)
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@color/colorPrimary" android:state_pressed="true"/>
    <item android:color="@color/colorAccent" />
</selector>

使用处:

<Button
        android:textColor="@color/bg_btn_one"  //此处引用
        android:layout_width="match_parent"
        android:layout_height="45dp"
        android:text="样式一:点击改变字体颜色"
        />
  1. 点击改变背景颜色
    selector状态选择器代码(bg_btn_two.xml 存放在res-drawable)
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@color/colorAccent" android:state_pressed="true"/>
    <item android:drawable="@color/colorPrimary" />
</selector>

使用处:

<Button
        android:background="@drawable/bg_btn_two"
        android:layout_width="match_parent"
        android:layout_height="45dp"
        android:text="样式二:点击改变背景颜色"
        />

tools、app的作用

链接:xml中的tools、app