思享工具箱

AndroidUI设计之布局-详细解析布局实现

摘要：
写一篇博客摘要：澄清之前没有澄清的概念。父容器和此容器的属性：android_布局…属性是此容器的特性。它是在该布局管理器的LayoutParams内部类中定义的。每个布局管理器都有一个LayoutParams内部类。Android:…是父容器用来控制子组件的属性。例如，Android:layout_Gravity控制组件本身的对齐，Android:Gravity控制容器的子组件

写完博客的总结 : 以前没有弄清楚的概念清晰化

父容器与本容器属性 : android_layout...属性是本容器的属性, 定义在这个布局管理器的LayoutParams内部类中, 每个布局管理器都有一个LayoutParams内部类, android:... 是父容器用来控制子组件的属性. 如android:layout_gravity 是控制组件本身的对齐方式, android:gravity是控制本容器子组件的对齐方式;

 

布局管理器都是以ViewGroup为基类派生出来的; 使用布局管理器可以适配不同手机屏幕的分辨率,尺寸大小;

 

布局管理器之间的继承关系 : 

AndroidUI设计之布局-详细解析布局实现第1张

 

在上面的UML图中可以看出, 绝对布局 帧布局 网格布局 相对布局 线性布局是直接继承ViewGroup,表格布局是继承的LinearLayout;

 

一. 线性布局(LinearLayout)

 

1. 线性布局作用 

 

作用 : 线性布局会将容器中的组件一个一个排列起来, LinearLayout可以控制组件 横向 或者 纵向 排列, 通过android:orientation属性控制;

不换行属性 : 线性布局中的组件不会自动换行, 如果组件一个一个排列到尽头之后, 剩下的组件就不会显示出来;

 

2. LinearLayout常用属性

 

(1)基线对齐

 

xml属性 : android:baselineAligned; 

设置方法 : setBaselineAligned(boolean b); 

作用 : 如果该属性为false, 就会阻止该布局管理器与其子元素的基线对齐;

 

(2)设分隔条 

 

xml属性 : android:divider; 

设置方法 : setDividerDrawable(Drawable); 

作用 : 设置垂直布局时两个按钮之间的分隔条;

 

(3)对齐方式(控制内部子元素)  

 

xml属性 : android:gravity; 

设置方法 : setGravity(int); 

作用 : 设置布局管理器内组件(子元素)的对齐方式, 

支持的属性 : 

top, bottom, left, right, 

center_vertical(垂直方向居中), center_horizontal(水平方向居中),

fill_vertical(垂直方向拉伸), fill_horizontal(水平方向拉伸), 

center, fill, 

clip_vertical, clip_horizontal; 

可以同时指定多种对齐方式 : 如 left|center_vertical 左侧垂直居中;

 

(4)权重最小尺寸 

 

xml属性 : android:measureWithLargestChild; 

设置方法 : setMeasureWithLargestChildEnable(boolean b);

作用 : 该属性为true的时候, 所有带权重的子元素都会具有最大子元素的最小尺寸;

 

(5) 排列方式

 

xml属性 : android:orientation;

设置方法 : setOrientation(int i);

作用 : 设置布局管理器内组件排列方式, 设置为horizontal(水平),vertical(垂直), 默认为垂直排列;

 

3. LinearLayout子元素控制

 

LinearLayout的子元素, 即LinearLayout中的组件, 都受到LinearLayout.LayoutParams控制, 因此LinearLayout包含的子元素可以执行下面的属性.

 

(1) 对齐方式

 

xml属性 : android:layout_gravity;

作用 : 指定该元素在LinearLayout(父容器)的对齐方式, 也就是该组件本身的对齐方式, 注意要与android:gravity区分, ;

 

(2) 所占权重

 

xml属性 : android:layout_weight;

作用 : 指定该元素在LinearLayout(父容器)中所占的权重, 例如都是1的情况下, 那个方向(LinearLayout的orientation方向)长度都是一样的;

 

4. 控制子元素排列 与 在父元素中排列

 

控制本身元素属性与子元素属性 : 

设备组件本身属性 : 带layout的属性是设置本身组件属性, 例如 android:layout_gravity设置的是本身的对其方式; 

设置子元素属性 : 不带layout的属性是设置其所包含的子元素, 例如android:gravity 设置的是该容器子组件的对齐方式;

LayoutParams属性 : 所有的布局管理器都提供了相应的LayoutParams内部类, 这些内部类用于控制该布局本身, 如 对齐方式 layout_gravity, 所占权重 layout_weight, 这些属性用于设置本元素在父容器中的对齐方式;

容器属性 : 在android:后面没有layout的属性基本都是容器属性, android:gravity作用是指定指定本元素包含的子元素的对齐方式, 只有容器才支持这个属性;

 

5. 常见用法

 

(1) 获取LinearLayout的宽高

 

a. 组件外无法获取组件宽高 

下面的两种情况都是针对 View.getHeight() 和 View.getWidth() 方法 : 

组件外无法获取 : 调用View.getHeight() 和View.getWidth()方法 是获取不到组件的宽度和高度的, 这两个方法返回的是0, Android的运行机制决定了无法在组件外部使用getHeight()和getWidth()方法获取宽度和高度;

组件内可以获取 : 在自定义的类中可以在View的类中通过调用这两个方法获取该View子类组件的宽和高;

 

b. 组件外部获取View对象宽高方法 

 

外部获取 : 使用View.getMeasuredWidth() 和View.getMeasuredHeight()方法可以获取组件的宽和高, 在调用这个方法之前, 必须先调用View.measure()方法, 才可以, 否则也获取不到组件的宽高;

注意(特例) : 如果组件宽度或高度设置为 fill_parent, 使用 getMeasuredHeight() 等方法获取宽度和高度的时候, 并且组件中含有子元素时, 所获取的实际值是这些组件所占的最小宽度和最小高度.(没看懂)

 

示例:

 

  1. View view = getLayoutInflater().inflate(R.layout.main, null);  
  2. LinearLayout layout = (LinearLayout) view.findViewById(R.id.linearlayout);  
  3. //调用测量方法, 调用了该方法之后才能通过getMeasuredHeight()等方法获取宽高  
  4. layout.measure(0, 0);  
  5. //获取宽度  
  6. int width = layout.getMeasuredWidth();  
  7. //获取高度  
  8. int height = layout.getMeasuredHeight();  

 

 

c. 获取布局文件中组件的宽高 

 

从LayoutParams中获取 : 调用View.getLayoutParams().width 和 View.getLayoutParams().height 获取宽高, 如果宽高被设定为 fill_parent, match_parent, warp_content 时, 这两个两边直接回返回 FILL_PARENT, MATCH_PARENT, WARP_CONTENT常量值;

规律 : 从View.getLayoutParams()中获取 width, height 值, 在布局xml文件中设置的是什么, 获取的时候就得到的是什么;

 

(2) 在LinearLayout中添加分隔线

 

a. 使用ImageView添加(低版本3.0以下)

 

垂直布局 横向宽度填满 : 如果布局是vertical, 那么设置一个ImageView宽度fill_parent, 高度2dp, 设置一个背景色;

水平布局 纵向高度填满 : 如果布局时horizontal, 那么设置一个ImageView宽度2dp, 高度fill_parent, 设置一个背景色;

  1. <ImageView   
  2.     android:layout_width="fill_parent"  
  3.     android:layout_height="2dp"  
  4.     android:background="#F00"/>  

 

b. 使用xml属性添加(3.0以上版本)

 

设置LinearLayout标签的 android:showDividers属性, 该属性有四个值 : 

none :不显示分隔线;

beginning : 在LinearLayout开始处显示分隔线;

middle : 在LinearLayout中每两个组件之间显示分隔线;

end : 在LinearLayout结尾处显示分隔线;

 

设置android:divider属性, 这个属性的值是一个Drawable的id;

 

c. 使用代码添加(3.0以上版本)

 

设置显示分隔线样式 : linearLayout.setShowDividers(), 设置android:showDividers属性;

设置分隔线图片 : linearLayout.setDividerDrawable(), 设置android:divider属性;

 

6. 实际案例

 

(1) 按钮排列 

AndroidUI设计之布局-详细解析布局实现第2张       AndroidUI设计之布局-详细解析布局实现第3张

要点 : 

底部 + 水平居中 对齐属性 : 左边的LinearLayout的android:gravity 属性为bottom|center_horizontal; 

右部 + 垂直居中 对齐属性 : 右边的LinearLayout的android:gravity 属性为right|center_vertical;

 

代码 : 

  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:layout_width="fill_parent"  
  4.     android:layout_height="fill_parent"  
  5.     android:orientation="vertical"   
  6.     android:gravity="bottom|center_horizontal">  
  7.     <Button   
  8.         android:layout_width="wrap_content"  
  9.         android:layout_height="wrap_content"  
  10.         android:text="按钮1"/>  
  11.     <Button   
  12.         android:layout_width="wrap_content"  
  13.         android:layout_height="wrap_content"  
  14.         android:text="测试按钮2"/>  
  15.     <Button   
  16.         android:layout_width="wrap_content"  
  17.         android:layout_height="wrap_content"  
  18.         android:text="按钮3"/>  
  19.     <Button   
  20.         android:layout_width="wrap_content"  
  21.         android:layout_height="wrap_content"  
  22.         android:text="测试按钮4"/>  
  23.     <Button   
  24.         android:layout_width="wrap_content"  
  25.         android:layout_height="wrap_content"  
  26.         android:text="按钮5"/>  
  27. </LinearLayout>  

 子元素对齐 : 通过修改 android:gravity 属性来控制LinearLayout中子元素的排列情况;

 

左边的图的属性为 bottom|center_horizontal , 右边的android:gravity的属性值为 right|center_vertical;

 

(2) 三个按钮各自对齐

 

三个水平方向的按钮, 分别左对齐, 居中对齐, 右对齐 :

AndroidUI设计之布局-详细解析布局实现第4张

要点 : 

水平线性布局 : 最顶层的LinearLayout的orientation是horizontal水平的;

等分三个线性布局 : 第二层的LinearLayout的orientation是vertical垂直的, 并且宽度是fill_parent , 依靠权重分配宽度;

设置按钮对齐方式 : 按钮的android:layout_gravity属性根据需求 left, center, right, 默认为left;

 

代码 : 

  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:layout_width="fill_parent"  
  4.     android:layout_height="fill_parent"  
  5.     android:orientation="horizontal"  >  
  6.      
  7.     <LinearLayout   
  8.         android:layout_width="fill_parent"  
  9.         android:layout_weight="1"  
  10.         android:layout_height="wrap_content"  
  11.         android:orientation="vertical"  
  12.         android:background="#f00">  
  13.         <Button android:layout_width="wrap_content"  
  14.             android:layout_height="wrap_content"  
  15.             android:text="按钮1"/>  
  16.     </LinearLayout>  
  17.       
  18.     <LinearLayout   
  19.         android:layout_width="fill_parent"  
  20.         android:layout_weight="1"  
  21.         android:layout_height="wrap_content"  
  22.         android:orientation="vertical"  
  23.         android:background="#0f0">  
  24.         <Button android:layout_width="wrap_content"  
  25.             android:layout_height="wrap_content"  
  26.             android:text="按钮2"  
  27.             android:layout_gravity="center"/>  
  28.     </LinearLayout>  
  29.       
  30.     <LinearLayout   
  31.         android:layout_width="fill_parent"  
  32.         android:layout_weight="1"  
  33.         android:layout_height="wrap_content"  
  34.         android:orientation="vertical"  
  35.         android:background="#00f">  
  36.         <Button android:layout_width="wrap_content"  
  37.             android:layout_height="wrap_content"  
  38.             android:text="按钮3"  
  39.             android:layout_gravity="right"/>  
  40.     </LinearLayout>  
  41.       
  42. </LinearLayout>  

 

标签：#android布局 | 浏览：236 | 发布日期：

免责声明：文章转载自《AndroidUI设计之布局-详细解析布局实现》仅用于学习参考。如对内容有疑问，请及时联系本站处理。

上篇mybatis分页查询，SqlServer 2008 查询速度很慢el-select数据超出展示样式下篇

宿迁高防，2C2G15M，22元/月；香港BGP，2C5G5M，25元/月 雨云优惠码：MjYwNzM=

相关文章

Android学习笔记六：六大布局

六大界面布局方式包括：线性布局(LinearLayout)、帧布局(FrameLayout)、表格布局(TableLayout)、相对布局(RelativeLayout)、绝对布局(AbsoluteLayout)和网格布局(GridLayout)。 1. LinearLayout线性布局 LinearLayout容器中的组件一个挨一个排列，通过控制and...

【Android】Anroid5.0+新控件---酷炫标题栏的简单学习

Android5.0+推出的新控件感觉特别酷，最近想模仿大神做个看图App出来，所以先把这些新控件用熟悉了。新控件的介绍、使用等等网上相应的文章已经特别多了，题主也没那能力去写篇详解出来，本篇随笔记录的主要是题主学习这些新控件时遇见的一些困惑以及在搞了半天后的一丝理解，或许也有新手也会碰到跟我一样的困惑，相互学习哈，如果有哪个地方理解错了，还望告知。 效...

Android开发之玩转FlexboxLayout布局

在这之前，我曾认真的研究过鸿洋大神的Android 自定义ViewGroup 实战篇 -> 实现FlowLayout，按照大神的思路写出了一个流式布局，所有的东西都是难者不会会者不难，当自己能自定义流式布局的时候就会觉得这东西原来很简单了。如果各位小伙伴也看过那篇文章的话，应该知道自定义流式布局还是非常麻烦的，不过Google今年开源了新的容器，就是...

【Android】7.4TableLayout（表格布局）

分类：C#、Android、VS2015； 创建日期：2016-02-11 一、简介 TableLayout也是用行和列划分单元格，但不会显示Row、Column以及Cell的边框线，其子元素有许多TableRow组成，每个TableRow定义表的一行（Row），每个Row拥有0个或多个单元格（Cell），每个Cell拥有一个View对象。 使用Table...

Android Studio教程06-布局，监听器以及基本控件

目录 2. 监听器 3. 布局 3.1. 布局分类 (1). Linear Layout (2). Relative Layout (3). ListView (4). Grid View 4. 其他比较杂的内容 4.1. 距离单位的区别px,dp,sp 4.2. 控件的外边距和内边距 1. 什么是内外边距 2. 如何设置内外边距...

android界面布局

（一）LinearLayout界面编排模式 他的格式是按照线性顺序，由上往下或右左往右，逐一排列界面组件。 layout_中的“match_parent”表示要填满他所在的外框，而“wrap_content”表示它的大小只要满足内部所包含的界面组件即可。 android:orientation:“horizontal”表示排列方式为水平，而“vertica...

最新文章

随机推荐

思享工具箱导航