EasyClick 原生UI连载九
EasyClick 原生UI连载目录
- EasyClick 原生UI教程
- EasyClick 原生UI之布局科普
-
- 线性布局--LinearLayout
- layout_gravity 和gravity的区别
- 相对布局--RelativeLayout
- 滚动框布局ScrollView
- 总结
- 注意
EasyClick 原生UI教程
讲师：Mr-老鬼，QQ：1156346325
EasyClick 原生UI教程电梯直达： EasyClick 原生UI教程总纲
EasyClick 原生UI之布局科普
写在文章前面，前面发布了八篇UI连载 ，前四章介绍EasyClick 官方支持的Android原生UI控件和布局，五六章简单介绍了使用方法，七章内容介绍搭配Androidstudio编辑UI，八章简单写了一个登录UI的例子，这里详细科普下官方支持的布局，留给需要学习的同学。下面开始讲解
线性布局–LinearLayout
LinearLayout 是一个视图容器，用于使所有子视图在单个方向（垂直或水平）保持对齐。您可以使用 android:orientation 属性指定布局方向。（源自Android官方文档摘录）
看一下布局
LinearLayout 的所有子视图依次堆叠，因此无论子视图有多宽，垂直列表每行均只有一个子视图，水平列表将只有一行高（最高子视图的高度加上内边距）。LinearLayout 会考虑子视图之间的边距以及每个子视图的对齐方式（右对齐、居中对齐或左对齐）。
android:orientation 中的orientation他表示的是这个线性布局是采用横向还是纵向布局，通常来说只有两个值：
- android:orientation="vertical"表示采用纵向的布局方式，所有在当前布局中添加的所有控件都依次按竖向排列 如下图所示
- android:orientation=”horizontal”表示采用横向的布局方式，所有在当前布局中添加的所有控件都依次按横向排列(默认水平)如下图所示
- android:layout_height: 表示当前线性布局的高度
android:layout_height="match_parent"
android:layout_height="wrap_content"
android:layout_height="30dp"
- android:layout_width: 表示当前线性布局的宽度
android:layout_width="match_parent"
android:layout_width="wrap_content"
android:layout_width="30dp"
-
android:gravity: 表示所有包含在当前布局中的所有控件采用某种方式对齐（默认左对齐）
下图是android:gravity支持的属性值
左图从上往下：
center (垂直且水平居中)
center_horizontal (水平居中)
bottom (底部对齐)
center_vertical (垂直居中)
右图从上往下：
left (将对象放在其容器的左部，不改变其大小)
right (将对象放在其容器的右部，不改变其大小)
start (将对象放在其容器的开始位置，不改变其大小)
top (将对象放在其容器的顶部，不改变其大小) -
android:layout_gravity: 表示当前线性布局相对于父元素的对齐方式
属性同 android:gravity: -
android:background: 表示当前线性布局的背景颜色
-
android:margin:表示外边距，通常表示本控件与父控件四面之间的距离
从上往下：
Bottom 底边距
End 与控件结尾的边距
Left 左边距
Right 右边距
Start 与控件的起始边距
Top 顶边距 -
android:padding:表示内边距，通常表示是本元素所有子元素的与父元素边缘的距离，设置在父元素上，比如文字与文本控件的所有距离 从上往下如上面的解释
-
android:layout_weight:子元素对未占用空间水平或垂直分布的权重 比如1比1 则值为1
android:layout_weight = "1"
线性布局代码示例：
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:orientation="vertical" >
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="to" />
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="subject" />
<EditText
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:gravity="top"
android:hint="message" />
<Button
android:layout_width="100dp"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:text="send" />
LinearLayout>
效果如下：
layout_gravity 和gravity的区别
需要自己敲代码预览理解两者不同的地方
相对布局–RelativeLayout
RelativeLayout 是一个以相对位置显示子视图的视图组。每个视图的位置可以指定为相对于同级元素的位置（例如，在另一个视图的左侧或下方）或相对于父级 RelativeLayout 区域的位置（例如在底部、左侧或中心对齐）。
这玩意了解下就可以了，贴个代码体会一下
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="16dp"
android:paddingRight="16dp" >
<EditText
android:id="@+id/name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="@string/reminder" />
<Spinner
android:id="@+id/dates"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_below="@id/name"
android:layout_alignParentLeft="true"
android:layout_toLeftOf="@+id/times" />
<Spinner
android:id="@id/times"
android:layout_width="96dp"
android:layout_height="wrap_content"
android:layout_below="@id/name"
android:layout_alignParentRight="true" />
<Button
android:layout_width="96dp"
android:layout_height="wrap_content"
android:layout_below="@id/times"
android:layout_alignParentRight="true"
android:text="@string/done" />
RelativeLayout>
效果如下
EasyClick 支持的属性同线性布局,这个可以用线性布局代替，这里不深入介绍了
滚动框布局ScrollView
可以滚动的布局，如果一个页面无法显示完内容则要选择滚动布局让页面滑动起来这样没显示出来的信息就可以显示出来了，顾明其意，这里就不多解释了
注意：滚动布局的子元素只有一个，子元素可以嵌套多个元素
写个例子体会下：
<ScrollView xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:android="http://schemas.android.com/apk/res/android"
xsi:noNamespaceSchemaLocation="layout.xsd"
android:layout_height="match_parent"
android:layout_width="match_parent">
<LinearLayout android:layout_height="match_parent"
android:layout_width="match_parent"
android:orientation="vertical"
android:padding="20dp">
<TextView android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="20dp"
android:text="表单开始,设置tag属性，用于在代码里面获取对应的值" />
<Switch android:text="自动化服务环境："
android:tag="auto_env" />
<LinearLayout android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_width="match_parent">
<TextView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="姓名: " />
<EditText android:layout_width="match_parent"
android:layout_height="wrap_content"
android:tag="name"
android:hint="请输入姓名" />
LinearLayout>
<LinearLayout android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_width="match_parent">
<TextView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="年龄: " />
<EditText android:layout_width="match_parent"
android:layout_height="wrap_content"
android:tag="age"
android:hint="请输入年龄" />
LinearLayout>
<LinearLayout android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_width="match_parent">
<TextView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="性别: " />
<Spinner android:layout_width="match_parent"
android:layout_height="wrap_content"
android:tag="sex"
android:text="男同学|女同学" />
LinearLayout>
<LinearLayout android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_width="match_parent">
<TextView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="喜欢玩" />
<EditText android:layout_width="100dp"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:tag="a1"
android:hint="什么" />
<TextView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="和" />
<EditText android:layout_width="100dp"
android:gravity="center_horizontal"
android:layout_height="wrap_content"
android:tag="a2"
android:hint="什么" />
LinearLayout>
<LinearLayout android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_width="match_parent">
<TextView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="爱 好: " />
<LinearLayout android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_width="match_parent">
<CheckBox android:layout_width="match_parent"
android:layout_height="wrap_content"
android:tag="music"
android:text="听音乐" />
<CheckBox android:layout_width="match_parent"
android:layout_height="wrap_content"
android:tag="sing"
android:text="唱歌" />
<CheckBox android:layout_width="match_parent"
android:layout_height="wrap_content"
android:tag="dance"
android:text="跳舞" />
LinearLayout>
LinearLayout>
<LinearLayout android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_width="match_parent">
<TextView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="所在年级: " />
<RadioGroup android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_width="match_parent">
<RadioButton android:layout_width="match_parent"
android:layout_height="wrap_content"
android:tag="one"
android:text="一年级" />
<RadioButton android:layout_width="match_parent"
android:layout_height="wrap_content"
android:tag="two"
android:text="二年级" />
<RadioButton android:layout_width="match_parent"
android:layout_height="wrap_content"
android:tag="three"
android:text="三年级" />
RadioGroup>
LinearLayout>
<LinearLayout android:layout_height="wrap_content"
android:orientation="horizontal"
android:gravity="center_vertical"
android:layout_width="match_parent">
<TextView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:text="备注: " />
<EditText android:layout_width="match_parent"
android:layout_height="200dp"
android:tag="mark"
android:minHeight="100dp"
android:maxLines="1000"
android:hint="备注" />
LinearLayout>
<LinearLayout android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:orientation="horizontal">
<Button android:text="启动环境"
android:layout_weight="1"
android:tag="envBtn"
android:cornerRadius="24dp"
android:background="#88000000"
android:textColor="#ffffff"
android:layout_width="wrap_content" />
<Button android:text="启动脚本"
android:layout_weight="1"
android:tag="startBtn"
android:layout_width="wrap_content" />
<Button android:text="保存参数"
android:layout_weight="1"
android:tag="saveAllBtn"
android:layout_width="wrap_content" />
<Button android:text="系统设置"
android:layout_weight="1"
android:tag="systemSetting"
android:layout_width="wrap_content" />
LinearLayout>
LinearLayout>
ScrollView>
总结
什么是布局，布局就是一个容器，就是里面可以放很多东西的缸，盆，冰箱 。
线性布局就俩属性，里面的东西排成横线或者排成竖线。
相对布局，就是相对于另一个布局或者控件的位置摆放。
滚动布局，字面意思就是可以让页面滚动。
注意
文中没有提到的属性请参考
公有属性： EasyClick 原生UI连载 三
本文的布局代码没有注明EasyClick官方写法的是基于Android编写并不是用EasyClick 编辑的，两者有的地方是有区别的。具体参考官方支持的属性和写法
第一章内容已经写过了。连接在最顶上EasyClick 原生UI教程
。
我是Mr-老鬼、QQ1156346325 。交流QQ群：620028786,647082990
---------------------------------------版权声明------------------------------------------------------
版权所有~Mr-老鬼 ~转载请注明原文地址。
免责声明：本文所有的教程仅限交流学习使用不得用于违法用途，造成的法律后果本人不承担责任。