安卓 App 开发 - 05-Android xml 布局详细介绍
虽然说有 墨刀, 墨客 这些图形化开发工具来做 Android 的界面设计, 但是我们还是离不开要去学习做安卓原生 App, 学习 xml 布局还是必要的
(1)准备
首先我们要了解 Android 到底有那些布局, 和每个布局类型的区别
学习时最好打开 Android Studio 打开 xml 文件对应看一下
配置参数的详细含义不用着急全部理解, 放在文章后面, 可收藏做查阅[可通过目录跳转]
(2)学习目标
学习下 xml 的布局文件具体写法. 这一节我们要绘制如下图所示的界面
(3)线性布局 LinearLayout
线性布局分两种. 一种是水平布局, 一种是垂直布局. 下面我们根据上图举例子
上图代码:
- <?xml version="1.0" encoding="utf-8"?>
- <LinearLayout Android:orientation="vertical"
- Android:layout_width="fill_parent" Android:layout_height="fill_parent"
- xmlns:Android="http://schemas.Android.com/apk/res/Android">
- <TextView Android:layout_height="wrap_content" Android:text="@string/note_title"
- Android:layout_width="wrap_content" Android:padding="10dp"></TextView>
- <LinearLayout Android:layout_height="fill_parent"
- Android:layout_width="fill_parent" Android:layout_weight="1">
- <EditText Android:id="@+id/EditText02" Android:layout_width="fill_parent"
- Android:layout_height="fill_parent" Android:gravity="left"
- Android:hint="@string/edithint"></EditText>
- </LinearLayout>
- <LinearLayout Android:layout_height="fill_parent"
- Android:layout_width="fill_parent" Android:layout_weight="2"
- Android:gravity="center"
- Android:orientation="horizontal">
- <ImageButton Android:id="@+id/ImageButton01" Android:layout_width="72dp" Android:layout_height="72dp" Android:src="@drawable/sketchy_paper_003" Android:layout_margin="3dp"></ImageButton> <ImageButton Android:id="@+id/ImageButton02" Android:layout_width="72dp" Android:layout_height="72dp" Android:src="@drawable/sketchy_paper_004" Android:layout_margin="3dp"></ImageButton> <ImageButton Android:id="@+id/ImageButton03" Android:layout_width="72dp" Android:layout_height="72dp" Android:src="@drawable/sketchy_paper_007" Android:layout_margin="3dp"></ImageButton> <ImageButton Android:id="@+id/ImageButton04" Android:layout_width="72dp" Android:layout_height="72dp" Android:src="@drawable/sketchy_paper_011" Android:layout_margin="3dp"></ImageButton> </LinearLayout> </LinearLayout>
可以看到, 上图是由三部分组成. 在大的 LinearLayout 从上而下垂直分布着三个内容: TextView,LinearLayout,LinearLayout. 所以总体的 LinearLayout 是垂直布局
下面我们来看水平布局
其实就是上图中的最下面那个 LinearLayout. 四个图标平行排列.
Android:orientation="horizontal"
(4)相对布局 RelativeLayout
这个布局相对简单一点. 一般来讲利用 ADT 自己拖放按钮就可以. 基本上可以随意布局. 如下图所示
上图代码:
- <RelativeLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
- xmlns:tools="http://schemas.Android.com/tools"
- Android:layout_width="match_parent"
- Android:layout_height="match_parent"
- Android:paddingBottom="@dimen/activity_vertical_margin"
- Android:paddingLeft="@dimen/activity_horizontal_margin"
- Android:paddingRight="@dimen/activity_horizontal_margin"
- Android:paddingTop="@dimen/activity_vertical_margin"
- tools:context=".MainActivity">
- <Button
- Android:id="@+id/button1"
- style="?Android:attr/buttonStyleSmall"
- Android:layout_width="wrap_content"
- Android:layout_height="wrap_content"
- Android:layout_alignParentLeft="true"
- Android:layout_alignParentTop="true"
- Android:text="Button" />
- <Button
- Android:id="@+id/button2"
- style="?Android:attr/buttonStyleSmall"
- Android:layout_width="wrap_content"
- Android:layout_height="wrap_content"
- Android:layout_alignBaseline="@+id/button1"
- Android:layout_alignBottom="@+id/button1"
- Android:layout_alignParentRight="true"
- Android:layout_marginRight="14dp"
- Android:text="Button" />
- <Button
- Android:id="@+id/button3"
- style="?Android:attr/buttonStyleSmall"
- Android:layout_width="wrap_content"
- Android:layout_height="wrap_content"
- Android:layout_below="@+id/button1"
- Android:layout_centerHorizontal="true"
- Android:layout_marginTop="97dp"
- Android:text="Button" />
- <Button
- Android:id="@+id/button4"
- style="?Android:attr/buttonStyleSmall"
- Android:layout_width="wrap_content"
- Android:layout_height="wrap_content"
- Android:layout_alignLeft="@+id/button1"
- Android:layout_below="@+id/button3"
- Android:layout_marginTop="89dp"
- Android:text="Button" />
- <Button
- Android:id="@+id/button5"
- style="?Android:attr/buttonStyleSmall"
- Android:layout_width="wrap_content"
- Android:layout_height="wrap_content"
- Android:layout_alignLeft="@+id/button2"
- Android:layout_alignTop="@+id/button4"
- Android:text="Button" />
- </RelativeLayout>
layout_marginBottom 是指控件边以外空下的距离, 比如 Button1 和 Button2 垂直显示, 将 Button1 中 layout_marginBottom = 10dp, 那么 Button1 与 Button2 之间将有 10dp 距离
下面这两句是居左显示和居右显示
- Android:layout_alignParentLeft="true"
- Android:layout_alignParentTop="true"
[提示] : 相对视图应该是最有用的, 具体的操作比较复杂, 更多的是通过图形界面拖拉, 再用代码微调
(5)帧布局 FrameLayout
这个布局很简单, 而且感觉有点二二的, 哈哈! 就是控件一个挨一个在左上角罗列
上图代码:
- <?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">
- <Button
- Android:id="@+id/button1"
- style="?Android:attr/buttonStyleSmall"
- Android:layout_width="wrap_content"
- Android:layout_height="wrap_content"
- Android:text="Button" />
- <Button
- Android:id="@+id/button2"
- Android:layout_width="126dp"
- Android:layout_height="135dp"
- Android:text="Button" />
- <Button
- Android:id="@+id/button3"
- Android:layout_width="194dp"
- Android:layout_height="232dp"
- Android:text="Button" />
- </FrameLayout>
(6)绝对布局 AbsoluteLayout
绝对布局比较容易使用, 就是以左上方为原点建立坐标系. 每个控件用 layout_x 和 layout_y 表示位置. 但是据说这种布局比较刚性, 不容易适配各种终端, 所以要慎用!
上图代码:
- <?xml version="1.0" encoding="utf-8"?>
- <AbsoluteLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
- Android:layout_width="match_parent"
- Android:layout_height="match_parent">
- <Button
- Android:id="@+id/button1"
- Android:layout_width="wrap_content"
- Android:layout_height="wrap_content"
- Android:layout_x="44dp"
- Android:layout_y="18dp"
- Android:text="Button" />
- <Button
- Android:id="@+id/button2"
- Android:layout_width="wrap_content"
- Android:layout_height="wrap_content"
- Android:layout_x="122dp"
- Android:layout_y="173dp"
- Android:text="Button" />
- <Button
- Android:id="@+id/button3"
- Android:layout_width="wrap_content"
- Android:layout_height="wrap_content"
- Android:layout_x="36dp"
- Android:layout_y="133dp"
- Android:text="Button" />
- </AbsoluteLayout>
(7)表格布局 TableLayout
TableLayout 有点像一个表格或是矩阵. 在布局中加入 TableRow, 它的属性是 horizontal 所以每个 TableRow 只能横放. 它里面的每个控件的高都是一样的. 下图所示, 是加入了一个 TableRow 和里面的控件
上图代码:
- <?xml version="1.0" encoding="utf-8"?>
- <TableLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
- Android:layout_width="match_parent"
- Android:layout_height="match_parent">
- <TableRow
- Android:id="@+id/tableRow1"
- Android:layout_width="wrap_content"
- Android:layout_height="wrap_content">
- <Button
- Android:id="@+id/button1"
- style="?Android:attr/buttonStyleSmall"
- Android:layout_width="wrap_content"
- Android:layout_height="wrap_content"
- Android:text="Button" />
- <Button
- Android:id="@+id/button2"
- style="?Android:attr/buttonStyleSmall"
- Android:layout_width="wrap_content"
- Android:layout_height="wrap_content"
- Android:text="Button" />
- <Button
- Android:id="@+id/button3"
- style="?Android:attr/buttonStyleSmall"
- Android:layout_width="wrap_content"
- Android:layout_height="wrap_content"
- Android:text="Button" />
- <Button
- Android:id="@+id/button4"
- style="?Android:attr/buttonStyleSmall"
- Android:layout_width="wrap_content"
- Android:layout_height="wrap_content"
- Android:text="Button" />
- <TextView
- Android:id="@+id/textView1"
- Android:layout_width="wrap_content"
- Android:layout_height="wrap_content"
- Android:text="TextView" />
- </TableRow>
- </TableLayout>
xml 配置参数大全
第一类: 属性值为 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 的引用名
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 离某元素上边缘的距离
EditText 的 Android:hint 设置 EditText 为空时输入框内的提示信息.
Android:gravity
Android:gravity 属性是对该 view 内容的限定.比如一个 button 上面的 text. 你可以设置该 text 在 view 的靠左, 靠右等位置.以 button 为例, Android:gravity="right" 则 button 上面的文字靠右
Android:layout_gravity
Android:layout_gravity 是用来设置该 view 相对与起父 view 的位置.比如一个 button 在 linearlayout 里, 你想把该 button 放在靠左, 靠右等位置就可以通过该属性设置.以 button 为例, Android:layout_gravity="right" 则 button 靠右
Android:scaleType:
Android:scaleType 是控制图片如何 resized/moved 来匹对 ImageView 的 size.ImageView.ScaleType / Android:scaleType 值的意义区别:
CENTER /center 按图片的原来 size 居中显示, 当图片长 / 宽超过 View 的长 / 宽, 则截取图片的居中部分显示
CENTER_CROP / centerCrop 按比例扩大图片的 size 居中显示, 使得图片长 (宽) 等于或大于 View 的长(宽)
CENTER_INSIDE / centerInside 将图片的内容完整居中显示, 通过按比例缩小或原来的 size 使得图片长 / 宽等于或小于 View 的长 / 宽
FIT_CENTER / fitCenter 把图片按比例扩大 / 缩小到 View 的宽度, 居中显示
FIT_END / fitEnd 把图片按比例扩大 / 缩小到 View 的宽度, 显示在 View 的下部分位置
FIT_START / fitStart 把图片按比例扩大 / 缩小到 View 的宽度, 显示在 View 的上部分位置
FIT_XY / fitXY 把图片不按比例扩大 / 缩小到 View 的大小显示
MATRIX / matrix 用矩阵来绘制, 动态缩小放大图片来显示.
** 要注意一点, Drawable 文件夹里面的图片命名是不能大写的.
Android:id 为控件指定相应的 ID
Android:text 指定控件当中显示的文字, 需要注意的是, 这里尽量使用 strings.xml 文件当中的字符串
Android:gravity 指定 View 组件的对齐方式, 比如说居中, 居右等位置 这里指的是控件中的文本位置并不是控件本身
Android:layout_gravity 指定 Container 组件的对齐方式.比如一个 button 在 linearlayout 里, 你想把该 button 放在靠左, 靠右等位置就可以通过该属性设置.以 button 为 例, Android:layout_gravity="right" 则 button 靠右
Android:textSize 指定控件当中字体的大小
Android:background 指定该控件所使用的背景色, RGB 命名法
Android:width 指定控件的宽度
Android:height 指定控件的高度
Android:layout_width 指定 Container 组件的宽度
Android:layout_height 指定 Container 组件的高度
Android:layout_weight View 中很重要的属性, 按比例划分空间
Android:padding* 指定控件的内边距, 也就是说控件当中的内容
Android:sigleLine 如果设置为真的话, 则控件的内容在同一行中进行显示
Android:scaleType 是控制图片如何 resized/moved 来匹对 ImageView 的 siz
Android:layout_centerHrizontal 水平居中
Android:layout_centerVertical 垂直居中
Android:layout_centerInparent 相对于父元素完全居中
Android:layout_alignParentBottom 贴紧父元素的下边缘
Android:layout_alignParentLeft 贴紧父元素的左边缘
Android:layout_alignParentRight 贴紧父元素的右边缘
Android:layout_alignParentTop 贴紧父元素的上边缘
Android:layout_alignWithParentIfMissing 如果对应的兄弟元素找不到的话就以父元素做参照物
Android:layout_below 在某元素的下方
Android:layout_above 在某元素的的上方
Android:layout_toLeftOf 在某元素的左边
Android:layout_toRightOf 在某元素的右边
Android:layout_alignTop 本元素的上边缘和某元素的的上边缘对齐
Android:layout_alignLeft 本元素的左边缘和某元素的的左边缘对齐
Android:layout_alignBottom 本元素的下边缘和某元素的的下边缘对齐
Android:layout_alignRight 本元素的右边缘和某元素的的右边缘对齐
Android:layout_marginBottom 离某元素底边缘的距离
Android:layout_marginLeft 离某元素左边缘的距离
Android:layout_marginRight 离某元素右边缘的距离
Android:layout_marginTop 离某元素上边缘的距离
Android:paddingLeft 本元素内容离本元素右边缘的距离
Android:paddingRight 本元素内容离本元素上边缘的距离
Android:hint 设置 EditText 为空时输入框内的提示信息
Android:LinearLayout 它确定了 LinearLayout 的方向, 其值可以为 vertical, 表示垂直布局 horizontal, 表示水平布局
Android:interpolator
可能有很多人不理解它的用法, 文档里说的也不太清楚, 其实很简单, 看下面: interpolator 定义一个动画的变化率 (the rate of change). 这使得基本的动画效果(alpha, scale, translate, rotate) 得以加速, 减速, 重复等. 用通俗的一点的话理解就是: 动画的进度使用 Interpolator 控制. interpolator 定义了动画的变化速度, 可以实现匀速, 正加速, 负加速, 无规则变加速等. Interpolator 是基类, 封装了所有 Interpolator 的共同方法, 它只有一个方法, 即 getInterpolation (float input), 该方法 maps a point on the timeline to a multiplier to be applied to the transformations of an animation.Android 提供了几个 Interpolator 子类, 实现了不同的速度曲线, 如下:
AccelerateDecelerateInterpolator 在动画开始与介绍的地方速率改变比较慢, 在中间的时侯加速
AccelerateInterpolator 在动画开始的地方速率改变比较慢, 然后开始加速
CycleInterpolator 动画循环播放特定的次数, 速率改变沿着正弦曲线
DecelerateInterpolator 在动画开始的地方速率改变比较慢, 然后开始减速
LinearInterpolator 在动画的以均匀的速率改变
对于 LinearInterpolator , 变化率是个常数, 即 f (x) = x.
- public float getInterpolation(float input) {
- return input;
- }
Interpolator 其他的几个子类, 也都是按照特定的算法, 实现了对变化率. 还可以定义自己的 Interpolator 子类, 实现抛物线, 自由落体等物理效果
更多文章链接:
来源: https://www.cnblogs.com/xpwi/p/9690113.html